【WebRTC】第二篇：采集音视频数据
前言
这一篇内容主要是通过调用本地摄像头和麦克风实现对音视频流的采集。在实现之前，我们要先了解采集音视频数据的一个非常重要的API—getUserMedia()。
这个API会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。
【注】这需要注意一点的是这个API原来的用法navigator.getUserMedia()已废弃，也已从web标准中删除，虽然一些浏览器目前还支持，但还是建议尽量不要使用这种方法，因为不确定什么时候它就不支持了。这个API现在的用法是
navigator.mediaDevices.getUserMedia()。
语法格式
var promise = navigator.mediaDevices.getUserMedia(constraints);
参数
constraints 参数是一个包含video和audio两个成员的对象，用于说明请求的媒体说明，必须至少一个类型或同时两个被指定。
比如同时请求不带任何参数的音频和视频
var constraints = { audio: true, video: true }也可对视频设置相应的参数来满足自己的需求
{ audio: true, video: { width: 1280, height: 720 }}如果是移动设备还可设置前置摄像头和后置摄像头
//使用前置摄像头
{ audio: true, video: { facingMode: "user" } }
//使用后置摄像头
{ audio: true, video: { facingMode: "environment" } }当然还有一些其他设置，就不一一例举了。
使用方法
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
/* 使用这个stream stream */
})
.catch(function(err) {
/* 处理error */
});采集音视频流小案例
了解了这个API后，自己就可以做一个获取本地音视频流的小案例了。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>采集本地音视频流</title>
</head>
<body>
<div>
<video autoplay id="stream"></video>
</div>
<script>
var video = document.getElementById(‘stream‘);
var constraints = {
video: true,
audio: true
}
//判断浏览器支不支持getUserMedia
if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
console.log("您的浏览器不支持getUserMedia")
}else {
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
video.srcObject = stream;
}).catch(function(err) {
console.log(err.name + "：" + err.message)
})
}
</script>
</body>
</html>运行效果
最后欢迎大家关注我的公众号，一起学习
相关推荐
行吟阁 2020-05-30
STPace 2020-03-14
WebVincent 2020-03-04
黎豆子 2020-02-18
一个客户要求给网站添加一个背景音乐，我用的是html5添加网页背景音乐的代码，在此记录一下以后有用。html5方法二：<videocontrols=""autoplay=""name="media&q
玫瑰小妖 2020-01-24
HSdiana 2019-12-27
luvhl 2019-12-11
pythonclass 2013-09-16
hickwu 2011-03-24
ITxiaobaibai 2019-11-08
Rafema 2011-08-27
luvhl 2019-10-29
Devieun 2012-06-12
HTML混合APP开发 2017-07-08
Abudula 2018-11-19
示例一和示例二 参考尚硅谷老师的视频教程；window.AudioContext){alert("当前浏览器不支持哟！DOCTYPE html><html><head><meta charset="U
来老师 2018-10-17
quanhaoH 2013-05-09
86266537 2016-04-14
spoft 2015-09-29