没有合适的资源?快使用搜索试试~ 我知道了~
使用WebRTC搭建前端视频聊天室——入门篇1
需积分: 0 6 下载量 54 浏览量
2022-08-03
20:03:56
上传
评论
收藏 1MB PDF 举报
温馨提示
试读
15页
1. 一个约束对象(constraints object),这个后面会单独讲 2. 一个调用成功的回调函数,如果调用成功,传递给它一个流对象 3. 一个调用失败
资源详情
资源评论
资源推荐
16-3-6 使用WebRTC搭建前端视频聊天室——入门篇 - 说学逗唱 - SegmentFault
https://segmentfault.com/a/1190000000436544 1/15
home (/) feed (/timeline) javascript (/t/javascript) php (/t/php) python (/t/python)
java (/t/java) mysql (/t/mysql) ios (/t/ios) android (/t/android) node.js (/t/node.js) html5 (/t/html5)
linux (/t/linux) c++ (/t/c%2B%2B) css3 (/t/css3) git (/t/git) golang (/t/golang) ruby (/t/ruby)
vim (/t/vim) docker (/t/docker) mongodb (/t/mongodb)
(/tags)
文
使用WebRTC搭建前端视频聊天室——入门篇
(/a/1190000000436544)
webrtc (/t/webrtc/blogs) websocket (/t/websocket/blogs) node.js (/t/node.js/blogs)
javascript (/t/javascript/blogs) webim (/t/webim/blogs)
天镶 (/u/lingyucoder) 2014年03月15日发布
什么是WebRTC?
众所周知,浏览器本身不支持相互之间直接建立信道进行通信,都是通过服务器进行中转。比如现在有两个客户
端,甲和乙,他们俩想要通信,首先需要甲和服务器、乙和服务器之间建立信道。甲给乙发送消息时,甲先将消
息发送到服务器上,服务器对甲的消息进行中转,发送到乙处,反过来也是一样。这样甲与乙之间的一次消息要
通过两段信道,通信的效率同时受制于这两段信道的带宽。同时这样的信道并不适合数据流的传输,如何建立浏
览器之间的点对点传输,一直困扰着开发者。WebRTC应运而生
WebRTC是一个开源项目,旨在使得浏览器能为实时通信(RTC)提供简单的JavaScript接口。说的简单明了一
点就是让浏览器提供JS的即时通信接口。这个接口所创立的信道并不是像WebSocket一样,打通一个浏览器与
WebSocket服务器之间的通信,而是通过一系列的信令,建立一个浏览器与浏览器之间(peer-to-peer)的信
道,这个信道可以发送任何数据,而不需要经过服务器。并且WebRTC通过实现MediaStream,通过浏览器调用
设备的摄像头、话筒,使得浏览器之间可以传递音频和视频
WebRTC已经在我们的浏览器中
这么好的功能,各大浏览器厂商自然不会置之不理。现在WebRTC已经可以在较新版的Chrome、Opera和
Firefox中使用了,著名的浏览器兼容性查询网站caniuse上给出了一份详尽的浏览器兼容情况
(/user/login)
16-3-6 使用WebRTC搭建前端视频聊天室——入门篇 - 说学逗唱 - SegmentFault
https://segmentfault.com/a/1190000000436544 2/15
另外根据36Kr前段时间的新闻
Google推出支持WebRTC及Web Audio的Androi…
和
Android版Opera开始支持WebRTC,允许用户在…
,Android也开始支持WebRTC
三个接口
WebRTC实现了三个API,分别是:
* MediaStream:通过MediaStream的API能够通过设备的摄像头及话筒获得视频、音频的同步流
* RTCPeerConnection:RTCPeerConnection是WebRTC用于构建点对点之间稳定、高效的流传输的组件
* RTCDataChannel:RTCDataChannel使得浏览器之间(点对点)建立一个高吞吐量、低延时的信道,用于传
输任意数据
这里大致上介绍一下这三个API
MediaStream(getUserMedia)
MediaStream API为WebRTC提供了从设备的摄像头、话筒获取视频、音频流数据的功能
W3C标准
W3C标准传送门 (http://dev.w3.org/2011/webrtc/…
如何调用
同门可以通过调用navigator.getUserMedia(),这个方法接受三个参数:
1. 一个约束对象(constraints object),这个后面会单独讲
2. 一个调用成功的回调函数,如果调用成功,传递给它一个流对象
3. 一个调用失败的回调函数,如果调用失败,传递给它一个错误对象
16-3-6 使用WebRTC搭建前端视频聊天室——入门篇 - 说学逗唱 - SegmentFault
https://segmentfault.com/a/1190000000436544 3/15
浏览器兼容性
由于浏览器实现不同,他们经常会在实现标准版本之前,在方法前面加上前缀,所以一个兼容版本就像这样
一个超级简单的例子
这里写一个超级简单的例子,用来展现getUserMedia的效果:
将这段内容保存在一个HTML文件中,放在服务器上。用较新版本的Opera、Firefox、Chrome打开,在浏览器弹
出询问是否允许访问摄像头和话筒,选同意,浏览器上就会出现摄像头所拍摄到的画面了
注意,HTML文件要放在服务器上,否则会得到一个NavigatorUserMediaError的错误,显示
PermissionDeniedError,最简单方法就是cd到HTML文件所在目录下,然后 python -m SimpleHTTPServer(装
了python的话),然后在浏览器中输入 http://localhost:8000/{文件名称}.html
这里使用 getUserMedia获得流之后,需要将其输出,一般是绑定到 video标签上输出,需要使用 window.URL.cr
eateObjectURL(localMediaStream)来创造能在 video中使用 src属性播放的Blob URL,注意在 video上加入 au
toplay属性,否则只能捕获到一张图片
var getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
</head>
<body>
<video id="video" autoplay></video>
</body>
<script type="text/javascript">
var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
getUserMedia.call(navigator, {
video: true,
audio: true
}, function(localMediaStream) {
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
console.log("Label: " + localMediaStream.label);
console.log("AudioTracks" , localMediaStream.getAudioTracks());
console.log("VideoTracks" , localMediaStream.getVideoTracks());
};
}, function(e) {
console.log('Reeeejected!', e);
});
</script>
</html>
剩余14页未读,继续阅读
田仲政
- 粉丝: 15
- 资源: 332
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0