首页/文章/移动端web

探秘移动端网页调用摄像头的两种方式

2024-03-12

1284 字约 5 分钟

...

学习

简介： PC 端网页调用摄像头的场景想必大家并不陌生，打开一个网址，开启摄像头开始笔试/视频聊天/直播等。而在移动端网页调用摄像头的场景你见得多吗？我想答案应该是不多吧（在下见识浅薄）。

前言小叙

PC 端网页调用摄像头的场景想必大家并不陌生，打开一个网址，开启摄像头开始笔试/视频聊天/直播等。

而在移动端网页调用摄像头的场景你见得多吗？我想答案应该是不多吧（在下见识浅薄）。

H5 相较于native app 一直被诟病的就有调用手机原生能力差这一点。

但需求总是会突如其来，做与不做？

其实，做与不做都不应该影响你去贮备相关知识、做较为充分的调研。市面上类似的技术实现不多，不代表不能做。真的不能做，也至少得知道原因吧？

也许在你探寻的过程中，就会有不一样的发现。

点赞美三代👍评论富一生🤞

一、 WebRTC

方案一就是 webRTC，也正是 PC 端的实现方案。

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。 —— MDN-WebRTC_API

核心API

核心的API为：navigator.mediaDevices.getUserMedia

特注：这里还有一个旧有的 API Navigator.getUserMedia 已经被废弃掉了，注意区分，别再用旧 API 做测试啦~

兼容情况

Can I Use：看一下这个 API 的兼容情况

caniuse.com/?search=Get…

本瓜结合网上代码，小做修改，放到了线上。

在线测试地址：tuaran.site/static/webr…

贴下关键代码

<body>  <div>H5调前置摄像头DEMO</div> <video id="video" width="480" height="320" muted controls  autoplay="autoplay"> </video> <div> <button id="capture">拍照</button> </div> <canvas id="canvas" width="480" height="320"></canvas> <script> //访问用户媒体设备的兼容方法 function getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { //最新的标准API navigator.mediaDevices.getUserMedia({ 'audio':{ echoCancellation: false }, 'video':{ 'facingMode': "user" }//调用前置摄像头，后置摄像头使用video: { facingMode: { exact: "environment" } } }) .then(success) .catch(error) } else if (navigator.webkitGetUserMedia) { //webkit核心浏览器 navigator.webkitGetUserMedia(constraints, success, error) } else if (navigator.mozGetUserMedia) { //firfox浏览器 navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { //旧版API navigator.getUserMedia(constraints, success, error); } } let video = document.getElementById('video'); let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); function success(stream) { //兼容webkit核心浏览器 let CompatibleURL = window.URL || window.webkitURL; //将视频流设置为video元素的源 console.log(stream); //video.src = CompatibleURL.createObjectURL(stream); video.srcObject = stream; video.play(); } function error(error) { console.log(`访问用户媒体设备失败${error.name}, ${error.message}`); } if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { //调用用户媒体设备, 访问摄像头 getUserMedia({ video: { width: 480, height: 320 } }, success, error); } else { alert('不支持访问用户媒体'); } document.getElementById('capture').addEventListener('click', function () { context.drawImage(video, 0, 0, 480, 320); }) </script> </body>

用 video 播放视频，如果想要实现截屏，则用 canvas 进行绘制。

要点小结

从上图和实践中可以得出，WebRTC调起摄像头的方案 PC 端支持良好，但移动端浏览器支持不一。国内的安卓机自置浏览器大部分为低版本的 chrome 内核分支，加壳嵌套，更新缓慢。iOS 对于 Vedio 标签属性的兼容也不尽如人意。

第三方库

这里安利一个第三方库 tracking.js

它上面有关于 face_camera 的 demo 正用的此解决方案。

二、 capture

核心代码

调用前置摄像头代码实现：

<input class="phone_input" type="file" accept="video/* capture="user" />

兼容情况

caniuse.com/?search=cap…

同样把代码放到了线上，在线测试地址 tuaran.site/static/capt…

要点小结

PC 不支持，iOS 支持良好，少部分 Android 机存在兼容差异（部分8.0以上安卓机无法调起前置，会调起后置）。

总结

对比于 WebRTC 方案和 capture 方案

综上：在移动端网页调起摄像头，WebRTC 方案兼容性较差，但可自定义程度很高，可操作视频流、设定分辨率、调整窗口大小等，实现近似 app 调用摄像头的效果，但相应的实现难度就高、兼容也相对复杂；而 capture 方案兼容性较好，但只是调用原生的相机进行一段视频录制，可自定义程度不高。如果视频过大，压缩等也将是一个问题。如何平衡二者？可以在兼容的情况下使用前者，不兼容的情况下使用后者，浏览器才是最终的答案。

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

更多文章 →

移动端web2024-09-04

H5 实现拍照选景框效果利用

背景在实际项目中，遇到了需要唤起手机摄像头拍照的需求，最开始是通过的方式，可以直接唤起手机相机，但是用户拍照的方向各式各样，导致后续业务处理时，没有达到预期的效果。基于此，产品同学期望能在用户拍照时给用户一个引导框（也就是平时我们在用第三方证件拍照时的取景框效果）。经过讨论，给出了两种解决方案，一种是通过我们自研，先尝试看一下效果，第二种是使用第三方的 SDK，仅使用他们的拍照功能。本文档仅涉及第一种，即通过我们自研的方式，实现...

学习

移动端web2024-09-04

封装一个H5照相机组件（放大缩小、连拍、预览、手电筒，横竖屏拍摄）

项目上有个需求就是说移动端网页中的照相机要支持连拍功能。要知道咱们一般网页中通过input标签调用出来的照相机都是拍完后需要进行点击确认操作，然后再重新点击拍照按钮调起照相机如此往复，这样的交互方式对于需要快速拍摄照片的场景来说效率确实太低了。如果本机摄像头无法进行连拍操作的话只能通过直接调用媒体摄像头的方式看看能否实现，考虑到开源的组件UI和交互方式可能无法满足项目需要且也不太好扩展功能所以觉得自己封装一个。使用到的技术 Nav...

学习

移动端web2024-09-03