js调用设备摄像头的方法

使用getUserMedia这个API来获取摄像头的权限
兼容chrome和火狐,IOS不兼容

下面是源码:

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <video src=""></video> <script type="text/javascript"> var opt = { audio: true, video: { width: 375, height: 603 } }; navigator.mediaDevices.getUserMedia(opt) .then(function(mediaStream) { var video = document.querySelector('video'); video.srcObject = mediaStream; video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end. </script> </body> </html>

注意,如果使用chrome查看代码需要在https协议下才能生效,建议使用火狐查看。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/f694984055fb5f9ad1933ce2a9185d19.html