• WebRTC音视频开发读书笔记（四）

    WebRTC中，连接是核心内容，通过RTCPeerConnection接口可以将本地流MediaStream发送至远端，同时也可以远端媒体发送至本地，从而建立对等连接。本地与远端之间进行媒体协商及网络协商成功后，将本地媒体流发送到远端的过程称为连接建立。

    七、建立连接

    1、RTCConnection

    RTCPeerConnection简称PC对象，即连接对象，本地为Local对象，远端为Remote对象，主要有以下API，如表所示：

    2、连接建立

    术语：

            Peer-A  : 简写为 A ，即本地

            Peer-B ： 简写为 B  即远端

            RTCPeerConnection ：简写为PC    

            RTCPeerConnection连接A端即为PC-A,连接B端即为PC-B

    连接过程：
    （1）A 获取媒体流MediaStream

    代码如下：

    navigator.mediaDevices.getUserMedia
    （2) A(生成PC-A对象

    RTCPeerConnection接口代表一个由本地计算机至远端的WebRTC连接。该接口提供了创建、保持、监控、关闭连接的方法，代码如下：

    1. //可选参数包括ICE服务器等
    2. pc=new RTCPeerConnection([RTCConfiguration dictionary])

     ICE服务器的设置如下所示：

    1.  //设置ICE Server,使用Google服务器
    2.     let configuration = { "iceServers": [{ "url": "stun:stun.l.google.com:19302" }] };
    （3） A将流加入PC-A

    代码如下：

    1. //该方法已经不推荐使用，推荐使用addTrack方法
    2. pc.addStream(stream);
    3.  
    4.  
    5. //加入轨道
    6.  
    7. /循环迭代本地流的所有轨道
    8. localStream.getTracks().forEach((track) => {
    9. /把音视频轨道添加到连接里去
    10.      PC.addTrack(track, stream);
    11.   });
       （4）A创建提议Offer

           PC接口的CreateOffer()方法启动创建一个SDP offer ,目的是启动一个新的WebRTC去连接远程端点。代码如下：

    offer=await pc.createOffer()
    (5) 设置本地描述

           A 创建提议Offer成功后，会生成RTCSessionDescription对象，然后调用PC-A的setLocalDescription方法设置本地描述，代码如下:

    await pc.setLocalDescription(desc)
            (6)   A将Offer发送给B

            A将Offer信息发送给B, 通常需要架设一个信令服务器转发Offer数据。WebSocket是一种常规的实现方式。

         （7）B生成PC-B对象

            B端也要生成一个RTCPeerConnection对象，用来进行应答Answer,发送流，接收等处理。

          （8）B 设置远端描述

            B收到信令服务器转发来的Offer信息后，调用PC-B的setRemoteDescription()方法设置远端描述。

          （9） B生成应答Answer

            PC-B的createAnswer()方法会生成一个应答SDP信息，应答Answer和提议Offer是成对出现。

           (10)   B 设置本地描述

            B创建应答成功后，会生成RTCSessionDescription对象，然后调用PC-B的setLocalDescription()方法设置本地描述信息。

         （11） B把Answer发送给 A

            B将应答信息通过信令服务器转发给A。

         （12）A设置远端描述

            A收到信令服务器转发的应答信息后，调用PC-A的setRemoteDescription()方法设置远端描述。

    　（13）交换ICE候选地址

            在建立连接的过程中，会回调onicecandidate事件，传递ＩＣＥ候选地址，将其发送至另一端，并通过另一端的addiceCandidate()方法设置对方的候选地址。大致代码如下：

    1. pc.addEventLisener('icecandidate',this.onIceCandidate);
    2.  
    3. onIceCandidate=async(event)=>{
    4.  
    5.      if(event.candidate){
    6.          //发送Candidate至另一端
    7.          let iceinfo=event.candidate;
    8.  
    9.     }
    10. }
    11.  
    12. //另一端接收到Candidate
    13. pc.addIceCandidate(new RTCIceCandidate);

            理想情况下，现在已经建立连接了

    （14）交换与使用媒体流

          当一方执行ａｄｄＴｒａｃｋ后，另一方的PC会触 发ｔｒａｃｋ事件回调，通过事件参数可以获取对方轨道里的媒体流，代码如下：

    1. pc.addEventListener('track',this.gotRemoteSteam);
    2.  
    3. //获取到远端媒体流
    4. gotRemoteStream=(e)=>{
    5.       //远端媒体流
    6.     remoteVideo.srcObject=e.streams[0];
    7.  
    8. }
    示例完整代码

            完整代码如下：

    1. import React from "react";
    2. import { Button } from "antd";
    3.  
    4. //本地视频
    5. let localVideo;
    6. //远端视频
    7. let remoteVideo;
    8. //本地流
    9. let localStream;
    10. //PeerA连接对象
    11. let peerConnA;
    12. //PeerB连接对象
    13. let peerConnB;
    14. /**
    15.  * 连接建立示例
    16.  */
    17. class PeerConnection extends React.Component {
    18.  
    19.   componentDidMount() {
    20.     //初始化本地视频对象
    21.     localVideo = this.refs['localVideo'];
    22.     //初始化远端视频对象
    23.     remoteVideo = this.refs['remoteVideo'];
    24.  
    25.     //获取本地视频尺寸
    26.     localVideo.addEventListener('loadedmetadata', () => {
    27.       console.log(`本地视频尺寸为: videoWidth: ${localVideo.videoWidth}px,  videoHeight: ${localVideo.videoHeight}px`);
    28.     });
    29.  
    30.     //获取远端视频尺寸
    31.     remoteVideo.addEventListener('loadedmetadata', () => {
    32.       console.log(`远端视频尺寸为: videoWidth: ${remoteVideo.videoWidth}px,  videoHeight: ${remoteVideo.videoHeight}px`);
    33.     });
    34.  
    35.     //监听远端视频尺寸大小变化
    36.     remoteVideo.addEventListener('resize', () => {
    37.       console.log(`远端视频尺寸为: ${remoteVideo.videoWidth}x${remoteVideo.videoHeight}`);
    38.     });
    39.  
    40.   }
    41.  
    42.   //开始
    43.   start = async () => {
    44.     console.log('开始获取本地媒体流');
    45.     try {
    46.       //获取音视频流
    47.       const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    48.       console.log('获取本地媒体流成功');
    49.       //本地视频获取流
    50.       localVideo.srcObject = stream;
    51.       localStream = stream;
    52.     } catch (e) {
    53.       console.log("getUserMedia错误:" + e);
    54.     }
    55.   }
    56.  
    57.   //呼叫
    58.   call = async () => {
    59.     console.log('开始呼叫...');
    60.     //视频轨道
    61.     const videoTracks = localStream.getVideoTracks();
    62.     //音频轨道
    63.     const audioTracks = localStream.getAudioTracks();
    64.     //判断视频轨道是否有值
    65.     if (videoTracks.length > 0) {
    66.       //输出摄像头的名称
    67.       console.log(`使用的视频设备为: ${videoTracks[0].label}`);
    68.     }
    69.     //判断音频轨道是否有值
    70.     if (audioTracks.length > 0) {
    71.       //输出麦克风的名称
    72.       console.log(`使用的音频设备为: ${audioTracks[0].label}`);
    73.     }
    74.  
    75.     //设置ICE Server,使用Google服务器
    76.     let configuration = { "iceServers": [{ "url": "stun:stun.l.google.com:19302" }] };
    77.  
    78.     //创建RTCPeerConnection对象
    79.     peerConnA = new RTCPeerConnection(configuration);
    80.     console.log('创建本地PeerConnection成功:peerConnA');
    81.     //监听返回的Candidate信息
    82.     peerConnA.addEventListener('icecandidate', this.onIceCandidateA);
    83.  
    84.     //创建RTCPeerConnection对象
    85.     peerConnB = new RTCPeerConnection(configuration);
    86.     console.log('创建本地PeerConnection成功:peerConnB');
    87.     //监听返回的Candidate信息
    88.     peerConnB.addEventListener('icecandidate',  this.onIceCandidateB);
    89.  
    90.     //监听ICE状态变化
    91.     peerConnA.addEventListener('iceconnectionstatechange', this.onIceStateChangeA);
    92.     //监听ICE状态变化
    93.     peerConnB.addEventListener('iceconnectionstatechange', this.onIceStateChangeB);
    94.  
    95.     //监听track事件,可以获取到远端视频流
    96.     peerConnB.addEventListener('track', this.gotRemoteStream);
    97.  
    98.     //peerConnA.addStream(localStream);
    99.     //循环迭代本地流的所有轨道
    100.     localStream.getTracks().forEach((track) => {
    101.       //把音视频轨道添加到连接里去
    102.       peerConnA.addTrack(track, localStream);
    103.     });
    104.     console.log('将本地流添加到peerConnA里');
    105.  
    106.     try {
    107.       console.log('peerConnA创建提议Offer开始');
    108.       //创建提议Offer
    109.       const offer = await peerConnA.createOffer();
    110.       //创建Offer成功
    111.       await this.onCreateOfferSuccess(offer);
    112.     } catch (e) {
    113.       //创建Offer失败
    114.       this.onCreateSessionDescriptionError(e);
    115.     }
    116.   }
    117.  
    118.   //创建会话描述错误
    119.   onCreateSessionDescriptionError = (error) => {
    120.     console.log(`创建会话描述SD错误: ${error.toString()}`);
    121.   }
    122.  
    123.   //创建提议Offer成功
    124.   onCreateOfferSuccess = async (desc) => {
    125.     //peerConnA创建Offer返回的SDP信息
    126.     console.log(`peerConnA创建Offer返回的SDP信息\n${desc.sdp}`);
    127.     console.log('设置peerConnA的本地描述start');
    128.     try {
    129.       //设置peerConnA的本地描述
    130.       await peerConnA.setLocalDescription(desc);
    131.       this.onSetLocalSuccess(peerConnA);
    132.     } catch (e) {
    133.       this.onSetSessionDescriptionError();
    134.     }
    135.  
    136.     console.log('peerConnB开始设置远端描述');
    137.     try {
    138.       //设置peerConnB的远端描述
    139.       await peerConnB.setRemoteDescription(desc);
    140.       this.onSetRemoteSuccess(peerConnB);
    141.     } catch (e) {
    142.       //创建会话描述错误
    143.       this.onSetSessionDescriptionError();
    144.     }
    145.  
    146.     console.log('peerConnB开始创建应答Answer');
    147.     try {
    148.       //创建应答Answer
    149.       const answer = await peerConnB.createAnswer();
    150.       //创建应答成功
    151.       await this.onCreateAnswerSuccess(answer);
    152.     } catch (e) {
    153.       //创建会话描述错误
    154.       this.onCreateSessionDescriptionError(e);
    155.     }
    156.   }
    157.  
    158.   //设置本地描述完成
    159.   onSetLocalSuccess = (pc) => {
    160.     console.log(`${this.getName(pc)}设置本地描述完成:setLocalDescription`);
    161.   }
    162.  
    163.   //设置远端描述完成
    164.   onSetRemoteSuccess = (pc) => {
    165.     console.log(`${this.getName(pc)}设置远端描述完成:setRemoteDescription`);
    166.   }
    167.  
    168.   //设置描述SD错误
    169.   onSetSessionDescriptionError = (error) => {
    170.     console.log(`设置描述SD错误: ${error.toString()}`);
    171.   }
    172.  
    173.   getName = (pc) => {
    174.     return (pc === peerConnA) ? 'peerConnA' : 'peerConnB';
    175.   }
    176.  
    177.   //获取到远端视频流
    178.   gotRemoteStream = (e) => {
    179.     if (remoteVideo.srcObject !== e.streams[0]) {
    180.       //取集合第一个元素
    181.       remoteVideo.srcObject = e.streams[0];
    182.       console.log('peerConnB开始接收远端流');
    183.     }
    184.   }
    185.  
    186.   //创建应答成功
    187.   onCreateAnswerSuccess = async (desc) => {
    188.     //输出SDP信息
    189.     console.log(`peerConnB的应答Answer数据:\n${desc.sdp}`);
    190.     console.log('peerConnB设置本地描述开始:setLocalDescription');
    191.     try {
    192.       //设置peerConnB的本地描述信息
    193.       await peerConnB.setLocalDescription(desc);
    194.       this.onSetLocalSuccess(peerConnB);
    195.     } catch (e) {
    196.       this.onSetSessionDescriptionError(e);
    197.     }
    198.     console.log('peerConnA设置远端描述开始:setRemoteDescription');
    199.     try {
    200.       //设置peerConnA的远端描述,即peerConnB的应答信息
    201.       await peerConnA.setRemoteDescription(desc);
    202.       this.onSetRemoteSuccess(peerConnA);
    203.     } catch (e) {
    204.       this.onSetSessionDescriptionError(e);
    205.     }
    206.   }
    207.  
    208.   //Candidate事件回调方法
    209.   onIceCandidateA = async (event) => {
    210.     try {
    211.       if(event.candidate){
    212.         //将会peerConnA的Candidate添加至peerConnB里
    213.         await peerConnB.addIceCandidate(event.candidate);
    214.         this.onAddIceCandidateSuccess(peerConnB);
    215.       }
    216.     } catch (e) {
    217.       this.onAddIceCandidateError(peerConnB, e);
    218.     }
    219.     console.log(`IceCandidate数据:\n${event.candidate ? event.candidate.candidate : '(null)'}`);
    220.   }
    221.  
    222.   //Candidate事件回调方法
    223.   onIceCandidateB = async (event) => {
    224.     try {
    225.       if(event.candidate){
    226.         //将会peerConnB的Candidate添加至peerConnA里
    227.         await peerConnA.addIceCandidate(event.candidate);
    228.         this.onAddIceCandidateSuccess(peerConnA);
    229.       }
    230.     } catch (e) {
    231.       this.onAddIceCandidateError(peerConnA, e);
    232.     }
    233.     console.log(`IceCandidate数据:\n${event.candidate ? event.candidate.candidate : '(null)'}`);
    234.   }
    235.  
    236.   //添加Candidate成功
    237.   onAddIceCandidateSuccess = (pc) => {
    238.     console.log(`${this.getName(pc)}添加IceCandidate成功`);
    239.   } 
    240.  
    241.   //添加Candidate失败
    242.   onAddIceCandidateError = (pc, error) => {
    243.     console.log(`${this.getName(pc)}添加IceCandidate失败: ${error.toString()}`);
    244.   }
    245.  
    246.   //监听ICE状态变化事件回调方法
    247.   onIceStateChangeA = (event) => {
    248.     console.log(`peerConnA连接的ICE状态: ${peerConnA.iceConnectionState}`);
    249.     console.log('ICE状态改变事件: ', event);
    250.   }
    251.  
    252.   //监听ICE状态变化事件回调方法
    253.   onIceStateChangeB = (event) => {
    254.     console.log(`peerConnB连接的ICE状态: ${peerConnB.iceConnectionState}`);
    255.     console.log('ICE状态改变事件: ', event);
    256.   }
    257.  
    258.   //断开连接
    259.   hangup = () => {
    260.     console.log('结束会话');
    261.     //关闭peerConnA
    262.     peerConnA.close();
    263.     //关闭peerConnB
    264.     peerConnB.close();
    265.     //peerConnA置为空
    266.     peerConnA = null;
    267.     //peerConnB置为空
    268.     peerConnB = null;
    269.   }
    270.  
    271.   render() {
    272.     return (
    273.       <div className="container">
    274.         <h1>
    275.           <span>RTCPeerConnection示例span>
    276.         h1>
    277.         {/* 本地视频 */}
    278.         <video ref="localVideo" playsInline autoPlay muted>video>
    279.         {/* 远端视频 */}
    280.         <video ref="remoteVideo" playsInline autoPlay>video>
    281.         <div>
    282.         <Button ref="startButton" onClick={this.start} style={{marginRight:"10px"}}>开始Button>
    283.         <Button ref="callButton" onClick={this.call} style={{marginRight:"10px"}}>呼叫Button>
    284.         <Button ref="hangupButton" onClick={this.hangup} style={{marginRight:"10px"}}>挂断Button>
    285.         div>
    286.       div>
    287.     );
    288.   }
    289. }
    290. //导出组件
    291. export default PeerConnection;

       

          

  • 相关阅读:
    跳出打工圈！程序员要如何走上创业逆袭路，获得财富自由
    【前段基础入门之】=＞CSS 的常用属性
    14种神笔记方法，只需选择1招，让你的学习和工作效率提高100倍！
    暑假学习IB课程，怎么学？
    面试经典150题——Day17
    Cognex Visionpro-9.5 software handbook translate
    基于Java毕业设计云盘系统修改密码演示2021源码+系统+mysql+lw文档+部署软件
    harbor v1.7.1镜像仓库无法访问，并提示502 Bad Gateway
    【机器学习+NER】手把手教你用机器学习CRF模型构建NER系统（CCL2021）
    ​力扣解法汇总641-设计循环双端队列
  • 原文地址：https://blog.csdn.net/ch_s_t/article/details/141256221