HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题HTML5 图片预加载的示例代码Html5调用手机摄像头并实现人脸识别的实现html5调用摄像头功能的实现代码HTML5混合开发二维码扫描以及调用本地摄像头HTML实现海康摄像头实时监控功能在HTML里加载摄像头的方法

 if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } }

 if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); }

 var deviceInfoId="", //摄像头ID num = 0, //摄像头数量 carema = []; //摄像头ID数组 //在页面加载完成后获得设备ID数组 window.onload = navigator.mediaDevices.enumerateDevices().then(gotDevices); function gotDevices(deviceInfos) { for (let i = 0; i < deviceInfos.length; ++i) { if (deviceInfos[i].kind === 'videoinput') { carema.push(deviceInfos[i].deviceId) } } deviceInfoId = carema[后置位置]; } var constraints = { audio: false, video: { deviceId: deviceInfoId, //放在app里面需要下面配置一下 "permissions": { "audio-capture": { "description": "Required to capture audio using getUserMedia()" }, "video-capture": { "description": "Required to capture video using getUserMedia()" } } } }; navigator.mediaDevices.getUserMedia(constraints) .then(function (stream) { var video = document.getElementById('video'); try { window.stream = stream; video.srcObject = stream; } catch (error) { video.src = window.URL.createObjectURL(stream); } this.localMediaStream = stream; // video.play(); 这个加不加好像没有影响 }) .catch(function (err) { console.log(err.name + ": " + err.message); });

 var video = document.getElementById('video'); var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), CHeight = video.clientHeight, //获取屏幕大小让canvas自适应 CWidth = video.clientWidth; canvas.width = CWidth; canvas.height = CHeight; //localMediaStream 在data里定义一个{} if (localMediaStream) { ctx.drawImage(video, 0, 0, CWidth, CHeight); var dataURL = canvas.toDataURL('image/jpeg'); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA' img.src = dataURL;

 var constraints = window.constraints = { audio: false, video: { sourceId: 'default', facingMode: { exact: "user" } } };

点击自拍一张头像
拍照

 // 头像相机 moveToCameraAVG() { var self = this; if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } } if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); } var constraints = window.constraints = { audio: false, video: { sourceId: 'default', facingMode: { exact: "user" } } }; navigator.mediaDevices.getUserMedia(constraints) .then(function (stream) { var video = document.getElementById('video'); try { window.stream = stream; video.srcObject = stream; } catch (error) { video.src = window.URL.createObjectURL(stream); } self.localMediaStream = stream; video.play(); }) .catch(function (err) { alert(err.name + ": " + err.message); }); }, //停止摄像机 stopCapture: function () { var video = document.getElementById('video'); if (!video.srcObject) return let stream = video.srcObject let tracks = stream.getTracks(); tracks.forEach(track => { track.stop() }) }, // 头像照片 captureAvg() { var vm = this; var video = document.getElementById('video'); var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), CHeight = video.clientHeight, //获取屏幕大小让canvas自适应 CWidth = video.clientWidth; canvas.width = CWidth; canvas.height = CHeight; if (vm.localMediaStream) { ctx.drawImage(video, 0, 0, CWidth, CHeight); var dataURL = canvas.toDataURL('image/jpeg'); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA' vm.imginfo = dataURL; // 停止摄像机 video.pause(); this.stopCapture(); } },