html5以新媒体方式调起摄像头

title: html5调起摄像头拍照
date: 2019-03-29 14:19:23
tags: html5

// html部分
<video id="video" width="480" height="320" controls></video>
<div>
  <button id="capture">拍照</button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>


let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
  if (navigator.mediaDevices.getUserMedia) {
    //最新的标准API
    navigator.mediaDevices
      .getUserMedia(constraints)
      .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);
  }
}

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);      
})