getusermedia php,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标签

调用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)

})

麦克风案例

因为纯粹用一个audio标签来播放麦克风拾取到的声音显得太没特色了，于是我用到了以前写的一个音频可视化库Vudio.js，代码如下:

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

})