技术前言
通过上次课程“WebRTC简介”我们知道了WebRtc技术主要是为了实现网页之间的实时通讯,本次课程我们将用一个简单实例展开讲解WebRTC调取本地摄像头的具体方法及原理。
接口方法
语法
navigator.getUserMedia(constraints,successCallback, errorCallback );
参数
1. constraints
MediaStreamConstaints对象指定了请求使用媒体的类型,还有每个类型的所需要的参数。例如下面只获取视频而不获取音频:
var constraints = {
audio: false,
video: true
}
2. successCallback
当调用成功后,successCallback中指定的函数就被调用,包含了媒体流的MediaStream对象作为它的参数。
例如 getUserMedia() 函数执行成功, 摄像头视频流可以设置为video标签的src属性资源:
function successCallback(stream) {
window.stream = stream; // stream available to console
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
}
3. errorCallback
当调用失败,errorCallback中指定的函数就会被调用,MediaStreamError对象作为它唯一的参数。
滤镜处理
.videoStyle1 {
-webkit-filter: blur(4px) invert(1) opacity(0.5);
}
.videoStyle2 {
filter: hue-rotate(180deg) saturate(200%);
-moz-filter: hue-rotate(180deg) saturate(200%);
-webkit-filter: hue-rotate(180deg) saturate(200%);
}
实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>WebRTC获取视频流</title>
<style type="text/css">
video {
border: 1px solid black;
max-width: 100%;
width: 320px;
}
.videoStyle1 {
-webkit-filter: blur(4px) invert(1) opacity(0.5);
}
.videoStyle2 {
filter: hue-rotate(180deg) saturate(200%);
-moz-filter: hue-rotate(180deg) saturate(200%);
-webkit-filter: hue-rotate(180deg) saturate(200%);
}
</style>
<script src="../js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.video = function(msc, streamAction) {
const setting = {
video: true,
audio: false
};
jQuery.extend(setting, msc);
this.get(0).addEventListener('loadedmetadata', function() {
console.log("视频加载完成");
});
navigator.mediaDevices.getUserMedia(setting)
.then(stream => {
this.get(0).srcObject = stream;
if(typeof(streamAction) == "function") {
streamAction(stream);
}
}).catch(e => console.log('navigator.getUserMedia error: ', e));
}
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
$("input").click(function() {
switch(this.id) {
case "Openvideo":
$("#localVideo").video();
break;
default:
$("#localVideo").attr('class', this.id);
break;
}
});
})
</script>
</head>
<body>
<h1>WebRTC获取视频流</h1>
<div>
<input type="button" value="打开视频" id="Openvideo" />
<input type="button" value="样式1" id="videoStyle1" />
<input type="button" value="样式2" id="videoStyle2" />
</div>
<video id="localVideo" autoplay playsinline></video>
</body>
</html>
注意代码中不要忘记在 video 标签添加 autoplay 属性. 否则, 你将只能看到一张图片而不是动态视频!
为了确保video标签大小不会超出父容器.添加了 width 和 max-width 来设置video标签的首选尺寸和最大尺寸. 浏览器将会自动计算其高度.
运行结果
用Chrome 浏览器打开以上实例代码页面得到如下结果
WebRTC实践历程:
1. WebRTC实践简介
2. WebRTC实践获取视频流
3. WebRTC实践传输视频流
4. WebRTC实践信令服务
5. WebRTC实践点对点通信
6. WebRTC实践视频聊天室
7. WebRTC实践总结