getUserMedia

index.ejs

getUserMedia()方法有三个参数：

1.约束对象

2.成功回调函数，传入参数：LocalMediaStream

3.失败回调函数，传入参数：error object

 <video autoplay></video>
 <img src = ''></img>
 <canvas style="display:none;"></canvas>

 <script>
 window.URL = window.URL || window.webkitURL;
 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.getmozGetUserMedia || navigator.msGetUserMedia;

     var video = document.querySelector('video');
     var canvas = document.querySelector('canvas');
     var ctx = canvas.getContext('2d');
     var localMediaStream = null;
     //
     function snapshot(){
         if(localMediaStream){
             console.log("snapshot");
             ctx.drawImage(video,0,0);
             //"image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
             document.querySelector('img').src = canvas.toDataURL('image/webp');
         }
     }
     //???????
     video.addEventListener('click',snapshot,false);
     function fallback(e){
         //video.src = 'fallbackvideo.webm';
         video.src = '/Users/apple/Movies/faceExpressGit.mov'
     }
     var onFailSoHard = function(e){
         console.log('Reeejected!',e);
     };

     function success(stream){
         video.src = window.URL.createObjectURL(stream);
         localMediaStream = stream;
     };

     if(!navigator.getUserMedia){
         fallback();

     }else{
         navigator.getUserMedia({video:true,audio:true},success,fallback);
     }

 /*function hasGetUserMedia(){
     //Note:Opera is unprefixed.
     return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.getmozGetUserMedia || navigator.msGetUserMedia);
 }*/
 //Not showing vendor refixes.

 /*if(navigator.getUserMedia){
     //Good to go
     navigator.getUserMedia({video:true,audio:true},
     function(localMediaStream){
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(localMediaStream);
         //Note: onloadmetadata doesn't fire in Chrome when using it with getUserMedia.
         //See crbug.com/110938.
         video.onloadedmetadata = function(e){
             //Ready to go.Do some stuff.
         };
     },onFailSoHard);

 }else{
     alert('getUserMedia() is not supported in your browser');

 }

 */
 </script>