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

最新推荐文章于 2024-09-11 14:07:35 发布

Yangjing_Li

最新推荐文章于 2024-09-11 14:07:35 发布

阅读量4.1k

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Yangjing_Li/article/details/129562034

版权

文章讲述了在前端JavaScript中唤起摄像头进行身份证识别时遇到的画面模糊问题。通过调整摄像头配置项的分辨率和HTMLvideo标签的尺寸，以及注意摄像头的长宽比例，成功解决了图像模糊的问题。最终实现了正确显示并优化了图像质量。

摘要由CSDN通过智能技术生成

前端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" } }}