html调用摄像头

司项目需要调用摄像头，看了一下html5文档，主要是使用html5的getUserMedia()API，写一个例子来记录具体的使用方法。

<html>
<body>
<!-- 用于展示摄像头视频流 -->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<div>
 <button id="capture" onclick="handleClickCapture()">拍照</button>
</div>

<!-- 展示拍摄的照片 -->
<canvas id="canvas" width="480" height="320"></canvas>

<script>
 var video = document.getElementById('video');
 var capture = document.getElementById('capture');
 var ctx = document.getElementById('canvas').getContext('2d');

 /**
 * 调用用户媒体设备
 * @param constraints 配置信息
 * @param success 成功回调函数
 * @param error 失败回调函数
 */
 function getUserMediaToPhoto(constraints,success,error) {
 if(navigator.mediaDevices.getUserMedia){
 navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
 }else if (navigator.webkitGetUserMedia) {
 navigator.webkitGetUserMedia(constraints,success,error);
 }else if(navigator.mozGetUserMedia){
 navigator.mozGetUserMedia(constraints,success,error);
 }else if(navigator.getUserMedia){
 navigator.getUserMedia(constraints,success,error);
 }
 }

 /**
 * 成功回调函数
 * @param stream 视频流
 */
 function success(stream){
 var CompatibleURL = window.URL || window.webkitURL;
 try {
 video.src = CompatibleURL.createObjectURL(stream);
 } catch (e) {
 video.srcObject = stream;
 }
 video.play();
 }

 /**
 * 失败回调
 * @param error 错误对象
 */
 function error(error) {
 console.log('无法访问媒体设备', error);
 }

 if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
 getUserMediaToPhoto({video:{width:480,height:320}},success,error);
 }else{
 alert('不支持访问用户媒体设备');
 }

 /**
 * 拍照按钮点击事件
 */
 function handleClickCapture() {
 ctx.drawImage(video,0,0,480,320);
 }
</script>
</body>
</html>

实现了基本的摄像头调用和拍照，实现思路非常简单，基本上只是在调用api，唯一恶心的地方在于api版本比较多，不得不多做一些判断。具体的api介绍、使用和参数可以查看MediaDevices.getUserMedia()。

自网络

这是大家在做信息类网站的时候经常要用到的一个功能：

理想情况下我们应该先判断你的设备上是否有摄像头或相机，但简单起见，我们在这里直接写出了HTML标记，而不是用JavaScript先判断然后动态生成这些标记

</body>

</html>

$( function() {

try { document.createElement("canvas").getContext("2d"); } catch (e) { alert("not support canvas!") }

var video = document.getElementById("video"),

canvas = document.getElementById("canvas"),

context = canvas.getContext("2d");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (navigator.getUserMedia)

navigator.getUserMedia(

{ "video": true },

function (stream) {

if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;

else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;

video.play();

function (error) {

alert("Video capture error: " + error.code);

}

);

else alert("Native device media streaming (getUserMedia) not supported in this browser");

document.getElementById("snap").addEventListener("click", function() {

/*context.drawImage(video, 0, 0, 640, 480);//照片大小*/

context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight)

}, false);

言小叙

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 的兼容情况

https://caniuse.com/?search=GetUserMedia

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

在线测试地址：https://tuaran.site/static/webrtc.html

贴下关键代码

<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" />

兼容情况

https://caniuse.com/?search=capture

同样把代码放到了线上，在线测试地址 https://tuaran.site/static/capture.html

要点小结

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

总结

对比于 WebRTC 方案和 capture 方案

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

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

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

我是掘金安东尼：一名人气前端技术博主（文章 100w+ 阅读量）
终身写作者（INFP 写作人格）
坚持与热爱（简书打卡 1000 日）
我能陪你一起度过漫长技术岁月吗（以梦为马）
觉得不错，给个三连吧（这是我最大的动力） b(￣▽￣)d

在线咨询

上一篇：9个鼠标悬停图片遮罩，高亮动画特效，html页面源码
下一篇：jQuery 添加和删除HTML元素

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html调用摄像头

言小叙

一、 WebRTC

核心API

兼容情况

要点小结

第三方库

二、 capture

核心代码

兼容情况

要点小结

总结

您的项目需求