zoukankan      html  css  js  c++  java
  • 一天一个开发技巧:如何基于WebRTC建立P2P通信?

    目前EasyGBS平台已经支持Webrtc协议的视频流输出了,对我们来说是一个很大的进步。webrtc及时性、低延时的优势可以让视频输出行业达到一个新高度,本文我们主要是和大家分享一下开发过程中webrtc建立P2P的流程,流程主要分为两个部分,一个是发起端,一个是接收端,下面就这两个部分的运行详细讲解一下。

    发起端

    a、发起端创建websocket长连接。

    b、创建PeerConnection对象,并主要监听onicecandiate、addstream和onconnectionstatechange方法。onicecandiate方法就是数据的收集,在通过websocket发送给接收端进行PeerConnection的addIceCandiate方法进行保存和设置;addstream方法就是获取到的远端流并进行播放;onconnectionstatechange方法就是PeerConnetion连接远端状态(connectioned代表连接成功,disconnected代表断开)。

    c、打开本地音视频设备,并将音视频添加到PeerConnection对象上,用到的是addStream或addTrack(此方法只能添加单个流,可使用二次此方法来添加多流)方法。

    d、使用PeerConnection的createOffer方法来获取SDP信息,SDP包含各种音视频编解码和加密等相关参数。

    e、PeerConnection的setLocalDescription方法把改SDP保存设置进去,在通过websocket服务器发送给接收端。

    f、发起端接收到接收端发送过来的SDP信息,并通过PeerConnection的setRemoteDescription方法保存设置进去。

    g、这样就可进行相互通信。

    接收端

    a、接收端创建websocket长连接。

    b、创建PeerConnection对象,并主要监听onicecandiate、addstream和onconnectionstatechange方法。onicecandiate方法就是数据的收集,再通过websocket发送给接收端进行PeerConnection的addIceCandiate方法进行保存和设置;addstream方法就是获取到的远端流并进行播放;onconnectionstatechange方法就是PeerConnetion连接远端状态(connectioned代表连接成功,disconnected代表断开)。

    c、打开本地音视频设备,并将音视频添加到PeerConnection对象上,用到的是addStream或addTrack(此方法只能添加单个流,可使用二次此方法来添加多流)方法。

    d、接收发送端发送过来的offer SDP信息,再通过PeerConnection的setRemoteDescription方法保存设置。

    e、在使用PeerConnection的createAnswer方法来获取SDP信息,SDP里面也包含各种音视频等相关参数。并通过websocket服务器发送给发起端。

    f、接收到发起端发送过来的SDP信息,并通过PeerConnection的setRemoteDescription方法保存设置进去。

    这样就可以相互通信。

    总结

    1、a~c步骤是一样的;

    2、相互设置对方的SDP和ICE信息;

    3、监听PeerConnection的addstream来获取远端流;

    4、以下是本人总结的主要流程图。

     
  • 相关阅读:
    Maven安装与环境配置(Windows)
    Java配置----JDK开发环境搭建及环境变量配置
    js中的join(),reverse()与 split()函数用法解析
    Vue2.0 搭建Vue脚手架(vue-cli)
    vue: WebStorm设置快速编译运行
    优秀博客推荐
    Springboot读取自定义配置文件节点
    vue——报错:Cannot read property '__ob__' of undefined
    css——内容溢出显示垂直滚动条,内容不超出就不显示滚动条
    js——实现多选
  • 原文地址:https://www.cnblogs.com/TSINGSEE/p/14918439.html
Copyright © 2011-2022 走看看