API tools faq
paste
metalx1000

Basic Webcam Video Stream to Canvas - with Image Overlay

metalx1000
Jul 25th, 2013
535
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.73 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Basic Webcam Video Stream to Canvas - with Image Overlay</title>
  5.     <style>
  6.         #camera-stream {
  7.             display : none;
  8.         }
  9.  
  10.         #output{
  11.             /* video effects
  12.             -webkit-filter: sepia(1);
  13.             -webkit-filter: blur(3px);
  14.             -webkit-filter: grayscale(1);
  15.             -webkit-filter: sepia(1);
  16.             -webkit-filter: brightness(2.5);
  17.             -webkit-filter: contrast(5);
  18.             -webkit-filter: hue-rotate(125deg);
  19.             -webkit-filter: invert(1);
  20.             -webkit-filter: saturate(3);
  21.             -webkit-filter: opacity(0.3);  
  22.             */
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.   <div id="video-container">
  28.     <video id="camera-stream" autoplay></video>
  29.     <canvas id="output"></canvas>
  30.  
  31.   </div>
  32.  
  33.     <script src="ccv.js"></script>
  34.     <script src="face.js"></script>
  35.  
  36.     <script>
  37.         var overlay = new Image();
  38.         overlay.src = 'http://filmsbykris.com/scripts/canvas/img/opensec-tux-mario-1732.png';
  39.         var canvas = document.getElementById('output');
  40.         var context = canvas.getContext('2d');
  41.  
  42.         window.onload = function() {
  43.        
  44.           // Normalize the various vendor prefixed versions of getUserMedia.
  45.           navigator.getUserMedia = (navigator.getUserMedia ||
  46.                                     navigator.webkitGetUserMedia ||
  47.                                     navigator.mozGetUserMedia ||
  48.                                     navigator.msGetUserMedia);
  49.        
  50.             if (navigator.getUserMedia) {
  51.               // Request the camera.
  52.               navigator.getUserMedia(
  53.                 // Constraints
  54.                 {
  55.                   video: true
  56.                 },
  57.        
  58.                 // Success Callback
  59.                 function(localMediaStream) {
  60.                     // Get a reference to the video element on the page.
  61.                     vid = document.getElementById('camera-stream');
  62.        
  63.                     // Create an object URL for the video stream and use this
  64.                     // to set the video source.
  65.                     vid.src = window.URL.createObjectURL(localMediaStream);
  66.                     vid.addEventListener('canplay', function(){
  67.                         vid.removeEventListener('canplay');
  68.                         vid.play();
  69.                         draw_canvas();
  70.                     });
  71.                 }
  72.        
  73.               );
  74.             }
  75.  
  76.         }  
  77.  
  78.         function draw_canvas(){
  79.             requestAnimationFrame(draw_canvas);
  80.             context.drawImage(vid, 0, 0, 300, 200);
  81.             context.drawImage(overlay, 0, 0, 100, 100);
  82.         }
  83.     </script>
  84. </body>
  85. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!