1 function hasGetUserMedia(){ 2 return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.webkitGetUserMedia); 3 } 4 5 if(hasGetUserMedia()){ 6 alert("支援"); 7 }else{ 8 alert("不支援"); 9 }
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 9 </style> 10 </head> 11 12 <body> 13 <video id="myVideo" width="400" height="300" autoplay></video> 14 <script> 15 navigator.mediaDevices.getUserMedia({ audio: true, video: true }) 16 .then(function (stream) { 17 var video = document.querySelector('video'); 18 // Older browsers may not have srcObject 19 if ("srcObject" in video) { 20 video.srcObject = stream; 21 } else { 22 // Avoid using this in new browsers, as it is going away. 23 video.src = window.URL.createObjectURL(stream); 24 } 25 video.onloadedmetadata = function (e) { 26 video.play(); 27 }; 28 }) 29 .catch(function (err) { 30 console.log(err.name + ": " + err.message); 31 }); 32 </script> 33 34 </body> 35 36 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 9 </style> 10 </head> 11 12 <body> 13 <video id="myVideo" width="400" height="300" autoplay></video> 14 <img src="" id="img"/> 15 <canvas width="400" height="300" hidden id="canvas"> 16 <script> 17 var video = document.getElementById('video'); 18 navigator.mediaDevices.getUserMedia({ audio: true, video: true }) 19 .then(function (stream) { 20 21 // Older browsers may not have srcObject 22 if ("srcObject" in video) { 23 video.srcObject = stream; 24 } else { 25 // Avoid using this in new browsers, as it is going away. 26 video.src = window.URL.createObjectURL(stream); 27 } 28 localMedioStream=stream; 29 video.onloadedmetadata = function (e) { 30 video.play(); 31 }; 32 }) 33 .catch(function (err) { 34 console.log(err.name + ": " + err.message); 35 }); 36 var video = document.getElementById('myVideo'); 37 video.addEventListener("click",snapshot,false); 38 var canvas =document.getElementById("canvas"); 39 var ctx=canvas.getContext("2d"); 40 var localMedioStream=null; 41 42 function snapshot(){ 43 if(localMedioStream){ 44 ctx.drawImage(video,0,0,400,300); 45 document.getElementById("img").src=canvas.toDataURL("image/png"); 46 } 47 } 48 49 </script> 50 51 </body> 52 53 </html>