getUserMedia

index.ejs
getUserMedia()方法有三个参数：
1.约束对象
2.成功回调函数，传入参数：LocalMediaStream
3.失败回调函数，传入参数：error object
 1 <video autoplay></video>
 2 <img src = ''></img>
 3 <canvas style="display:none;"></canvas>
 4 
 5 <script>
 6 window.URL = window.URL || window.webkitURL;
 7 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.getmozGetUserMedia || navigator.msGetUserMedia;
 8 
 9     var video = document.querySelector('video');
10     var canvas = document.querySelector('canvas');
11     var ctx = canvas.getContext('2d');
12     var localMediaStream = null;
13     //
14     function snapshot(){
15         if(localMediaStream){
16             console.log("snapshot");
17             ctx.drawImage(video,0,0);
18             //"image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
19             document.querySelector('img').src = canvas.toDataURL('image/webp');
20         }    
21     }
22     //???????
23     video.addEventListener('click',snapshot,false);
24     function fallback(e){
25         //video.src = 'fallbackvideo.webm';
26         video.src = '/Users/apple/Movies/faceExpressGit.mov'
27     }
28     var onFailSoHard = function(e){
29         console.log('Reeejected!',e);
30     };
31 
32     function success(stream){
33         video.src = window.URL.createObjectURL(stream);
34         localMediaStream = stream;
35     };
36     
37     if(!navigator.getUserMedia){
38         fallback();
39     
40     }else{
41         navigator.getUserMedia({video:true,audio:true},success,fallback);
42     }
43     
44     
45     
46     
47     
48     
49 /*function hasGetUserMedia(){
50     //Note:Opera is unprefixed.
51     return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.getmozGetUserMedia || navigator.msGetUserMedia);
52 }*/
53 //Not showing vendor refixes.
54 
55 /*if(navigator.getUserMedia){
56     //Good to go
57     navigator.getUserMedia({video:true,audio:true},
58     function(localMediaStream){
59         var video = document.querySelector('video');
60         video.src = window.URL.createObjectURL(localMediaStream);
61         //Note: onloadmetadata doesn't fire in Chrome when using it with getUserMedia.
62         //See crbug.com/110938.
63         video.onloadedmetadata = function(e){
64             //Ready to go.Do some stuff.
65         };
66     },onFailSoHard);
67     
68 }else{
69     alert('getUserMedia() is not supported in your browser');
70     
71 }
72     
73 */
74 </script>
75
View Code