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