Skip to main content

This content is closed to future replies and is no longer being maintained or updated.
Links may no longer function. If you have a similar request, please write a new post.

Question

 Vinay Chowdary Sarupuru (Vinay Sarupuru)
LTIMindTree
PEGA Senior System Architect
LTIMindTree
US
Vinay Sarupuru Member since 2017 2 posts
LTIMindTree
Posted: May 4, 2018
Last activity: Jun 4, 2018
Posted: 4 May 2018 7:53 EDT
Last activity: 4 Jun 2018 2:35 EDT
Closed

Open Webcam in a section and take snapshot from the webcam and link it work object

Hi All,

I have a requirement where i need to capture the customer picture using webcam which is initiated by clicking a button on UI. Once the webcam opens and i need to provide another button to take snapshot and the snapshot should be embedded in Correspondence...

Please help me in solving this issue..

i have a HTML code where i can open webcam and take snapshot. But how can i do that in pega?

***Edited by Moderator Marissa to update categories***

To see attachments, please log in.
Low-Code App Development
Case Management
User Experience

Posted: 6 years ago
Posted: 4 May 2018 21:51 EDT
Hari Chalamala (HariC16657817)
Learning

Learning
IN

Hello Vinay,

Thanks for posting your query in PSC.

You can create a non-auto generated section and include your code in that section.

You can create a section normally. Click on the HTML tab and uncheck the Auto-generated HTML checkbox.

Hope this helps.

Thanks,

Hari

To see attachments, please log in.
Posted: 6 years ago
Posted: 8 May 2018 2:47 EDT
Vinay Chowdary Sarupuru (Vinay Sarupuru)
LTIMindTree
PEGA Senior System Architect
LTIMindTree
US

Hello Hari,

Thanks for your reply.

I had already tried the suggested process but the section is not being displayed.

My HTML Code for Webcam..

Show More

Hello Hari,

Thanks for your reply.

I had already tried the suggested process but the section is not being displayed.

My HTML Code for Webcam..

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body onload="init();">
    <h1>Take a snapshot of the current video stream</h1>
   Click on the Start WebCam button.
     <p>
    <button onclick="startWebcam();">Start WebCam</button>
    
       <button onclick="snapshot();">Take Snapshot</button> 
    </p>
    <video onclick="snapshot(this);" width=400 height=400 id="video" autoplay></video>   Screenshots :    <canvas  id="myCanvas" width="400" height="350"></canvas>  
  </body>
  <script>
      //--------------------
      // GET USER MEDIA CODE
      //--------------------
          navigator.getUserMedia = ( navigator.getUserMedia ||
                             navigator.webkitGetUserMedia ||
                             navigator.mozGetUserMedia ||
                             navigator.msGetUserMedia);
 
      var video;
      var webcamStream;
 
      function startWebcam() {
        if (navigator.getUserMedia) {
           navigator.getUserMedia (
 
              // constraints
              {
                 video: true,
                 audio: false
              },
 
              // successCallback
              function(localMediaStream) {
                  video = document.querySelector('video');
                 video.src = window.URL.createObjectURL(localMediaStream);
                 webcamStream = localMediaStream;
              },
 
              // errorCallback
              function(err) {
                 console.log("The following error occured: " + err);
              }
           );
        } else {
           console.log("getUserMedia not supported");
        }  
      }
 
      
      //---------------------
      // TAKE A SNAPSHOT CODE
      //---------------------
      var canvas, ctx, fullQuality;
 
      function init() {
        // Get the canvas and obtain a context for
        // drawing in it
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext('2d');
        ctx.toDataURL('image/jpeg', 1.0);
      }
 
      function snapshot() {
         // Draws current image from the video element into the canvas
 
        ctx.drawImage(video, 0,0, canvas.width, canvas.height);
 
      }
 
  </script>
</html>

Show Less
To see attachments, please log in.
Posted: 6 years ago
Posted: 24 May 2018 7:51 EDT
Vinay Chowdary Sarupuru (Vinay Sarupuru)
LTIMindTree
PEGA Senior System Architect
LTIMindTree
US

Hi Harish,

I need some clarification on this "Step-2 : Copy below javascript code and paste it in your userworkform:- " 

I did not understand, what is this user workform. Is it the same HTML section or anything else..

Thanks,

Vinay_Sarupuru

 

To see attachments, please log in.
Posted: 6 years ago
Posted: 27 May 2018 8:08 EDT
Godavari Modalavalasa (GodavariM5332)
Singtel
Lead Solution Designer
Singtel
IN

Hi Hari,

 

Ideally, it should work but as said it's not working try below steps.

1. keep HTML and CSS code in same non-auto generated section

2. Create a JS file keep your JS code into it  and call the file in Harness level styles and scripts tab

3. If you put in UserWorkForm it will be applicable to the entire application, As your requirement is specific to single harness so in this case UserWorkForm is not recommended. 

To see attachments, please log in.
Posted: 6 years ago
Posted: 4 Jun 2018 2:35 EDT
Vinay Chowdary Sarupuru (Vinay Sarupuru)
LTIMindTree
PEGA Senior System Architect
LTIMindTree
US

Hi Godavari and Hari,

I had tried all the process but still the code is not working. I am able to get the webcam capture work only in Microsoft Edge browser. I can't even open webcam in other browsers.

To see attachments, please log in.

We'd prefer it if you saw us at our best.

Pega Collaboration Center has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice