WebRTC獲取視頻和麥克風

 

1.getUserMedia

1.1概述

navigator.getUserMedia方法目前主要用於，在瀏覽器中獲取音頻（經過麥克風）和視頻（經過攝像頭），未來能夠用於獲取任意數據流，好比光盤和傳感器。

下面的代碼用於檢查瀏覽器是否支持getUserMedia方法。

navigator.getUserMedia  = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia;

if (navigator.getUserMedia) {
    // 支持
} else {
    // 不支持
}

Chrome 21, Opera 18和Firefox 17，支持該方法。目前，IE還不支持，上面代碼中的msGetUserMedia，只是爲了確保未來的兼容。

getUserMedia方法接受三個參數。

navigator.getUserMedia({
    video: true, 
    audio: true
}, onSuccess, onError);

getUserMedia的第一個參數是一個對象，表示要獲取哪些多媒體設備，上面的代碼表示獲取攝像頭和麥克風;onSuccess是一個回調函數，在獲取多媒體設備成功時調用；onError也是一個回調函數，在取多媒體設備失敗時調用。

下面是一個例子。

var constraints = {video: true};

function onSuccess(stream) {
  var video = document.querySelector("video");
  video.src = window.URL.createObjectURL(stream);
}

function onError(error) {
  console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, onSuccess, onError);

若是網頁使用了getUserMedia方法，瀏覽器就會詢問用戶，是否贊成瀏覽器調用麥克風或攝像頭。若是用戶贊成，就調用回調函數onSuccess；若是用戶拒絕，就調用回調函數onError。

onSuccess回調函數的參數是一個數據流對象stream。stream.getAudioTracks方法和stream.getVideoTracks方法，分別返回一個數組，其成員是數據流包含的音軌和視軌（track）。使用的聲音源和攝影頭的數量，決定音軌和視軌的數量。好比，若是隻使用一個攝像頭獲取視頻，且不獲取音頻，那麼視軌的數量爲1，音軌的數量爲0。每一個音軌和視軌，有一個kind屬性，表示種類（video或者audio），和一個label屬性（好比FaceTime HD Camera (Built-in)）。

onError回調函數接受一個Error對象做爲參數。Error對象的code屬性有以下取值，說明錯誤的類型。

PERMISSION_DENIED：用戶拒絕提供信息。
NOT_SUPPORTED_ERROR：瀏覽器不支持硬件設備。
MANDATORY_UNSATISFIED_ERROR：沒法發現指定的硬件設備。

1.2範例：獲取攝像頭

下面經過getUserMedia方法，將攝像頭拍攝的圖像展現在網頁上。

首先，須要先在網頁上放置一個video元素。圖像就展現在這個元素中。

<video id="webcam"></video>

而後，用代碼獲取這個元素。

function onSuccess(stream) {
    var video = document.getElementById('webcam');
}

接着，將這個元素的src屬性綁定數據流，攝影頭拍攝的圖像就能夠顯示了。

function onSuccess(stream) {
    var video = document.getElementById('webcam');
    if (window.URL) {
	    video.src = window.URL.createObjectURL(stream);
	} else {
		video.src = stream;
	}

	video.autoplay = true; 
	// 或者 video.play();
}

if (navigator.getUserMedia) {
	navigator.getUserMedia({video:true}, onSuccess);
} else {
	document.getElementById('webcam').src = 'somevideo.mp4';
}

在Chrome和Opera中，URL.createObjectURL方法將媒體數據流（MediaStream）轉爲一個二進制對象的URL（Blob URL），該URL能夠做爲video元素的src屬性的值。 在Firefox中，媒體數據流能夠直接做爲src屬性的值。Chrome和Opera還容許getUserMedia獲取的音頻數據，直接做爲audio或者video元素的值，也就是說若是還獲取了音頻，上面代碼播放出來的視頻是有聲音的。

獲取攝像頭的主要用途之一，是讓用戶使用攝影頭爲本身拍照。Canvas API有一個ctx.drawImage(video, 0, 0)方法，能夠將視頻的一個幀轉爲canvas元素。這使得截屏變得很是容易。

<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);
      // 「image/webp」對Chrome有效，
      // 其餘瀏覽器自動降爲image/png
      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>

1.3範例：捕獲麥克風聲音

經過瀏覽器捕獲聲音，須要藉助Web Audio API。

window.AudioContext = window.AudioContext ||
                      window.webkitAudioContext;

var context = new AudioContext();

function onSuccess(stream) {
	var audioInput = context.createMediaStreamSource(stream);
	audioInput.connect(context.destination);
}

navigator.getUserMedia({audio:true}, onSuccess);

1.4捕獲的限定條件

getUserMedia方法的第一個參數，除了指定捕獲對象以外，還能夠指定一些限制條件，好比限定只能錄製高清（或者VGA標準）的視頻。

var hdConstraints = {
  video: {
    mandatory: {
      minWidth: 1280,
      minHeight: 720
    }
  }
};

navigator.getUserMedia(hdConstraints, onSuccess, onError);

var vgaConstraints = {
  video: {
    mandatory: {
      maxWidth: 640,
      maxHeight: 360
    }
  }
};

navigator.getUserMedia(vgaConstraints, onSuccess, onError);

1.5MediaStreamTrack.getSources()

若是本機有多個攝像頭/麥克風，這時就須要使用MediaStreamTrack.getSources方法指定，到底使用哪個攝像頭/麥克風。

MediaStreamTrack.getSources(function(sourceInfos) {
  var audioSource = null;
  var videoSource = null;

  for (var i = 0; i != sourceInfos.length; ++i) {
    var sourceInfo = 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, onSuccess, onError);
}

上面代碼表示，MediaStreamTrack.getSources方法的回調函數，能夠獲得一個本機的攝像頭和麥克風的列表，而後指定使用最後一個攝像頭和麥克風。