shyla的博客

不要拖泥又带水,不要懒惰又浪费

HTML调用手机摄影头
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6. </head>  
  7. <body>  
  8. <video id="video" autoplay=""style='width:640px;height:480px'></video>  
  9. <div><button id='picture' style="width: 100%;">PICTURE</button></div>  
  10. <canvas id="canvas" width="640" height="480"></canvas>  
  11. <script type="text/javascript">  
  12. var video = document.getElementById("video");  
  13. var context = canvas.getContext("2d");  
  14. var errocb = function () {  
  15.     console.log('sth wrong!');  
  16. }  
  17.   
  18. if (navigator.getUserMedia) { // 标准的API  
  19.     navigator.getUserMedia({ "video": true }, function (stream) {  
  20.         video.src = stream;  
  21.         video.play();  
  22.     }, errocb);  
  23. } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API  
  24.     navigator.webkitGetUserMedia({ "video": true }, function (stream) {  
  25.         video.src = window.webkitURL.createObjectURL(stream);  
  26.         video.play();  
  27.     }, errocb);  
  28. }  
  29.   
  30. document.getElementById("picture").addEventListener("click", function () {  
  31.     context.drawImage(video, 0, 0, 640, 480);  
  32. });  
  33. </script>  
  34.   
  35. </body>  
  36. </html>  
阅读更多
想对作者说点什么? 我来说一句

虚拟摄影,虚拟摄影头

2009年03月21日 2.82MB 下载

HTMEL5调用手机摄影头源代码

2014年10月21日 3KB 下载

没有更多推荐了,返回首页

不良信息举报

HTML调用手机摄影头

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