超能刚哥

getUserMedia API的两个使用案例

发表于2016-11-07
getUserMedia API的两个使用案例已关闭评论
getUserMedia API的两个使用案例

之前在微博看到了@HeeroLaw的文章《通过WebRTC获取摄像头影像》,了解到了getUserMedia这个API,觉得挺有意思的,于是亲自试验了一番,做了俩简单的小DEMO。

1. 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的支持,通过http://访问,则会报错,可以分别访问百度和新浪微博然后打开控制台输入下面的代码进行测试:

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

2. 摄像头案例

创建一个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


3. 麦克风案例

因为纯粹用一个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

该文章暂无评论,赶快抢占沙发!
抱歉,该文章已关闭评论。