WebRTC实践获取视频流

最新推荐文章于 2024-05-20 14:25:52 发布

黒木涯

最新推荐文章于 2024-05-20 14:25:52 发布

阅读量4.1k

点赞数 2

分类专栏：流媒体技术文章标签： webrtc javascript

本文链接：https://blog.csdn.net/xxxlllbbb/article/details/108103072

版权

流媒体技术专栏收录该内容

15 篇文章 11 订阅

订阅专栏

技术前言

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

黒木涯

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
WebRTC实践获取视频流

技术前言通过上次课程“WebRTC简介”我们知道了WebRtc技术主要是为了实现网页之间的实时通讯，本次课程我们将用一个简单实例展开讲解WebRTC调取本地摄像头的具体方法及原理。接口方法语法navigator.getUserMedia(constraints,successCallback, errorCallback );参数1. constraintsMediaStreamConstaints对象指定了请求使用媒体的类型，还有每个类型的所需要的参数。例如下面只获取视频而不获取音频:va
复制链接

扫一扫