调用问题
网页如何调用摄像头？ 这问题问的特别有水准之前做过一个用vue做的。开摄像头扫码的东西。里面有两个方法是专门用来开摄像头的
代码有点长。。。但是我懒得把东西提出来了
<template>
<div>
<input type="file" accept="video/*" capture="camera">
<button @click="openSuccess">open success</button>
<br/>
{{userMediaMsg}}
<br/>
<video ref="showSuccess" src=""></video>
</div>
</template>
<script>
import { qrcode } from '../static/js/llqrcode';
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}else{}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
export default {
data(){
let that=this;
qrcode.callback=function(e){
if(e==qrcode.errorContent){
console.log("读取失败");
}else{
console.log("读取成功")
console.log(e);
}
that.qrcode_val=e;
};
var canvas=document.createElement("canvas"),
context=canvas.getContext("2d");
return {
qrcode_val:'',
mediaOpts : {
audio: false,
video: true,
video: { facingMode: "environment"} // 或者 "user"
// video: { width: 1280, height: 720 }
// video: { facingMode: { exact: "environment" } }// 或者 "user"
},
canvas:canvas,
context:context,
userMediaMsg:'',
stype:0
}
},
methods: {
onchang(e){
var that=e.target;
console.log(that.files);
this.decode_file(that.files);
},
/**
* 打开摄像头
*/
openSuccess(){
this.setwebcam();
},
/**
* 方法集合
*/
getSucessFunc(){
let that=this;
let video=this.$refs["showSuccess"];
this.userMediaMsg="getSucessFunc";
function successFunc(stream) {
that.userMediaMsg="nndt"
that.mediaStreamTrack = stream;
video = document.querySelector('video');
if ("srcObject" in video) {
video.srcObject = stream
} else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream
}
video.play();
}
function errorFunc(err) {
alert(err);
}
this.userMediaMsg="getSucessFunc F";
return {success:successFunc,error:errorFunc};
},
drawMedia(){
let video=this.$ref("showSuccess");
this.canvas.setAttribute("width", video.videoWidth);
this.canvas.setAttribute("height", video.videoHeight);
this.context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
// 返回解码是否成功
return (this.qrcode_val=qrcode.decode(this.canvas.toDataURL)===qrcode.errorContent);
},
scanCode(){
if(this.drawMedia()){
// 失败
let that=this;
setTimeout(function(){
that.scanCode();
},500);
}else{
// 成功
console.log(this.qrcode_val);
this.closeMedia();
}
},
closeMedia(){
let that=this;
this.mediaStreamTrack.getVideoTracks().forEach(function (track) {
track.stop();
that.context1.clearRect(0, 0,that.canvas.width, that.canvas.height); // 清除画布
});
},
// ------------------------------------------------------
t_qrcode(){
alert(this.qrcode_val);
this.$emit('t_qrcode',this.qrcode_val);
},
setwebcam()
{
var that=this;
var options = true;
if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
{
try{
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
if (device.kind === 'videoinput') {
if(device.label.toLowerCase().search("back") >-1)
options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ;
}
console.log(device.kind + ": " + device.label +" id = " + device.deviceId);
});
that.setwebcam2(options);
});
}
catch(e)
{
console.log(e);
}
}
else{
console.log("no navigator.mediaDevices.enumerateDevices" );
that.setwebcam2(options);
}
},
setwebcam2(options)
{
var that=this;
var fncs=this.getSucessFunc();
var success=fncs.success,
error=fncs.error;
var stype=this.stype;
function captureToCanvas(){
that.scanCode();
}
console.log(options);
this.userMediaMsg=stype;
if(stype==1)
{
setTimeout(captureToCanvas, 500);
return;
}
var n=navigator;
this.userMediaMsg="进入cam2";
if(n.mediaDevices.getUserMedia)
{
that.userMediaMsg="n.mediaDevices.getUserMedia";
n.mediaDevices.getUserMedia({video: options, audio: false}).
then(function(stream){
that.userMediaMsg="cnmdsb";
success(stream);
}).catch(function(error){
that.userMediaMsg=n.mediaDevices.getUserMedia;
error(error)
});
}
else
if(n.getUserMedia)
{
webkit=true;
that.userMediaMsg="n.getUserMedia";
n.getUserMedia({video: options, audio: false}, success, error);
}
else
if(n.webkitGetUserMedia)
{
webkit=true;
that.userMediaMsg="n.webkitGetUserMedia";
n.webkitGetUserMedia({video:options, audio: false}, success, error);
}
this.stype=1;
setTimeout(captureToCanvas, 500);
}
}
}
</script>
页:
[1]