H5调用相机进行拍照及切换摄像头及踩坑记录

使用案例：

<div class="ocr-camera" v-show="showCamera"><div class="camera-head"><span>{{ faceType }}人脸识别</span></div><div class="camera" id="camera"><video style="width: 100%; height: 100%; object-fit: cover" id="video" autoplay="autoplay" playsinline></video><div class="mask-view"><div>请将正脸移入框内</div></div></div><div class="camera-button"><span style="font-size: 15px" @click="cancel">取消</span><svg class="icon" aria-hidden="true" style="height: 65px; width: 65px" @click="takePicture"><use xlink:href="#icon-paizhao-copy"></use></svg><svg class="icon" aria-hidden="true" style="height: 40px; width: 40px" @click="switchCamera"><use xlink:href="#icon-qiehuanshexiangtou-copy"></use></svg></div><!--描绘video截图--><canvas v-show="showPicture" id="canvas" width="300" height="300" style="position: fixed; left: 10000px"></canvas>
</div>
//mounted中this.video = document.getElementById("video");this.canvas = document.getElementById("canvas");this.context = this.canvas.getContext("2d");
// 老的浏览器可能根本没有实现 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"));}// 否则，为老的navigator.getUserMedia方法包裹一个Promisereturn new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});};}

//methods中：//开始拍照checkFace(typeName,type,index) {//默认使用前摄像头，强制使用后置摄像头如下设置// let constraints = {video: { facingMode: { exact: "environment" } }};if (this.stream) {this.stream.getTracks().forEach((track) => {track.stop();});}let constraints = { video: { facingMode: "user" } };navigator.mediaDevices.getUserMedia(constraints).then((stream) => {this.stream = stream;// 旧的浏览器可能没有srcObjectif ("srcObject" in this.video) {this.video.srcObject = stream;this.video.setAttribute('playsinline', true)this.video.play()} else {// 防止在新的浏览器里使用它，应为它已经不再支持了this.video.src = window.URL.createObjectURL(stream);this.video.setAttribute('playsinline', true)this.video.play()}this.video.onloadedmetadata = (e) => {this.video.play();};}).catch(function (err) {console.log(err.name + ": " + err.message);});this.showCamera = true;},//切换前后置switchCamera() {let constraints = { video: { facingMode: "user" } };if (this.isFrontCamera) {constraints = {video: {facingMode: { exact: "environment" },},};}if (this.stream) {this.stream.getTracks().forEach((track) => {track.stop();});}navigator.mediaDevices.getUserMedia(constraints).then((stream) => {this.stream = stream;this.isFrontCamera = !this.isFrontCamera;// 旧的浏览器可能没有srcObjectif ("srcObject" in this.video) {this.video.srcObject = stream;this.video.setAttribute('playsinline', true)this.video.play()} else {// 防止在新的浏览器里使用它，应为它已经不再支持了this.video.src = window.URL.createObjectURL(stream);this.video.setAttribute('playsinline', true)this.video.play()}this.video.onloadedmetadata = (e) => {this.video.play();};}).catch(function (err) {alert(err.name + ": " + err.message);console.log(err.name + ": " + err.message);});},takePicture() {//点击拍摄按钮，并生成照片文件console.log(this.video.videoWidth, this.video.videoHeight);this.canvas.width = this.video.videoWidth;this.canvas.height = this.video.videoHeight;//绘制画面this.context.drawImage(this.video,0,0,this.canvas.width,this.canvas.height);// canvas 转图片，再base64转流let blob = baseTofile(this.canvas.toDataURL("image/png"));function blobtoFile({ type } = blob) {console.log(type, "type");return new File([blob], "人脸照片文件", { type });}this.showCamera = false;this.showDialog = true;//上传结果，掉接口识别，等待结果返回后，去掉弹框this.idNamePhotoCheck(blobtoFile(blob))},

踩坑记录1：
在浏览器中调用是正常的，但是在ios系统的微信内置浏览器中调用时，摄像头就唤醒不成功，原因：ios不会自动播放video

解决方案：
添加如下代码即可

//这个属性是ios微信浏览器设置可以让视频在小窗口内播放，也就是不是全屏播放
this.video.setAttribute('playsinline', true)
//播放
this.video.play()

踩坑记录2：
当在A页面调用相机前置摄像头拍照后，通过路由跳转至B页面，此时再次调用相机后置摄像头黑屏或失败，原因：当前设备被占用

解决方案：
在A页面销毁时，如果相机设备被占用，就将它释放掉
在每次调用相机前，先关闭相机设备

destroyed(){if (this.stream) {this.stream.getTracks().forEach((track) => {track.stop();});}},

H5调用相机进行拍照及切换摄像头及踩坑记录相关推荐

乐视体感摄像头开发踩坑记录
乐视三合一体感相机开发踩坑记录第一次用Cmake,以下如有错误请大佬指正开发环境: Linux ARM(树莓派4) AstraSDK-v2.1.3 Arm/Arm64(https://orbbec ...
小程序web-view嵌套H5对AR特效canvas用MediaRecorder录屏踩坑记录
没有iPhone手机,都是找别人测和云真机,但云真机调ar也不方便,微信也难登,真的很难搞. AR场景下,在播放视频或音频前,一般只有一次点击按钮的机会,然后就是一段用户拍摄目标的空窗期,因此必须在用 ...
python控制相机自动拍照_微信小程序实现倒计时调用相机自动拍照功能
这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下在某 ...
php安卓浏览器调用相机拍照,浏览器调用相机进行拍照
需求浏览器调用相机进行拍照代码 mediaDevices.getUserMedia() 目前,浏览器已经提供了一种API能够直接访问用户的媒体设备(摄像头.麦克风),这就使得浏览器能够直接捕获到来 ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
【踩坑记录】仿真环境使用小车进行Cartographer 3D Slam（深度摄像头）
[运行背景] ROS1 20.04 noetic 安装cartographer请看: [安装学习]安装Cartographer ROS(noetic)_Howe_xixi的博客-CSDN博客网上使用n ...
ZED2代相机+nvidia jetson AGX xavier踩坑记录
ZED2代相机+nvidia jetson AGX xavier踩坑记录项目描述 nvidia jetson AGX xavier就不详细介绍了,jetson系列嵌入式开发板比一般的arrch64开 ...
【踩坑记录】实体机器人运行Cartographer 3D Slam(深度摄像头)--未解决
[运行背景] ROS1.0 20.04 noetic 机器人:NXRobo SPARK-T 安装cartographer请看: [安装学习]安装Cartographer ROS(noetic)_Ho ...
android 打开相机拍照功能吗,Android调用相机实现拍照功能
引言在Android开发中相信大家都会遇到修改用户头像的问题,用户信息常常包含用户头像,一般流程为:默认头像-->用户修改(拍照/相册选择)-->保存头像图片. 本期我们就来实现调用系统 ...
H5调用相机，裁剪，压缩照片
最近项目中遇到拍照,预览上传的问题,苹果手机不兼容,拍照旋转90度,在网上查找出好多方法,都无效,最后用input调用相机,然后用canvas画布裁剪照片,压缩保存,代码如下. <!DOCTYP ...

H5调用相机进行拍照及切换摄像头及踩坑记录

H5调用相机进行拍照及切换摄像头及踩坑记录相关推荐

最新文章

热门文章