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

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

image.png


前言小叙



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 做测试啦~

image.png


兼容情况


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

caniuse.com/?search=Get…

image.png


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

在线测试地址: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…

image.png


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


要点小结


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


总结


  • 对比于 WebRTC 方案和 capture 方案
WebRTC capture
PC 支持 PC 不支持
移动端兼容性混乱 移动端兼容性较优
可自定义视频分辨率/窗口大小等(直播流) 无法自定义(本地全屏录制)
代码实现复杂 代码实现简单


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

本瓜相信 H5 一定将会有更多更好的能力!


相关文章
|
移动开发 前端开发
前端(十八):移动端H5调用摄像头拍照旋转解决方案
移动端H5调用摄像头拍照旋转解决方案
352 0
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
117 4
|
6月前
|
JavaScript 前端开发
技术好文共享:移动端事件(二)——移动端滑屏切换的幻灯片
技术好文共享:移动端事件(二)——移动端滑屏切换的幻灯片
25 0
|
7月前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
94 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
7月前
|
并行计算 Linux 异构计算
分享一款刚开源上线3天的音乐人声分离工具!无需联网!页面化操作!
分享一款刚开源上线3天的音乐人声分离工具!无需联网!页面化操作!
104 1
|
7月前
|
Linux C++ iOS开发
VLC源码解析:视频播放速度控制背后的技术
VLC源码解析:视频播放速度控制背后的技术
601 0
|
7月前
|
Web App开发 移动开发 JavaScript
移动端实现拍照功能——两种方法
移动端实现拍照功能——两种方法
|
7月前
|
vr&ar C# 图形学
【Unity 3D】VR飞机动态拆装及引擎开关控制案例(附源码和演示视频 超详细)
【Unity 3D】VR飞机动态拆装及引擎开关控制案例(附源码和演示视频 超详细)
116 0
|
Web App开发 移动开发 JavaScript
移动端H5实现拍照功能的两种方法
移动端H5实现拍照功能的两种方法
679 1
|
机器学习/深度学习 人工智能 文字识别
从地图到手机通讯到ChatGPT,你想要的免费 API 都给你整理好了
在今天的科技世界中,API(Application Programming Interface)已经成为现代应用程序不可或缺的一部分。它们提供了许多强大的功能,让开发人员可以轻松地集成其他应用程序的功能,从而快速构建出色的应用程序。
256 0
从地图到手机通讯到ChatGPT,你想要的免费 API 都给你整理好了