WebRTC播放组件之 jswebrtc 使用与详述

•  前言：jswebrtc 作为 WebRTC 常用的播放库，已经有不少文章介绍他的使用方法，本文目的在尽可能详尽的介绍 总结 介绍 jswebrtc 的用法以及对库源代码的简单介绍。 

1、简介

• gitHub 地址 
• gitee地址（gitHub地址一般访问不上，这里找到一个可用的 gitee 地址）（推荐使用）
• WebRTC (Web Real-Time Communications) 是 RTC 的一部分，是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流/音频流或者其他任意数据的传输。
• JSWebrtc 是基于 SRS 实时视频服务器、对浏览器支持的 WebRTC 基础功能的封装。

2、使用

2.1、引入

在上面的地址中将代码下载，找到 jswebrtc.min.js 文件，并将文件通过<script>引入就行

通过 gitee 下载的，文件在 dist/ 文件夹下面

2.2、基本使用

    let webrtcPlayer = new JSWebrtc.Player(url, {
        video: video,
        autoplay: true,
        onPlay: obj => {},
        onPause:obj => {}
      })

调用 JSWebrtc 对象的 Player 方法，实例化一个播放器对象。

参数包括 url 和 option

• url:  webrtc 流地址（格式：例;webrtc://xxxx:xxx/xxx/xxx,如果不是以 webrtc:// 开头的格式会报错：JSWebrtc just work with webrtc） 
• option：配置项对象，包括：

• video ：播放标签元素：不传会报错：VideoElement is null

• autoplay：是否自动播放

• onPlay：播放时回调

• onPause：暂停时回调

主要方法： 

方法	说明
play()	播放方法
pause()	暂停
stop()	暂停，跟 pause() 用法一样
destroy()	销毁

 以上就是 jswebrtc 这个库播放 webrtc 流的方法，就是这么简单。

2.3、第二种使用方式

通过查看 jswebrtc 源代码之后，发现其实 它提供了第二种 基于元素标签的 data-set 集的方法，但是使用起来没有第一种方便，所以这里将这种方法做下记录，还是推荐使用 2.2 中的基本方法。

此方法仅做了解即可，可不看直接跳过。

先看这个标签：

<div class="jswebrtc"  data-url="url" data-autoplay="true" data-on-play="onplay"></div>

• 必须要有 类名为 jswebrtc 的类，可以有多个
• data-后面的值对应其 JSWebrtc 对象的 Player 的参数及配置项
• 拿到 element 的元素，元素上有 element.playerInstance 属性就是一个 实例化出的 JSWebrtc 对象的 Player
• element.playerInstance 可以拿到所有方法

如果对这个方法感兴趣的可以一起看下面源码的介绍（如果发现讲的不对的希望指正，共同学习）

3、源码介绍

这里就不贴源码了，感兴趣的可自行去 gitee 查看，如果只是使用， 这部分可以 略过 。

3.1、结构

通过 gitee 查看项目： dist/ 是压缩打包之后的代码，源代码在 src/ 文件夹下面：

全局对象 JSWebrtc，Player 与 VideoElement 为 JSWebrtc 方法。

3.2、Player

