HTML5 浏览器中打开摄像头

本文是讲述如何在浏览器中打开摄像头，并且实时显示在页面上。想要实现这一功能，需要依赖WebRTC (Web Real-Time Communications) 这一实时通讯技术，它允许浏览器之间视频流和音频流或者其他任意数据的传输，当然其中包含了大量的API和协议，这些在这里都不做介绍，具体的标准还在完善之中，所以使用的方法有时候也需要考虑到兼容问题，那么回到主题，怎样使用webRTC获取视频流。

　　首先对于html，我们需要一个video标签来播放视频（JS中添加也可以），当然画布也是能够实现的。使用video有些属性必须要配置。

<video id="video" autoplay playsinline></video>

 

　　上面两个属性必须要添加，autoplay设置video自动播放，否则通信成功后页面将会保留第一张静止的画面。playsinline是由于有些浏览器默认会开启全屏播放，而全屏可能是画面变成黑屏。

　　webRTC大部分浏览器支持，IE(Edge)15+， Safari 11+， IOS Safari 11.2+, Android 64+,  QQ、百度部分支持，对于IOS必须系统在11以上，并且只有Safari支持，UC 浏览器不支持。

　　对于webRTC支持情况，可以采用以下代码判断。

 

if (navigator.mediaDevices === undefined ||
  navigator.mediaDevices.enumerateDevices === undefined ||
  navigator.mediaDevices.getUserMedia === undefined) {
  if (navigator.mediaDevices === undefined) {
    var fctName = 'navigator.mediaDevices'
  } else if (navigator.mediaDevices.enumerateDevices === undefined) {
    var fctName = 'navigator.mediaDevices.enumerateDevices'
  } else if (navigator.mediaDevices.getUserMedia === undefined) {
    var fctName = 'navigator.mediaDevices.getUserMedia'
  } else {
    console.assert(false)
  }
  alert('WebRTC issue-! ' + fctName + ' not present in your browser')
}

　　获取video元素。

let video = document.querySelector('#video');

 

　　如果支持webRTC，那么就调用mediaDevice的方法来遍历媒体对象，该方法返回一个promise对象，在第一个then方法的回调函数里面默认接收返回的媒体信息。

navigator.mediaDevices.enumerateDevices().then(function (sourceInfos) {
})

 

　　获取sourceInfos，要拿到后置摄像头的信息并不是通用的，PC、IOS、Android以及不同浏览器，处理方法都不同，这里只做IOS和Android区分。

if(!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
}

　　如果不是IOS，那么就需要遍历sourceinfos，获取后置摄像头再获取视频流。声明一个exArray用来存放不同媒体设备的id，再通过id获取摄像头信息。

let exArray = []; for (var i = 0; i < sourceInfos.length; ++i) { if (sourceInfos[i].kind == 'videoinput') { exArray.push(sourceInfos[i].deviceId); } }

　　这样数组里面存放的都是摄像头的id，而我们需要的是后置摄像头，再调用获取媒体信息的方法。

if (navigator.getUserMedia) {
  // 该方法可以传递3个参数，分别为获取媒体信息的配置，成功的回调函数和失败的回调函数
  navigator.getUserMedia({
    audio: false, // 表明是否获取音频
    video: {  // 对视频信息进行配置
      optional: [{
        'sourceId': exArray[1] // 下标为0是前置摄像头，1为后置摄像头，所以PC不能进入该判断，否则画面会保持在第一帧不动
      }]
    },
  }, function successFunc(stream) {
    // 对FireFox进行兼容，这里对返回流数据的处理不同
    if (video.mozSrcObject !== undefined) {
      //Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持  
      video.mozSrcObject = stream;
    } else {
      // 一般的浏览器需要使用createObjectURL对流数据进行处理，再交给video元素的src
      video.src = window.URL && window.URL.createObjectURL(stream) || stream;
    }
  }, function errorFunc(e) {
    alert('Error！' + e);
  }); //success是获取成功的回调函数  
} else {
  alert('Native device media streaming (getUserMedia) not supported in this browser.');
}

　　在成功的回调函数中，将返回的视频流交给html中的video元素，这里src的方式实际是通过blob64的格式来传输的。

　　// =============================  IOS

　　在IOS中获取视频流现实的方式又不一样了，我们需要调用mediaDevice的获取媒体的方法，这也是最新的标准。首先需要些小小的配置：

// 这里对生成视频进行配置
var userMediaConstraints = {
  audio: false, // 是否获取音频
  video: {
    facingMode: 'environment',  // 环境表示后置摄像头，使用user表示采用前置
    // 宽高的配置比较灵活，由于video一般都会显示固定宽高比，所以使用ideal理想值即可
    width: {
      ideal: 1024,
      // min: 1024,
      // max: 1920
    },
    height: {
      ideal: 768,
      // min: 776,
      // max: 1080
    }
  }
}

　　再调用方法获取视频就很简单了，如下：

navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
  video.srcObject = stream;
}).catch(function (error) {
  alert(error.name + error.message)
});

 

　　整体如下：

按 Ctrl+C 复制代码

 

按 Ctrl+C 复制代码

 

　　最后提供一个将视频全屏显示的方法，对于PC和要求不高的手机已经可以实现全屏

* {
    margin: 0;
}
body {
   overflow: hidden;
}
#video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

　　在手机上，这个还有一点点横向滚动条，要想完全去掉，需要改动html，让video自动适用全屏的div

　　html

<div id="wrapper">
  <video id="video" autoplay playsinline></video>
</div>

 

　　css

* {
  margin: 0;
}

#wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}