WebRTC
最后更新于:2022-04-01 23:54:38
## WebRTC
WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API。
1、getUserMedia
要播放摄像头的影像,首先需要一个video标签:
<video id="video"></video>
获取摄像头影像主要是通过navigator.getUserMedia
这个接口,这个接口的支持情况已经逐渐变好了(点击这里),不过,使用的时候还是要加上前缀的。
兼容代码:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
语法:
navigator.getUserMedia(constraints, successCallback, errorCallback);
参数说明:
- constraints:Object类型,指定了请求使用媒体的类型
- succeCallback:启用成功时的函数,它传入一个参数,为视频流对象,可以进一步通过
window.URL.createObjectURL()
接口把视频流转换为对象URL。 - errorCallback:启动失败时的函数。它传入一个参数,为错误对象(chrome)或错误信息字符串(Firefox),可能值:
PERMISSION_DENIED:用户拒绝提供信息。 NOT_SUPPORTED_ERROR:浏览器不支持硬件设备。 MANDATORY_UNSATISFIED_ERROR:无法发现指定的硬件设备。
例如要启用视频设备(摄像头),可这样:
navigator.getUserMedia({
video: true
});
如果要同时启用视频设备和音频设备,可这样:
navigator.getUserMedia({
video: true,
audio: true
});
1.1 获取摄像头完整实例
<meta charset="UTF-8">
<title></title>
<video id="video" width="400" height="300"></video>
<button id="live">直播</button>
<script>
var video = document.getElementById('video');
function liveVideo(){
// 获取到window.URL对象
var URL = window.URL || window.webkitURL;
navigator.getUserMedia({
video: true
}, function(stream){
video.src = URL.createObjectURL(stream);
video.play();
}, function(error){
console.log(error.name || error);
});
}
document.getElementById("live").addEventListener('click',function(){
liveVideo();
})
</script>
当点击直播按钮时,电脑会提升用户是否允许使用摄像头,允许之后,网页上就可以实时显示摄像头影像了。如果不允许,就会触发错误事件。
1.1.1 截图
除了实时直播外,我们还可以做实时截图效果,这时我们需要利用<canvas>
元素来画图,代码如下:
<meta charset="UTF-8">
<title></title>
<style>
#canvas,#video{
float:left;
margin-right:10px;
background:#fff;
}
.box{
overflow:hidden;
margin-bottom:10px;
}
</style>
<div class="box">
<video id="video" width="400" height="300"></video>
<canvas id="canvas" width="0" height="0"></canvas>
</div>
<button id="live">直播</button>
<button id="snap">截图</button>
<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = video.width;
var height = video.height;
canvas.width = width;
canvas.height = height;
function liveVideo(){
// 获取到window.URL对象
var URL = window.URL || window.webkitURL;
navigator.getUserMedia({
video: true
}, function(stream){
video.src = URL.createObjectURL(stream);
video.play();
//点击截图
document.getElementById("snap").addEventListener('click',function(){
ctx.drawImage(video, 0, 0, width, height);
});
}, function(error){
console.log(error.name || error);
});
}
//开始直播
document.getElementById("live").addEventListener('click',function(){
liveVideo();
})
</script>
1.1.2 保存图片
当然,截图后,你也可以保存下来:
<a download="snap.png" id="download">下载图片</a>
var url = canvas.toDataURL('image/png');
document.getElementById('download').src = url;
1.2 捕获麦克风声音
要通过浏览器捕获声音,需要借助Web Audio API。
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
function onSuccess(stream){
var audioInput = context.createMediaStreamSource(stream);
audioInput.connect(context.destination);
}
navigator.getUserMedia({audio: true} ,onSuccess);
</canvas>