浏览器调用摄像头与截图

使用浏览器调用摄像头

首先需要调用一个api，让用户进行授权使用音视频设备。

navigator.getUserMedia

语法

navigator.getUserMedia(constraints, successCallback, errorCallback)

返回值

undefined

参数介绍

• constraints 约束。指定向用户发出的获取授权请求将要使用到哪些媒体设备类型

  类型：obj

  示例：

  {
    audio: false, // 不使用音频
    video: { // 设置视频的分辨率
      width: 1280,
      height: 720
    }
  }
  

• successCallback 获得用户授权后执行的回调函数。拥有一个流对象参数

  类型：func

  示例：

  function(stream) {
  }
  

• errorCallback 未获得用户授权或第一项参数设置失败等执行的回调函数。拥有一个错误对象参数

  类型：func

  示例：

  function(error) {
  }
  

完整示例

<video width="1280" height="720"></video>

const video = document.querySelector('video')
navigator.getUserMedia({
  audio: false,
  video: {
    width: 1280,
    height: 720
  }
}, function(stream) {
  video.srcObject = stream
  // 视频元数据(分辨率、时长等)加载完毕，开始播放
  video.onloadedmetadata = () => video.play()
}, function(err) {
  console.log("The following error occurred: " + err.name)
})

注意

该api虽然仍可使用，但w3c已经将其废弃，并推荐使用navigator.mediaDevices.getUserMedia代替。

navigator.meidaDevices.getUserMedia

语法

navigator.meidaDevices.getUserMedia(constraints)

返回值

Promise

示例：

navigator.meidaDevices.getUserMedia(constraints)
.then(function(stream) {
    
})
.catch(function(error) {
    
})

注意

老的浏览器可能不能使用该api

读取视频流

用户授权成功后，成功的回调函数默认有一个视频流作为参数。拿到这个视频流之后，需要将其交给页面video标签，进行播放。

方法一

function(stream) {
  video.srcObject = stream
  // 视频元数据(分辨率、时长等)加载完毕，开始播放
  video.onloadedmetadata = () => video.play()
}

方法二

function(stream) {
  video.src = URL.createObjectURL(stream)
  // 视频元数据(分辨率、时长等)加载完毕，开始播放
  video.onloadedmetadata = () => video.play()
}

使用canvas实现截图

<video width="1280" height="720"></video>
<canvas width="1280" height="720" style="display:none"></canvas>
<button id="snap">截图</button>
<!-- 截图展示图片 -->
<img id="img" />

// 视频
const video = document.querySelector('video')
// 截图按钮
const snap = document.querySelector('#snap')
// 图片，展示截图
const img = document.querySelector('#img')
// 画布
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

snap.onclick = () => {
  ctx.drawImage(video, 0, 0, 400, 300)
  // 将数据转为base64赋值给img标签的src属性
  img.src = canvas.toDataURL("image/png")
}