Thursday, June 25, 2015

getUserMedia Advance Features of HTML5 WebCam Kit

  1. Start and Stop Web Cam using getUserMedia HTML5 feature.

  3. <html>
  4. <head>
  5.  <meta charset="utf-8">
  6.  <title>JS Bin</title>
  7.  <script>
  8.     navigator.getUserMedia = ( navigator.getUserMedia ||
  9.                                navigator.webkitGetUserMedia ||
  10.                                navigator.mozGetUserMedia ||
  11.                                navigator.msGetUserMedia);
  12. var webcamStream;
  13.  
  14.  function startWebCam() {
  15.     if (navigator.getUserMedia) {
  16.         navigator.getUserMedia (
  17.             // constraints
  18.             {
  19.                 video: true,
  20.                 audio: false
  21.             },
  22.  
  23.             // successCallback
  24.             function(localMediaStream) {
  25.                 var video = document.querySelector('video');
  26.                 video.src = window.URL.createObjectURL(localMediaStream);
  27.                 webcamStream = localmediaStream;
  28.             },
  29.  
  30.             // errorCallback
  31.             function(err) {
  32.                 console.log("The following error occurred: " + err);
  33.             }
  34.         );
  35.     } else {
  36.         console.log("getUserMedia not supported");
  37.     }
  38. }
  39. function stopWebcam() {
  40.     webcamStream.stop();
  41. }
  42.  </script>
  43. </head>
  44. <body >
  45.      <video width=200 height=200 id="video" controls autoplay></video>
  46.      <button onclick="startWebcam();">Start Webcam</button>
  47.      <button onclick="stopWebcam();">Stop Webcam</button>
  48. </body>
  49. </html>
Posted by at 1 comment:

Web Cam Enable Application example

  1. <html>
  2. <head>
  3.  <meta charset="utf-8">
  4.  <title>JS Bin</title>
  5.  <script>
  6.     navigator.getUserMedia = ( navigator.getUserMedia ||
  7.                                navigator.webkitGetUserMedia ||
  8.                                navigator.mozGetUserMedia ||
  9.                                navigator.msGetUserMedia); 
  10.     if (navigator.getUserMedia) {
  11.         navigator.getUserMedia (
  12.             // constraints
  13.             {
  14.                 video: true,
  15.                 audio: false
  16.             },
  17.  
  18.             // successCallback
  19.             function(localMediaStream) {
  20.                 var video = document.querySelector('video');
  21.                 video.src = window.URL.createObjectURL(localMediaStream);
  22.             },
  23.  
  24.             // errorCallback
  25.             function(err) {
  26.                 console.log("The following error occured: " + err);
  27.             }
  28.         );
  29.     } else {
  30.         console.log("getUserMedia not supported");
  31.     }
  32.  </script>
  33. </head>
  34. <body >
  35.      <video width=200 height=200 id="video" controls autoplay></video>
  36. </body>
  37. </html>
Posted by at No comments:
Subscribe to: Posts (Atom)