前端js唤起摄像头,画面模糊

前端js唤起摄像头,画面模糊问题

新需求,但很常见:

手机页面唤起后置摄像头识别身份证号

首先,面向百度编程,立马得到实现逻辑:

<video autoplay class="video" with="400" height="300">video>
1.摄像头配置项
mediaOpts = {
 audio: false,
 video: { facingMode: { exact: "environment" },width: 1280, height: 720}
}
mediaStreamTrack
video
2.兼容代码
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function(constraints) {
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        if (!getUserMedia) {
            return Promise.reject(new Error('当前设备摄像头无法调用'));
        }
        return new Promise(function(resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
        });
    }
}
3.点击按钮调用方法唤起摄像头
openMedia(){
	navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(this.errorFunc);
}
4.成功后回调
success1Func(stream) {
    this.mediaStreamTrack = stream
    this.video = document.querySelector('.video')
    if ("srcObject" in this.video) {
        this.video.srcObject = stream
    } else {
        this.video.src = window.URL && window.URL.createObjectURL(stream) || stream
    }
    this.video.play()
},
5.失败回调
errorFunc(err) {
    alert('摄像头唤起失败')
}

好!完成!只需要在手机上打开看一下就手工下班!

惨不忍睹啊惨不忍睹!还下班呢,直接下岗吧

究极模糊,本来要实现的功能是用摄像头扫描身份证识别号码,所以我前端就是唤起摄像头,截取摄像头图像传给后台,后台调一个图像识别接口返回给我数据,好家伙,后台一看我给的图片都惊了,说要找领导给我买个新手机把小灵通换下来(不是,并没有)
于是我多次调整摄像头配置项,最终发现问题:

// 在配置项中要求如下配置:
video: { width: 1280, height: 720, // 分辨率配置
facingMode: { exact: "environment" }, //此处表示要求调用后置摄像头,如果没有这个配置,手机会唤起与前面要求的分辨率最为接近的摄像头
}
// html中video标签的长宽为400和300
<video autoplay class="video" with="400" height="300"></video>

聪明的我发现,配置项的分辨率与video的长宽不一致,所以在摄像头唤起后,用video标签展示图像时做了伸缩,所以导致模糊,于是我改成下面的配置:

<video autoplay class="video" with="300" height="200"></video>
mediaOpts = {audio: false,video: { width: 300, height: 200, facingMode: { exact: "environment" } }}

嗯!满意!满意!满意…满意…满…等下,为啥这图像是竖着的啊,我宽300高200啊
没错!手机的摄像头配置项长宽配置应该互换,最终结果:

<video autoplay class="video" with="300" height="200"></video>
mediaOpts = {audio: false,video: { width: 200, height: 300, facingMode: { exact: "environment" } }}

完成

你可能感兴趣的:(前端,javascript,开发语言)