getUserMedia API的兩個使用案例

以前在微博看到了@HeeroLaw的文章《經過WebRTC獲取攝像頭影像》，瞭解到了getUserMedia這個API，以爲挺有意思的，因而親自試驗了一番，作了倆簡單的小DEMO。

---

getUserMedia簡介

在@HeeroLaw的文章中，介紹的是navigator.getUserMedia這個API，然而我在MDN上查到的是這個API已經被廢棄了，取而代之的是MediaDevices.getUserMedia。

mediaDevices也是掛在navigator對象下面的，調用方法以下：

navigator.mediaDevices.getUserMedia(myConstraints).then(function(mediaStream) {
  /* use the stream */
}).catch(function(err) {
  /* handle the error */
});

其中myConstraints參數是一個對象，能夠指定須要調用的外部媒體設備，目前只有攝像頭和麥克風:

// 同時啓用麥克風和攝像頭
var myConstraints = { audio: true, video: true }

更爲詳細的參數介紹，例如視頻尺寸以及攝像頭和幀率等，請參見MediaDevices.getUserMedia()參數

須要注意的是，getUserMedia不支持在非安全的頁面內調用，須要https支持，在開發階段則須要使用localhost域來，分別訪問百度和新浪微博而後打開控制檯輸入下面的代碼進行測試:

navigator.mediaDevices.getUserMedia({video:true}).then((stream) => console.log(Object.prototype.toString.call(stream))).catch(error => {console.error(error)})

另外同一域名下首次調用此API須要徵求用戶贊成。

攝像頭案例

建立一個video標籤

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

調用getUserMedia將數據顯示到video標籤

var video = document.querySelector('#video')
var myConstraints = {
  video: {
    facingMode: 'user' // 優先調用前置攝像頭
  }
}
navigator.mediaDevices.getUserMedia(myConstraints).then((stream) => {
  // createObjectURL是個很是有用的API，諸位能夠多研究研究
  video.src = window.URL.createObjectURL(stream)
  video.play()
}, (error) => {
  console.error(error.name || error)
})

查看在線DEMO

麥克風案例

由於純粹用一個audio標籤來播放麥克風拾取到的聲音顯得太沒特點了，因而我用到了之前寫的一個音頻可視化庫Vudio.js，代碼以下:

建立一個canvas來顯示音頻波形圖

<canvas id="canvas"></canvas>

經過Vudio.js和getUserMedia來顯示麥克風拾取到的音頻的波形

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

navigator.mediaDevices.getUserMedia({
 audio: true
}).then((stream) => {

  // 調用Vudio
  var vudio = new Vudio(stream, canvas, {
    accuracy: 256,
    width: 1024,
    height: 200,
    waveform: {
      fadeSide: false,
      maxHeight: 200,
      verticalAlign: 'middle',
      horizontalAlign: 'center',
      color: '#2980b9'
    }
  })

  vudio.dance()

}).catch((error) => {
 console.error(error.name || error)
})

查看在線DEMO