這次帶給大家JS呼叫本地攝影機功能步驟詳解,JS調用本地攝影機功能的注意事項有哪些,下面就是實戰案例,一起來看一下。
今天學習了一下js調用本地攝像頭,其實是實現不是很麻煩,下面是程式碼部分,連接上Tomcat伺服器,然後再到網頁上打開即可以看到效果了。 。快來玩一下吧!
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style> video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; float:left; } canvas { margin-top: 20px; border: 1px solid #ccc; display: block; } </style> </head> <body> <video width="640" height="480" id="myVideo"></video> <canvas width="640" height="480" id="myCanvas"></canvas> <button id="myButton">截图</button> <button id="myButton2">预览</button> <button id="myButton3"> <a download="video.png">另存为</a> </button> </body> <script> window.addEventListener('DOMContentLoaded',function(){ var cobj=document.getElementById('myCanvas').getContext('2d'); var vobj=document.getElementById('myVideo'); getUserMedia({video:true},function(stream){ vobj.src=stream; vobj.play(); },function(){}); document.getElementById('myButton').addEventListener('click',function(){ cobj.drawImage(vobj,0,0,640,480); document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png"); },false); document.getElementById('myButton2').addEventListener('click',function(){ window.open(cobj.canvas.toDataURL("image/png"),'_blank'); },false); },false); function getUserMedia(obj,success,error){ if(navigator.getUserMedia){ getUserMedia=function(obj,success,error){ navigator.getUserMedia(obj,function(stream){ success(stream); },error); } }else if(navigator.webkitGetUserMedia){ getUserMedia=function(obj,success,error){ navigator.webkitGetUserMedia(obj,function(stream){ var _URL=window.URL || window.webkitURL; success(_URL.createObjectURL(stream)); },error); } }else if(navigator.mozGetUserMedia){ getUserMedia=function(obj,success,error){ navigator.mozGetUserMedia(obj,function(stream){ success(window.URL.createObjectURL(stream)); },error); } }else{ return false; } return getUserMedia(obj,success,error); } </script> </html>
我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是JS調用本地攝影機功能步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!