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

2024-03-21 04:54| 来源: 网络整理| 查看: 265

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

新需求，但很常见：

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

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

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的长宽不一致，所以在摄像头唤起后，用video标签展示图像时做了伸缩，所以导致模糊，于是我改成下面的配置：

mediaOpts = {audio: false,video: { width: 300, height: 200, facingMode: { exact: "environment" } }}

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

mediaOpts = {audio: false,video: { width: 200, height: 300, facingMode: { exact: "environment" } }} 完成

【本文地址】

公司简介

联系我们