WebRTC简单视频本地回调显示

最新推荐文章于 2024-07-27 14:59:45 发布

永正

最新推荐文章于 2024-07-27 14:59:45 发布

阅读量3.3k

点赞数

分类专栏： WebRTC 文章标签：摄像头视频流 webrtc

本文链接：https://blog.csdn.net/u010064206/article/details/21809125

版权

WebRTC 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webRTC是一个无插件就可以在浏览器上视频聊天的技术，是p2p连接。详细的理论可以谷歌一些，自己找一下；

下面就用js的api来调用摄像头本地回显，简单的几句代码，就可以实现，很简单，在谷歌浏览器测试；

必须是支持webrtc的浏览器，还有支持webrtc不同的浏览器可能有些不一样，这里就不多写了，只是命名不同而已

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>

<div id="container">
  <video id="vid1" autoplay width=400></video>
  <script>
	function gotStream(stream){
  		vid1.src = webkitURL.createObjectURL(stream);
	}
	navigator.webkitGetUserMedia({audio:true, video:true},
                               gotStream, function() {});
  </script>

</div>

</body>
</html>

上面我写了一个video标签来显示视频。

执行navigator的webkitGetUserMedia方法，这个方法有3个参数

{audio:true, video:true}是定义获取流，audio表示音频，video表示视频，他们都为true，表示都获取出来

gotStream是回调函数，当获取视频流和音频流成功就执行这个函数，在这个函数中，传递了一个stream对象，用createObjectURL显示在网页上

最后一个也是一个回调函数，当获取流失败的时候自动调用这个。

点击允许使用摄像头