WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。
1、getUserMedia
要播放摄像头的影像，首先需要一个video标签：
| 1 | <video id="video"></video>
|
获取摄像头影像主要是通过navigator.getUserMedia这个接口，这个接口的支持情况已经逐渐变好了：点这里
不过，使用的时候还是要加上前缀的，兼容代码：
| 1 2 3 | navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia;
|
| 1 | 语法： navigator.getUserMedia(constraints, successCallback, errorCallback);
|
参数说明：
constraints：Object类型，指定了请求使用媒体的类型succeCallback：启用成功时的函数，它传入一个参数，为视频流对象，可以进一步通过window.URL.createObjectURL()接口把视频流转换为对象URL。errorCallback：启动失败时的函数。它传入一个参数，为错误对象（chrome）或错误信息字符串（Firefox），可能值：
PERMISSION_DENIED：用户拒绝提供信息。
NOT_SUPPORTED_ERROR：浏览器不支持硬件设备。
MANDATORY_UNSATISFIED_ERROR：无法发现指定的硬件设备。
例如：要启用视频设备（摄像头），可这样：
| 1 2 3 | navigator.getUserMedia({
video: true
});
|
如果要同时启用视频设备和音频设备，可这样：
| 1 2 3 4 | navigator.getUserMedia({
video: true,
audio: true
});
|
2、 获取摄像头
| 1 2 3 4 5 6 7 8 9 | var URL = window.URL || window.webkitURL; // 获取到window.URL对象
navigator.getUserMedia({
video: true
}, function(stream) {
video.src = URL.createObjectURL(stream);// 将获取到的视频流对象转换为地址
video.play();
}, function(error) {
console.log(error.name || error);
});
|
3、 截图
除了实时直播外，我们还可以做实时截图效果，这时我们需要利用<canvas>元素来画图，代码如下：
| 1 2 3 4 5 6 7 8 9 10 | <canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = video.width;
var height = video.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(video, 0, 0, width, height);
|
4、 保存图片
当然，截图后，你也可以保存下来：
| 1 2 3 4 | <a download='snap.png' id="download">下载图片</a>
var url = canvas.toDataURL('image/png');
document.getElementById('download').src = url;
|
5、 完整实例
实例代码（由于安全限制问题，请将代码复制到本地运行）：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#canvas,#video {
float: left;
margin-right: 10px;
background: #fff;
}
.box {
overflow: hidden;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">
<video id="video" width="400" height="300"></video>
<canvas id="canvas"></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(){
var URL = window.URL || window.webkitURL; // 获取到window.URL对象
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);
var url = canvas.toDataURL('image/png');
document.getElementById('download').href = url;
});
}, function(error){
console.log(error.name || error);
});
}
document.getElementById("live").addEventListener('click',function(){
liveVideo();
});
</script>
</body>
</html>
|
本文详细介绍了如何使用WebRTC API中的getUserMedia接口来播放摄像头影像、实现截图功能，并提供了完整的代码示例，包括如何处理不同浏览器的兼容性问题。
扫一扫
1085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
