HTML5 getUserMedia API 开发指南

getUserMedia API属于 WebRTC 的一个。 浏览器支持情况:WebRTC 需要Chrome 18.0.1008+ 在 about:flags里启用. Chrome 21默认开启, Opera 12 Firefox 17 好了,多的不说,直接上代码了。需要说明的地方都写在注释里了。 demo示例: http://static.bungos.me/demos/html5_getUserMedia/

window.URL = window.URL || window.webkitURL || window.msURL || window.oURL;
// 给video的src赋值时会用到window.URL的createObjectURL方法,这里统一接口。
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video=document.querySelector('video'),permited=false;

function snapshot() {
  if (!permited) {accessLocalWebCam();return false;}
  document.querySelector('audio').play();
  var canvas=document.querySelector('canvas');
  canvas.height=video.videoHeight;
  canvas.width=video.videoWidth;
  //canvas的宽高与video原始宽高保持一致,而不是video的可见宽高,否则无法截取完整画面。
  canvas.getContext('2d').drawImage(video,0,0);
  var img=document.querySelector('#pic img') || document.createElement('img');
  img.src = canvas.toDataURL('image/png');
  // "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
  img.width=400;
  img.height=300;
  document.getElementById('pic').appendChild(img);
}

document.getElementById('camera').addEventListener('click', snapshot, false);

function successsCallback(stream) {
  permited=true;
  video.src = window.URL.createObjectURL(stream) || stream;
  //分别针对其他浏览器和firefox进行赋值操作。
}

function accessLocalWebCam() {
  try {
    navigator.getUserMedia('video', successsCallback,  function (err) {
      //也可以同时请求{audio:true, video:true}
  console.log(err);
});
  } catch (err) {
    console.log(err);
  }
}

if (!navigator.getUserMedia) {
console.log(‘不支持 getUserMedia 接口’);
} else {
document.querySelector(‘button’).addEventListener(‘click’, accessLocalWebCam, false);
}

参考文献: Capturing Audio & Video in HTML5 - HTML5 Rocks