WebRTC实践获取视频流

技术前言

通过上次课程“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 consoleif (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实践总结