API tools faq
paste
metalx1000

Basic Webcam Video Stream to Canvas - with Effects - FX

metalx1000
Jul 23rd, 2013
411
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.76 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <!--Based on Code from http://blog.teamtreehouse.com/accessing-the-device-camera-with-getusermedia-->
  5.   <title>Basic Webcam Video Stream to Canvas - with Effects - FX</title>
  6.     <style>
  7.     body {
  8.       background: #F7F7F7;
  9.       margin: 0;
  10.       padding: 0;
  11.     }
  12.  
  13.     #video-container {
  14.       margin: 2em auto 0;
  15.       width: 500px;
  16.       padding: 2em;
  17.       background: white;
  18.       -webkit-box-shadow: 0 1px 10px #D9D9D9;
  19.       -moz-box-shadow: 0 1px 10px #D9D9D9;
  20.       -ms-box-shadow: 0 1px 10px #D9D9D9;
  21.       -o-box-shadow: 0 1px 10px #D9D9D9;
  22.       box-shadow: 0 1px 10px #D9D9D9;
  23.     }
  24.  
  25.         #camera-stream {
  26.             //-webkit-filter: sepia(1);
  27.             //-webkit-filter: blur(3px);
  28.             //-webkit-filter: grayscale(1);
  29.             //-webkit-filter: sepia(1);
  30.             //-webkit-filter: brightness(2.5);
  31.             //-webkit-filter: contrast(5);
  32.             //-webkit-filter: hue-rotate(125deg);
  33.             //-webkit-filter: invert(1);
  34.             //-webkit-filter: saturate(3);
  35.             //-webkit-filter: opacity(0.3);  
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.   <div id="video-container">
  41.     <video id="camera-stream" width="500" autoplay></video>
  42.   </div>
  43.     <script>
  44.         window.onload = function() {
  45.        
  46.           // Normalize the various vendor prefixed versions of getUserMedia.
  47.           navigator.getUserMedia = (navigator.getUserMedia ||
  48.                                     navigator.webkitGetUserMedia ||
  49.                                     navigator.mozGetUserMedia ||
  50.                                     navigator.msGetUserMedia);
  51.        
  52.             if (navigator.getUserMedia) {
  53.               // Request the camera.
  54.               navigator.getUserMedia(
  55.                 // Constraints
  56.                 {
  57.                   video: true
  58.                 },
  59.        
  60.                 // Success Callback
  61.                 function(localMediaStream) {
  62.                     // Get a reference to the video element on the page.
  63.                     var vid = document.getElementById('camera-stream');
  64.        
  65.                     // Create an object URL for the video stream and use this
  66.                     // to set the video source.
  67.                     vid.src = window.URL.createObjectURL(localMediaStream);
  68.        
  69.                 },
  70.        
  71.                 // Error Callback
  72.                 function(err) {
  73.                   // Log the error to the console.
  74.                   console.log('The following error occurred when trying to use getUserMedia: ' + err);
  75.                 }
  76.               );
  77.  
  78.             } else {
  79.               alert('Sorry, your browser does not support getUserMedia');
  80.             }
  81.  
  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!