[译] 用HTML5捕获音频和视频

原文地址：http://www.html5rocks.com/en/tutorials/getusermedia/intro/

概述

有了HTML5，我们就可以在不借助Flash或者Silverlight的情况下完成这项工作了。

HTML5能够使我们访问设备的硬件，比如GPS,WebGL等等。

这篇文章，我们就来看看一个新的API——navigator.getUserMedia()，她允许网页应用去访问用户的摄像机和麦克风。

getUserMedia之路

第一阶段：HTML Media Capture

当我们设置<input type="file">标签，并设置此标签的accept属性，她就可以正常的工作了。

<input type="file" accept="image/*;capture=camera"> <!--拍照-->

<input type="file" accept="video/*;capture=camcorder"> <!--摄像-->

<input type="file" accept="audio/*;capture=micophone"> <!--录音-->

这个"API"的短板之处在于她做实时处理的能力比较弱，比如用canvas来渲染和应用于WebGL.

HTML Media Capture只允许你去及时的记录视频和拍照。

第二阶段：device element

很多人认为HTML Media Capture太有局限性了，所以一个强大的支持所有设备的元素出现了。好不惊奇的，她的名字就是<device>，她就是getUserMedia要处理的对象。

Opera、WhatWG、Microsoft等都相继实现此元素与API。

<device>看起来如下：

<device type="media" onchange="update(this.data)"></device>

<video autoplay></video>

<script>

    function update(stream){

        document.querySelector('video').src = stream.url;

    }

</script>

不幸的是，没有发布的浏览器支持此标签。

尽管如此她还是有两个好处的：

1. 语义化
2. 高扩展性不仅仅是audio/video.

第三阶段：WebRTC

<device>最终还是流产了。

多亏了WebRTC才让需找合适的API的步伐得意继续。

现在的getUserMedia()就是参考的WebRTC，因为这是通往一套API的桥梁。她提供了访问用户本地摄像机和麦克风的能力。

正式开始

特性检查

在使用之前我们应该检查一下我们的设备是否支持此方法。

function hasGetUserMedia(){

    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||

              navigator.mozGetUserMedia || navigator.msGetUserMedia);

}

if(hasGetUserMedia()){

    alert('Good to go!');

}else{

    alert('Not supported!');

}

获得访问设备的权限

我们应当发送允许我们使用设备的请求。getUserMedia的第一个参数是一个对象，保存的是我们想要请求的设备。例如，如果我们想用摄像机和麦克风，第一个参数就是{video: true, audio: ture};

<video autoplay></video>

<script>

    var errorCallback = function(e){

        console.log('Reeeejected!');

    };

    navigator.getUserMedia = navigator.getUserMedia ||

                             navigator.webkitGetUserMedia ||

                             navigator.mozGetUserMedia ||

                             navigator.msGetUserMedia;

    if(!!navigator.getUserMedia){ //good to go

        console.log('Not Suppoted!');

        navigator.getUserMedia({video: true, audio: ture}, function(localMediaStream){

            var video = document.querySelector('video');

            video.src = window.URL.createObjectURL(localMediaStream);



            video.onloadedmetadata = function(e){

                //Do some stuff

            };

        }, errorCallback);

    }

</script>

定制media

getUserMedia的第一个参数也可以被用实现高清等。

var hdConstraints = {

    video: {

        minWidth: 1280,

        minHeight: 720

    }

}

navigator.getUserMedia(hdConstraints, successCallback, errorCallback);



var vgaConstraints = {

    video: {

        mandatory: {

            maxWidth: 640,

            maxHeight: 360

        }

    }

}

navigator.getUserMedia(vgaConstraints, successCallback, errorCallback);

选择媒体源

在Chrome 30之后，我们可以使用MediaStreamTrack.getSources() API来选择video/audio的源。

MediaStreamTrack.getSources(function(sourceInfos){

    var audioSource = null;

    var videoSource = null;



    for(var i=0; i!=sourceInfos.length; ++i){

        var souceInfo = sourceInfos[i];

        if(sourceInfo.kind === 'audio'){

            console.log(sourceInfo.id, sourceInfo.label || 'microphone');

            audioSource = sourceInfo.id;

        }else if(sourceInfo.kind === 'video'){

            console.log(sourceInfo.id, sourceInfo.label || 'camera');

            videoSource = sourceInfo.id;

        }else{

            console.log('Some other kind of source: ', sourceInfo);

        }

    }

    sourceSelected(audioSource, videoSource);

});

function sourceSelected(audioSource, videoSource){

    var constraints = {

        audio: {

            optional: [{sourceId: audioSource}]

        },

        video: {

            optional: [{sourceId: videoSource}]

        }

    };

    navigator.getUserMedia(constraints, successCallback, errorCallback);

}

安全

当我们调用getUserMedia()时，浏览器会弹出一个对话框来让用户决定接下怎么做，不幸的是，当我们的应用使用的是https时，这将会被拒绝。

后备方法

对用不支持getUserMedia的用户来说，我们可以指定一个存在的video或者抛出错误提示。

function fallback(e){

    video.src = 'fallbackvideo.webm';

}

function success(stream){

    video.src = window.URL.createObjectURL(stream);

}



if(!navigator.getUserMedia){

    fallback();

}else{

    navigator.getUserMedia({video: true}, success, fallback);

}

 

屏幕截图

我们可以使用<canvas>捕获<video>的某一帧，这样就可以实现截图了。

<video autoplay></video>

<img src="">

<canvas style="display:none;"></canvas>

<script>

var video = document.querySelector('video');

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');

var localMediaStream = null;



function snapshot(){

    if(localMediaStream){

        ctx.drawImage(video, 0, 0);

        document.querySelector('img').src = canvas.toDataURL('image/webp');

    }

}



video.addEventListener('click', snapshot, false);



navigator.getUserMedia({video: true}, function(stream){

    video.src = window.URL.createObjectURL(stream);

    localMediaStream = stream;

}, errorCallback);

</script> 

应用样式

使用css过滤器

<style>

video {

  width: 307px;

  height: 250px;

  background: rgba(255,255,255,0.5);

  border: 1px solid #ccc;

}

.grayscale {

  +filter: grayscale(1);

}

.sepia {

  +filter: sepia(1);

}

.blur {

  +filter: blur(3px);

}

...

</style>



<video autoplay></video>



<script>

var idx = 0;

var filters = ['grayscale', 'sepia', 'blur', 'brightness',

               'contrast', 'hue-rotate', 'hue-rotate2',

               'hue-rotate3', 'saturate', 'invert', ''];



function changeFilter(e) {

  var el = e.target;

  el.className = '';

  var effect = filters[idx++ % filters.length]; // loop through filters.

  if (effect) {

    el.classList.add(effect);

  }

}



document.querySelector('video').addEventListener(

    'click', changeFilter, false);

</script>

WebGL纹理

有兴趣的可以参考http://learningthreejs.com/blog/2012/02/07/live-video-in-webgl/ 这篇文章。

使用Audio API

window.AudioContext = window.AudioContext ||

                      window.webkitAudioContext;



var context = new AudioContext();



navigator.getUserMedia({audio: true}, function(stream) {

  var microphone = context.createMediaStreamSource(stream);

  var filter = context.createBiquadFilter();



  // microphone -> filter -> destination.

  microphone.connect(filter);

  filter.connect(context.destination);

}, errorCallback);