主要看 palyer.js ，截取初始化的代码：

        JSWebrtc.Player = function () {
            "use strict";
            var Player = function (url, options) {
                this.options = options || {};
                if (!url.match(/^webrtc?:\/\//)) {
                    throw "JSWebrtc just work with webrtc"
                }
                if (!this.options.video) {
                    throw "VideoElement is null"
                }
                this.urlParams = JSWebrtc.ParseUrl(url);
                this.pc = null;
                this.autoplay = !!options.autoplay || false;
                this.paused = true;
                if (this.autoplay) this.options.video.muted = true;
                this.startLoading()
            };

            // -------***------------
            return Player
        }

new JSWebrtc.Player() 本质就是先调用JSWebrtc.Player方法，返回一个构造函数，然后实例化它，上面的代码对 url 和 options 做了校验，所以为什么有时候会出现报错。

下面是 webrtc 连接并获取流媒体播放的主要代码，这里贴一下：

        Player.prototype.startLoading = function () {
            var _self = this;
            if (_self.pc) {
                _self.pc.close()
            }
            _self.pc = new RTCPeerConnection(null);
            _self.pc.ontrack = function (event) {
                _self.options.video["srcObject"] = event.streams[0]
            };
            _self.pc.addTransceiver("audio", {
                direction: "recvonly"
            });
            _self.pc.addTransceiver("video", {
                direction: "recvonly"
            });
            _self.pc.createOffer().then(function (offer) {
                return _self.pc.setLocalDescription(offer).then(function () {
                    return offer
                })
            }).then(function (offer) {
                return new Promise(function (resolve, reject) {
                    var port = _self.urlParams.port || 1985;
                    var api = _self.urlParams.user_query.play || "/rtc/v1/play/";
                    if (api.lastIndexOf("/") != api.length - 1) {
                        api += "/"
                    }
                    var url = "http://" + _self.urlParams.server + ":" + port + api;
                    for (var key in _self.urlParams.user_query) {
                        if (key != "api" && key != "play") {
                            url += "&" + key + "=" + _self.urlParams.user_query[key]
                        }
                    }
                    var data = {
                        api: url,
                        streamurl: _self.urlParams.url,
                        clientip: null,
                        sdp: offer.sdp
                    };
                    // console.log("offer: " + JSON.stringify(data));
                    JSWebrtc.HttpPost(url, JSON.stringify(data)).then(function (res) {
                        // console.log("answer: " + JSON.stringify(res));
                        resolve(res.sdp)
                    }, function (rej) {
                        reject(rej)
                    })
                })
            }).then(function (answer) {
                return _self.pc.setRemoteDescription(new RTCSessionDescription({
                    type: "answer",
                    sdp: answer
                }))
            }).catch(function (reason) {
                throw reason
            });
            if (this.autoplay) {
                this.play()
            }
        };

方法中包含一个长串的链式调用，逐步来看

• 先通过 new RTCPeerConnection(null) 创建连接实例对象pc ，并添加进 Player 的实例化对象身上。

• pc.ontrack 回调事件监听媒体流数据，并通过video.srcObject 播放

• pc.createOffer() 创建本地媒体协商信息 SDP offer, 获取成功之后 通过pc.setLocalDescription 进行本地设置 

• 接下来的回调主要通过 HttpPost 将 SDP offer 发送到信令服务器，完成媒体协商。 

• 媒体协商完成后通过 pc.setRemoteDescription 进行远程设置  

• 以上就完成了 一次 webrtc 端到端的连接

其他方法可以查看源码了解，代码很通俗易懂。

3.3、VideoElement

简单介绍一下这个对象，主要实现代码缩减之后贴一下：

        var JSWebrtc = {
            CreateVideoElements: function () {
                var elements = document.querySelectorAll(".jswebrtc");
                for (var i = 0; i < elements.length; i++) {
                    new JSWebrtc.VideoElement(elements[i])
                }
            },
        }


        JSWebrtc.VideoElement = function () {
            "use strict";
            var VideoElement = function (element) {
                var url = element.dataset.url;
                if (!url) {
                    throw "VideoElement has no `data-url` attribute"
                }
                this.container = element;
                this.video = document.createElement("video");
                this.video.width = 960;
                this.video.height = 540;

                this.container.appendChild(this.video);
                var options = {
                    video: this.video
                };
                for (var option in element.dataset) {
                    try {
                        options[option] = JSON.parse(element.dataset[option])
                    } catch (err) {
                        options[option] = element.dataset[option]
                    }
                }
                this.player = new JSWebrtc.Player(url, options);
                element.playerInstance = this.player;
            };
            return VideoElement
        }();

基本实现在贴出来的代码直接可以读出来，这里不赘述了，另外这个对象上内置了一下例如开始暂停的按钮，有兴趣可以看看代码，自己运行下。

4、总结

这个库的使用其实很简单，只需要掌握 2.1、  2.2 里面的内容，其他的都是做的一些拓展。

参考及引用：

 webRtc 流媒体播放-vue

一文详解 WebRTC 基础