h5调用手机摄像头踩坑

1. 背景

一般业务也很少接触摄像头,有也是现成的工具库扫个二维码。难得用一次,记录下踩坑。

2.调用摄像头的方法

2.1. input

html 复制代码
<!-- 调用相机 -->
<input type="file" accept="image/*" capture="camera">
<!-- 调用摄像机 -->
<input type="file" accept="video/*" capture="camcorder">
<!-- 调用录音机 -->
<input type="file" accept="audio/*" capture="microphone">

这个就不用多说了,缺点就是没办法自定义界面,它是调用的系统原生相机界面。

2.2. mediaDevices

由于我需要自定义界面,就像下面这样:

所以我选择了这个方案,这个api使用起来其实很简单:

html 复制代码
<!-- 创建一个video标签用来播放摄像头的视屏流 -->
<video id="video" autoplay="autoplay" muted width="200px" height="200px"></video>
<button onclick="getMedia()">开启摄像头</button>
js 复制代码
async getMedia() {
    // 获取设备媒体的设置,通常就video和audio
    const constraints = {  
    // video配置,具体配置可以看看mdn
        video: {  
            height: 200,  
            wdith: 200,  
        },  
    // 关闭音频
        audio: false  
    };  
    this.video = document.getElementById("video");  
    // 使用getUserMedia获取媒体流
    // 媒体流赋值给srcObject
    this.video.srcObject = await window.navigator.mediaDevices.getUserMedia(constraints);
    // 直接播放就行了
    this.video.play();  
}

可以看到这个效果。

这个api的配置可以参考MDN

js 复制代码
// 截图拍照
takePhoto() {  
    const video = document.getElementById("video");  
    // 借助canvas绘制视频的一帧
    const canvas = document.getElementById("canvas");  
    const ctx = canvas.getContext('2d');  
    ctx.drawImage(this.video, 0, 0, 300, 300);  
},
// 停止
stopMedia() {  
    // 获取媒体流
    const stream = this.video.srcObject;  
    const tracks = stream.getTracks();  
    // 停止所有轨道
    tracks.forEach(function (track) {  
        track.stop();
    })  
    this.video.srcObject = null;  
}

3.坑

如果你复制我的代码,在localhost上肯定能运行,但是你想在手机上试试的时候就会发现很多问题。

3.1. 需要https

由于浏览器的安全设置,除了localhosthttps连接,你都没办法获取到navigator.mediaDevices,打印出来是undefined。如果要在手机上测试,你要么用内网穿透代理一个https,要么部署在https域名的服务器上测试。

3.2. 设置前后摄像头

默认是使用user设备,也就是前摄像头,想要使用后摄像头也是有配置的,

js 复制代码
async getMedia() {
    // ...
    let constraints = {  
        video: {  
            height: 200,  
            wdith: 200,  
            // environment设备就是后置
            facingMode: { exact: "environment" },  
        },  
        audio: false  
    };
    // ...
}

3.3. 设置显示区域大小

我的需求是铺满整个设备,所以我想当然的直接把video样式宽高设置成容器大小:

css 复制代码
#video {
    width: 100%;
    height: 100%;
}
js 复制代码
async getMedia() {
    // ....
    // 将宽高设置成容器大小
    const pageSize = document.querySelector('.page').getBoundingClientRect()  
    let constraints = {  
    video: {  
            height: pageSize.height,  
            width: pageSize.width,  
            facingMode: { exact: "environment" },
        },  
        audio: false  
    };
    //....
}

发现这个视频横着而且没有铺满屏幕。

通过输出video的信息可以看到,设备返回的视频流宽高是反的:

所以配置换一下就行了:

js 复制代码
    let constraints = {  
        video: {  
            height: pageSize.width,  
            width: pageSize.height,  
        },  
    };
相关推荐
Bellafu6662 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird5 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者6 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强6 小时前
Chrome和IE获取本机ip地址
前端
天***88966 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*6 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls7 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友7 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵7 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机8 小时前
Promise 常见面试题(持续更新中)
前端·javascript