function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SivaGSivaG 

Enable integrated webcam with a button click in visual force page

Hi,

Use case - User will click the button and a popup to show "Select a picture to upload either from Photo Gallery or use Camera".
In case of mobile/table, on click of a button a popup to show "Select a picture to upload either from Photo Gallery or use Camera".
In case of desktop/laptop with webcam, on click of a button a popup to show "Select a picture to upload either from Computer or use Camera".
In case of desktop/laptop without webcam, on click of a button a popup to show "Select a picture to upload either from Computer".

My requirement is to capture an image through webcam(integrated(laptop) or external(laptop/desktop)) or mobile camera(Salesforce1) whenever a button is clicked on the visual force page. I have used html tags(<video> and <input>) but the problem is the webcam(laptop) is enabled by default(autoplay) even after I remove the autoplay attribute. 

Question - Can the webcam be controlled by a button in visual force page i.e on or off ?

Code I used - 

<apex:page controller="Photoupload1" showHeader="false" sidebar="false">
<html>
    <head>
        <script src="https://localhost/cordova.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
        
        <style>
        #wrapper {
      width:1600px;
      clear:both;
    }
        #first {
          width:800px;
          float:left;
        }
        #second {
          width:800px;
          float:left;
        }
        </style>
  </head>

           <title>Webcam</title>
<div  style="background-color:#FFF">
    <div  style="padding-top: 2%;padding-bottom: 1%;">
        <div class="col-md-2 col-md-offset-3" >
            <button class="btn btn-primary" style="margin-top:10px" id="snap" >Capture</button>
            <button class="btn btn-primary" style="margin-top:10px;display:none" id="new">Retake</button>    
            <button class="btn btn-primary" style="margin-top:10px;display:none" id="upload">Upload</button>
        </div>


        <div >
            <select class="form-control" style="margin-top:10px;display:none" id="videoSource"></select>
        </div>

    </div>
    <div style="padding-top: 2%;padding-bottom: 1%;" >
        <div align="center">
            <canvas id="canvas" style="display:none;width:10%;height:10%;"></canvas>
            <video class="myvideo" id="video" autoplay="autoplay" style="background-color: white;width:15%; height:15%;"></video> 
            <input id="video" type="file" accept="image/*;capture=camera"/>
        </div>
    </div> 

    <div id="el_loading" style="display:none;position: fixed;top:0;background-color: #fbfbfb; height:100%;opacity:0.65;width:100%;">
        <div  style="top: 50%; width: 91px;  margin: 20% 47%;"> 
            <img  src="/img/loading.gif" title="Please Wait..."/>
            <span>Saving...</span>
        </div>
    </div>  
</div>

<script>

function hideTheBoxComponent(){
        $("#myModal1").modal('hide'); 
    }

    function showDialogComponent(){
        $("#myModal1").modal({
          "backdrop"  : "static",
          "keyboard"  : true,
          "show"      : true 
        });
    }

    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {

        // Grab elements, create settings, etc.
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            errBack = function(error) {
                console.log("Video capture error: ", error.code); 
            };

        // Capture Snap Photo
        document.getElementById("snap").addEventListener("click", function() {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0);
            // Littel effects
            $('#video').hide();
            $('#canvas').show();
            $('#snap').hide();
            $('#new').show();
            $('#upload').show();
        });

        // Capture New Photo
        document.getElementById("new").addEventListener("click", function() {
            $('#video').show();
            $('#canvas').hide();
            $('#snap').show();
            $('#new').hide();
            $('#upload').hide();
        });



    }, false);

    'use strict';

 var videoElement = document.querySelector("video");
 var videoSelect = document.querySelector("select#videoSource");
 navigator.getUserMedia = navigator.getUserMedia ||
 navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

 function gotSources(sourceInfos) {
    for (var i = 0; i != sourceInfos.length; ++i) {
        var sourceInfo = sourceInfos[i];
         var option = document.createElement("option");
          option.value = sourceInfo.id;
         if (sourceInfo.kind === 'video') {
           option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
           videoSelect.appendChild(option);
              if( i == sourceInfos.length - 1 ) {
              option.selected = true;
               }
        } else {
            console.log('Some other kind of source: ', sourceInfo);
        }
     }
     start();
   }

   if (typeof MediaStreamTrack === 'undefined') {
    alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
   } else {
    MediaStreamTrack.getSources(gotSources);
   } 


   function successCallback(stream) {
    window.stream = stream; // make stream available to console
    videoElement.src = window.URL.createObjectURL(stream);
    videoElement.play();
   }

   function errorCallback(error) {
    console.log("navigator.getUserMedia error: ", error);
   }

    function start() {
    if (!!window.stream) {
        videoElement.src = null;
        window.stream.stop();
    }

    var videoSource = videoSelect.value;

    var constraints = {
        video: {
            optional: [{ sourceId: videoSource}]
       }
    };
    navigator.getUserMedia(constraints , successCallback, errorCallback);
    }
 </script>   
 
     
        <apex:form > 
             
             
     <apex:actionRegion >
    <apex:actionFunction action="{!saveImage}" name="saveImage" rerender="dummy">
    <!--<apex:actionFunction name="saveImage" rerender="dummy">-->
        <apex:param name="imageBase" assignTo="{!imageBase}" value="" />
    </apex:actionFunction>
    <apex:outputPanel id="dummy"/>
</apex:actionRegion>


  </apex:form> 

</html>
</apex:page>
SandhyaSandhya (Salesforce Developers) 
Hi Siva,

Try using autoplay="false".

Thanks and Regards
Sandhya