小程序怎么引流_js调用设备摄像头的方法

js调用设备摄像头的方法       这篇文章主要为大家详细介绍了js调用设备摄像头的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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查看代码需要在htt凡科抠图协议下才能生效,建议使用火狐查看。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。