WebRTC学习笔记——建立连接

1.WebRTC简介

WebRTC是一个开源的项目,可以提供浏览器,手机应用之间实时通信能力。 同时,这一功能已经内置于现代浏览器中,所以它可以做到无须借助第三方软件或插件便可以在开发网络中传输高质量音视频流。

  • 主要JavaScript API
    • MediaStream 音视频流对象
    • RTCPeerConnection 端对端音视频连接对象
    • RTCDataChannel 端对端数据通道对象
  • 适用设备
    • Firefox,Opera,Chrome浏览器支持并默认启用了WebRTC功能,并且能够实现互相通信
    • IE浏览器直到11版本还未支持WebRTC,但是Edge15版本已经开始支持WebRTC,最新浏览器支持可以查看Can I use
    • 原生安卓和ios应用均已支持

2.建立连接过程

2.1 概述

首先我们可以分析一下,建立连接需要哪些条件: 1.我们需要知道对方浏览器的网络地址才能连接到它,需要获取到对方的IP地址和端口号 2.我们需要对对方支持的音频和视频编解码器等电脑软硬件信息有所了解 当我们互相拿到了对方的地址和电脑软硬件信息后,就可以通过RTCPeerConnection对象来建立连接了:

2.2 获取地址

在获取对方地址时,因为现实网络情况的复杂性,可能不能直接获取到对方的地址,这时就需要用到STUN,TURN和ICE组件来处理不同类型网络间的呼叫连接。现实网络环境有三种情况:

  • 公共网络

这类网络IP之间可以不受限制地进行互相访问

  • NAT网络

这类网络主机在私有内网中,没有单独的公网IP,STUN协议就是解决此网络问题 首先发一个请求给STUN服务器,以开启STUN协议,之后服务器识别出发出请求的客户端IP地址,并将其返回给客户端,客户端就能通过返回的IP地址来识别自己

  • 严格受限的NAT网络

这类网络中的主机在内网内,只能单向访问外网,外网不能直接访问它,所以这类网络需要通过在公共网络上的服务器来进行数据中转,TURN协议就是解决此网络问题 TURN服务器可以在对等连接的双方之间增加一个转播,TURN服务器去下载、处理并重定向每一个用户发过来的数据包 最后,ICE则是一个将STUN和TURN结合在一起的标准,它会判断主机是上面三种类型之一,并用相应的方法来建立主机之间的连接

2.3 获取电脑软硬件信息

我们需要获取到对方所支持的音频和视频编解码器,他们使用哪种网络以及他们电脑可以处理多少数据,我们就需要一个有用户所有信息的字符串名片来传送给其他用户,这里我们可以使用SDP(会话描述协议) SDP涵盖了一个指定用户的描述、时间配置和对媒体的限制,类似于你电脑的名片,其他用户可以通过它来试着联系到你

3.创建应用

这里可以创建一个WebRTC本地应用来熟悉一下以上建立连接的流程,主要的功能就是从用户摄像头获取图像,最终在页面上显示两个视频流,一个来自摄像头,另一个来自本地WebRTC连接。 这里我们使用的两个连接对象都在同一个浏览器中,直接浏览器中传输即可,在真实环境中,连接的用户和自己并不在同一个浏览器中,这就需要一个websocket服务器,用于在浏览器中连接双方。 1.由于浏览器API有相应的前缀,需要有两个兼容函数来首先处理一下:

function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection ||
        window.webkitRTCPeerConnection ||
        window.mozRTCPeerConnection ||
        window.msRTCPeerConnection;
    return !!window.RTCPeerConnection;
}

2.可以通过配置自己的STUN服务器地址,或者不写配置使用浏览器默认的STUN服务器地址,来创建两个RTCPeerConnection对象来模拟连接

var configuration={
        //iceServers: [{ url: "stun:127.0.0.1:9876" }]
    };
    youConnection = new RTCPeerConnection(configuration);
    otherConnection = new RTCPeerConnection(configuration);

3.通信双方交换ICE候选路径,也就是通过ICE获取到自己的IP和端口号后,再互相交换此信息

    youConnection.onicecandidate = function (event) {
        if (event.candidate) {
            console.log(event.candidate);
            otherConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    otherConnection.onicecandidate = function (event) {
        if (event.candidate) {
            console.log(event.candidate);
            youConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

4.通信双方通过交换offer和answer来互换SDP信息

    var offerOptions={
        offerToRecceiveAudio: 1,
        offerToReceiveVideo: 1
    };

    youConnection.createOffer(offerOptions)
        .then(function(offer){
            console.log(offer);
            youConnection.setLocalDescription(offer);
            otherConnection.setRemoteDescription(offer);

            otherConnection.createAnswer(offerOptions)
                .then(function(answer){
                    console.log(answer);
                    otherConnection.setLocalDescription(answer);
                    youConnection.setRemoteDescription(answer);
                });
    });

5.这样通信双方的连接就建立起来了,可以向连接对象中添加媒体流,另一个连接对象就能读出媒体流,并实时显示在video标签中

    youConnection.onaddstream=function(event){
        you.srcObject=event.stream;
    };

    otherConnection.addStream(stream);

4.参考资料

  • 《Learning WebRTC》
  • 《WebRTC权威指南》
  • 《WebRTC零基础开发者教程》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

教你一招 | 用Python写一个简单的微博爬虫

我是个微博重度用户,工作学习之余喜欢刷刷timeline看看有什么新鲜事发生,也因此认识了不少高质量的原创大V,有分享技术资料的,比如好东西传送门;有时不时给你...

17210
来自专栏北京马哥教育

皇上请阅卷!【2016运维高考-考卷汇总】

一年一度高考时,马帮小伙伴也没闲着,做了一套“运维高考题”,那么现在就由你,没错,就是你————最敬爱的大众评审来一起阅卷啦! We want you!!! 先...

3279
来自专栏FreeBuf

【漏洞预警】Linux内核ipv4/udp.c 远程任意代码执行(CVE-2016-10229)

? 漏洞描述 Linux kernel是美国Linux基金会发布的操作系统Linux所使用的内核。Linux kernel 4.5之前的版本中的udp.c文件...

1736
来自专栏Java学习123

Linux 性能分析工具 nmon for Linux

2806
来自专栏python爬虫日记

利用jTessBoxEditor工具进行Tesseract3.02.02样本训练,提高验证码识别率

前文已经简要介绍tesseract ocr引擎的安装及基本使用,其中提到使用-l eng参数来限定语言库,可以提高识别准确率及识别效率。

962
来自专栏康怀帅的专栏

Ubuntu 常用软件

本文列举了 Ubuntu 常用软件。 娱乐 网易云音乐 http://music.163.com/#/download mpv 播放器 https://mpv....

2695
来自专栏跟着阿笨一起玩NET

C# Windows服务开发从入门到精通

4.2、通过第三方组件 (Topshelf)创建C# Windows服务应用程序。

552
来自专栏walterlv - 吕毅的博客

git subtree 不断增加的推送时间,解不玩的冲突!这篇文章应该能救你

发布于 2018-06-26 02:32 更新于 2018-09...

461
来自专栏字根中文校对软件

BitShares 2.0 环境设置

BitShares 2.0 环境设置 工作环境:Ubuntu 第一步:准备环境与下载 BitShares 2.0  Core 源代码: bitshares-c...

3556
来自专栏张善友的专栏

让应用程序与您形影相随-PortableApps.com

作为一名 IT 专业人员,您可能会经常需要从一台计算机移到另一台计算机。当您这样做时,您可能会希望能拥有一组随时可用的标准应用程序、工具和文档。满足这些需求的一...

1825

扫码关注云+社区