之前在微博上看到了@HeeroLaw的文章《通过WebRTC获取摄像头影像》。学习了getUserMediaAPI后，觉得很有意思，于是自己尝试了一下，做了两个简单的小DEMO。getUserMedia介绍在@HeeroLaw的文章中介绍了navigator.getUserMediaAPI。但是，我在MDN上发现这个API已经被废弃，取而代之的是MediaDevices.getUserMedia。navigator对象下也挂了mediaDevices，调用方法如下：navigator.mediaDevices.getUserMedia(myConstraints).then(function(mediaStream){/*使用流*/}).catch(function(err){/*处理错误*/});其中myConstraints参数是一个对象，可以指定需要调用的外部媒体设备，目前只有摄像头和麦克风//同时启用麦克风和摄像头varmyConstraints={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需要征得同意用户的。相机案例创建视频标签调用getUserMedia向视频标签显示数据varvideo=document.querySelector('#video')varmyConstraints={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话筒案例，因为太没特色了，无法播放话筒拾取的声音purelywithanaudiotag是的，所以我使用了Vudio.js，这是我之前写的一个音频可视化库。代码如下：创建画布显示音频波形使用Vudio.js和getUserMedia显示麦克风拾音varcanvas=document.querySelector('#canvas')navigator.mediaDevices.getUserMedia({audio:true}).then((stream)=>{//调用Vudiovarvudio=newVudio(stream,canvas,{accuracy:256,width:1024,height:200,waveform:{fadeSide:false,maxHeight:200,verticalAlign:'middle',horizo??ntalAlign:'center',颜色:'#2980b9'}})vudio.dance()}).catch((error)=>{console.error(error.name||error)})查看在线演示
