js调用设备摄像头的方法
程序员文章站
2023-10-29 23:09:22
本文实例为大家分享了js调用设备摄像头的具体代码,供大家参考,具体内容如下
使用getusermedia这个api来获取摄像头的权限
兼容chrome和火狐,ios不...
本文实例为大家分享了js调用设备摄像头的具体代码,供大家参考,具体内容如下
使用getusermedia这个api来获取摄像头的权限
兼容chrome和火狐,ios不兼容
下面是源码:
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8" /> <meta name="viewport" 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协议下才能生效,建议使用火狐查看。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。