本文出现单单是前端小白蜗牛公司的一个业务场景,由于之前有了解过navigator这个API,所以在公司微信产品场景上做的一次尝试。如果本文引起你任何的不适,请迅速撤离!!!
-
老板:我们需要上线一个一键公司注册,自动拍摄身份证的,你去搞个页面出来!
-
我:好的老板,使命必达(ps:心里一万头。。。路过)!!! 既然有了需求,我们就开始撸文档,撸百度,撸掘金,撸谷歌。
我们先来看效果图:
- 首先我们知道了要调起浏览器摄像头接口,需要的前置条件是什么?HTTPS!之前蜗牛买了一年的https穿透,就有这个测试咯,大家自己准备!
- 看到这里大家估计知道我们要调用的是哪个api了,就是它(navigator.mediaDevices.getUserMedia),关于兼容性问题,大家可以查看一下mdn或者想过资料对应不同浏览器的api实现。这里针对的是微信端(安卓有效) 下面先来一张文档压场(mdn大法好)!!!!
开始代码实现了,ps:微信安卓版本。(蜗牛用的是vue-cli脚手架,如果用了其他的脚手架请自行更改)
统一获取 video对象 (下面不重复)
updated() {
this.video = this.$refs.video;
this.canvas = this.$refs.cnavas; //可以把视频画一帧出来,作为预览图和上传图片
console.log("this.vidoe", this.video);
},
复制代码
目测在这个周期可以拿到值,具体看vue周期文档。
let that = this;
let constraints = { video: { facingMode: { exact: "environment" } } };
/**
后置摄像头设置,
*/
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(stream) {
that.mediaStreamTrack = stream.getTracks()[0];
/* 使用这个stream stream */
that.openVideo = true;
if (that.openVideo) { //这里是状态判断 显示页面的video标签,把流传过去。
that.$nextTick(() => {
that.video.srcObject = stream;//that.video是video标签节点,请自行获取节点,updated周期里可以拿到!
that.video.play();
});
}
})
.catch(function(err) {
/* 处理error */
console.log("error");
});
}
复制代码
注意点:1.需要Https协议。2.需要拿到video节点。3.把值传过去。
看到这里的读者肯定说,哈哈调用一个接口就搞定了,有什么可以研究的。
- 这里需要解释一些,第一兼容性,如果是其他浏览器需要去兼容mdn里面有例子。
- 第二点:除了安卓还有iphone苹果。。本来小白初入职场以为这样就解决了,老板当晚测试,凉了,老板是苹果(有矿)。继续啃咯。小白试了几个方案最后还是选择了input呼起摄像头,没办法的办法。
苹果方案出现了(万恶的if语句)
界面需要有:
<input
type="file"
id="file"
accept="image/*"
capture="camera"
style="display:none"
@change="savePic"
>
复制代码
js
let events = navigator.userAgent;
if (events.indexOf("iPhone") > -1) {
document.getElementById("file").click();
} else {
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(stream) {
that.mediaStreamTrack = stream.getTracks()[0];
/* 使用这个stream stream */
that.openVideo = true;
if (that.openVideo) {
that.$nextTick(() => {
that.video.srcObject = stream;
that.video.play();
});
}
})
.catch(function(err) {
/* 处理error */
console.log("error");
});
}
复制代码
注意点:1.需要Https协议。2.需要在页面点击时触发隐藏的input对象 3.绑定事件获取file。
最后最后,本次是蜗牛在掘金第一次写文,潜水潜了2年多,希望在这个社区能结实到一起研究前端的同学。 微信号:lmhone1024