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 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

Oracle数据库漏洞分析:无需用户名和密码进入你的数据库

摘要 一般性的数据库漏洞,都是在成功连接或登录数据库后实现入侵;本文介绍两个在2012年暴露的Oracle漏洞,通过这两种漏洞的结合,可以在不掌握用户名/密码...

2286
来自专栏施炯的IoT开发专栏

基于Windows 10平台的PM2.5检测器制作

    本篇文章详细讲解了如何利用SDS011激光式PM2.5传感器、HC-06蓝牙模块和Windows 10设备完成一个简单的PM2.5检测器及其应用程序的开...

1566
来自专栏杨建荣的学习笔记

数据库元数据稽核实践(一)

随着数据的沉淀和数据的录入过程中的不规范,发现元数据存在越来越多的问题。 元数据都不能作为参考的话,那后期的工作就步履维艰了。

751
来自专栏木头编程 - moTzxx

京东jos 获取授权及php-sdk的使用示例

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

953
来自专栏大魏分享(微信公众号:david-share)

干货:什么叫一个好的Ansible Playbook?

前言: 本文是我和李尧老师一起实验。李尧是红帽高级培训讲师,目前负责红帽中国区员工内部技术培训与认证。 一、什么是一个好的Ansible Playbook? ?...

7089
来自专栏程序员叨叨叨

【转】从零开始手敲次世代游戏引擎(一)

况且,考虑到项目的庞大,和剩下的时日(可能也就1~2万天了),基于已经过去的1万多天的经验,这过程当中比尔盖茨一定会死去,冯氏架构也可能成为遗物。所以,保持代码...

1402
来自专栏用户2442861的专栏

基于xmpp openfire smack开发之openfire介绍和部署[1]

http://blog.csdn.net/shimiso/article/details/8816558

512
来自专栏后端技术探索

接上篇-nginx-http-flv-module更新说明(二)

最近这段时间主要在不同平台测试模块的稳定性,目前播放这一块没发现问题,由于条件限制,除了FreeBSD平台没测试过,Windows 7,Debian 7.x和m...

982
来自专栏程序员的SOD蜜

使用CefSharp开发一个12306“安心刷票弹窗通知”工具

有需求就要改进 最近两年没有在春节回家过年了,主要是票太难买,虽然之前写了一个12306“无声购票弹窗”工具,解决了抢票问题,但是全家老小一起回去还是很累,干脆...

35810
来自专栏大史住在大前端

一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手

大部分工程化的项目为方便维护,大多都会采用前后端分离的开发方式,而前端和后端的工作基本也是同时下发的,这时前端开发人员就会很尴尬,后端在干活的时候,领导几乎一定...

997

扫码关注云+社区