WebRTC播放组件之 srs.sdk.js 利用与详述

1、简介

webrtc流媒体的播放，本质上也是基于建立端到端的RTC连接、接收推送过来的视频流数据的过程。webrtc流地址本质上就具有很强的规则性，此中包含信令服务器地址、基本参数等。
SRS（Simple Real-Time Media Server）是一个强大的开源的流媒体服务器， webrtcs视频流的播放自己就是一个订阅（播放）的过程，因此 SRS 源码中自然包含播放的代码，即 srs.sdk.js
srs.sdk.js 是基于 SRS 实时视频服务器、对欣赏器支持的 WebRTC 基础功能的封装。

• github 地址
  

2、利用

2.1、引入

   

• 从官网下载好 srs.sdk.js 文件，将此文件放入项目中的静态文件夹；
  
• 通过 CDN 方式引入，即 例： <script src="./static/webrtc/srs.sdk.js"></script>
  
• 暴露出实现函数 SrsRtcPlayerAsync 
  

  2.2、函数说明

• 通过构造函数 SrsRtcPlayerAsync 实例化出对象（本文用 sdk 定义），
  
• 对象的属性：pc -- RTCPeerConnection() 实例化对象；stream -- 实例化MediaStream()对象
  
• 对象的方法：play() -- 初始化播放的代码；close() -- 关闭播放的方法
  

2.3、基本实当代码

下面是基本的实当代码，在 vue 中的写法

1.     <video
2.         width="100%"
3.         height="100%"
4.         autoplay
5.         muted
6.         class="screen-full-db"
7.         :id="`webrtc-video-${uid}`"
8.     ></video>

复制代码

1.             // 获取实例化对象，参数传入失败回调函数
2.             this.sdk = new SrsRtcPlayerAsync(this.sdkInitError);
3.             // 监听 webrtc 建立状态
4.             this.sdk.pc.addEventListener("iceconnectionstatechange", data => {
5.                 if (data.target.iceConnectionState == "disconnected") {
6.                     this.$emit("disconnected");
7.                 }
8.             });
9.             // 将获取的视频流 给 video 的 srcObject
10.             $(`#webrtc-video-${this.uid}`).prop("srcObject", this.sdk.stream);
12.             // 初始化代码
13.             try {
14.                 // play() 初始化播放代码，参数：webrtc流地址
15.                 this.sdk.play(this.src).then(
16.                     res => {}
17.                 )
18.             } catch (error) {
19.                 // 错误回调
21.             }
23.             // 关闭播放器
24.             this.sdk.close();

复制代码

再简化一下：

1.         let sdk = new SrsRtcPlayerAsync(sdkInitErrorCallback);
2.         $(`#webrtc-video-id`).prop("srcObject", sdk.stream);
3.         sdk.play(src)

复制代码

基本实现就基本完成了，十分的简单轻便。

3、源码简述

   这一部分会源码进行基本的介绍，源码也是十分的普通易懂。
   3.1、基本布局

1.         function SrsRtcPlayerAsync() {
2.             var self = {};
4.             // Close the player.
5.             self.play = async function (url) { }
7.             // The callback when got remote track.
8.             // Note that the onaddstream is deprecated, @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onaddstream
9.             self.ontrack = function (event) {}
11.             // Internal APIs.
12.             self.__internal = {}
14.             self.pc = new RTCPeerConnection(null);
16.             // Create a stream to add track to the stream, @see https://webrtc.org/getting-started/remote-streams
17.             self.stream = new MediaStream();
19.             // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
20.             self.pc.ontrack = function (event) {}
21.             return self;
22.         }

复制代码

  函数的基本布局没什么好讲的，重要留意一个小tip，通过实例化去 new 这个函数，函数有返回值且为引用类型，实例化对象就是返回的对象。
  3.2、play 方法

重要看 play 方法具体怎样实现：

1.             self.play = async function (url) {
2.                 var conf = self.__internal.prepareUrl(url);
3.                 self.pc.addTransceiver("audio", { direction: "recvonly" });
4.                 self.pc.addTransceiver("video", { direction: "recvonly" });
5.                 //self.pc.addTransceiver("video", {direction: "recvonly"});
6.                 //self.pc.addTransceiver("audio", {direction: "recvonly"});
8.                 var offer = await self.pc.createOffer();
9.                 await self.pc.setLocalDescription(offer);
10.                 var session = await new Promise(function (resolve, reject) {
11.                     // @see https://github.com/rtcdn/rtcdn-draft
12.                     var data = {
13.                         api: conf.apiUrl, tid: conf.tid, streamurl: conf.streamUrl,
14.                         clientip: null, sdp: offer.sdp
15.                     };
16.                     console.log("Generated offer: ", data);
18.                     const xhr = new XMLHttpRequest();
19.                     xhr.onload = function () {
20.                         if (xhr.readyState !== xhr.DONE) return;
21.                         if (xhr.status !== 200 && xhr.status !== 201) return reject(xhr);
22.                         const data = JSON.parse(xhr.responseText);
23.                         console.log("Got answer: ", data);
24.                         return data.code ? reject(xhr) : resolve(data);
25.                     }
26.                     xhr.open('POST', conf.apiUrl, true);
27.                     xhr.setRequestHeader('Content-type', 'application/json');
28.                     xhr.send(JSON.stringify(data));
29.                 });
30.                 await self.pc.setRemoteDescription(
31.                     new RTCSessionDescription({ type: 'answer', sdp: session.sdp })
32.                 );
33.                 session.simulator = conf.schema + '//' + conf.urlObject.server + ':' + conf.port + '/rtc/v1/nack/';
35.                 return session;
36.             };

复制代码

• 一开始调用 __internal 对象中 prepareUrl 方法，通过 webrtc 流地址分析得到信令服务器URL地址，从而完成媒体协商。前面说过webrtc的流地址是规则性很强的，在SRS的源码内里体现了。这里如果信令服务器不是通过webrtc地址获取的，可以自行在代码中修改。
  
• 获取当地SDP，开始媒体协商请求，拿到远程SDP,并设置。
  
• 返回SDP信息。
  

3.3、ontrack

1.             self.pc.ontrack = function (event) {
2.                 if (self.ontrack) {
3.                     self.ontrack(event);
4.                 }
5.             };
6.             self.ontrack = function (event) {
7.                 // https://webrtc.org/getting-started/remote-streams
8.                 self.stream.addTrack(event.track);
9.             };

复制代码

pc.ontrack 回调事件监听媒体流数据,并添加track到stream。
webrtc 播放还可以利用 jswebrtc.js 库，可看：WebRTC播放组件之 jswebrtc 利用与详述

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。