JSWebrtc.js +对应视频实例化

 HTML

<div class="context">
    <video id="video-webrtc" controls autoplay poster="images/nosigna.png"></video>
</div>

 CSS 

#video-webrtc {
	width: 300px;
	min-height: 400px;
}

JS  处理视频资源流   资源流处理文件，只需要放入JS内即可

 var JSWebrtc = {
        Player: null,
        VideoElement: null,
        CreateVideoElements: function () {
            var elements = document.querySelectorAll(".jswebrtc");
            for (var i = 0; i < elements.length; i++) {
                new JSWebrtc.VideoElement(elements[i])
            }
        },
        FillQuery: function (query_string, obj) {
            obj.user_query = {};
            if (query_string.length == 0)
                return;
            if (query_string.indexOf("?") >= 0)
                query_string = query_string.split("?")[1];
            var queries = query_string.split("&");
            for (var i = 0; i < queries.length; i++) {
                var query = queries[i].split("=");
                obj[query[0]] = query[1];
                obj.user_query[query[0]] = query[1]
            }
            if (obj.domain) obj.vhost = obj.domain
        },
        ParseUrl: function (rtmp_url) {
            var a = document.createElement("a");
            a.href = rtmp_url.replace("rtmp://", "http://").replace("webrtc://", "http://").replace("rtc://", "http://");
            var vhost = a.hostname;
            var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
            var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
            app = app.replace("...vhost...", "?vhost=");
            if (app.indexOf("?") >= 0) {
                var params = app.substr(app.indexOf("?"));
                app = app.substr(0, app.indexOf("?"));
                if (params.indexOf("vhost=") > 0) {
                    vhost = params.substr(params.indexOf("vhost=") + "vhost=".length);
                    if (vhost.indexOf("&") > 0) {
                        vhost = vhost.substr(0, vhost.indexOf("&"))
                    }
                }
            }

            if (a.hostname == vhost) {
                var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
                if (re.test(a.hostname))
                    vhost = "__defaultVhost__"
            }
            var schema = "rtmp";
            if (rtmp_url.indexOf("://") > 0)
                schema = rtmp_url.substr(0, rtmp_url.indexOf("://"));
            var port = a.port;
            if (!port) {
                if (schema === "http") {
                    port = 80
                } else if (schema === "https") {
                    port = 443
                } else if (schema === "rtmp") {
                    port = 1935
                } else if (schema === "webrtc" || schema === "rtc") {
                    port = 1985
                }
            }

            var ret = { url: rtmp_url, schema: schema, server: a.hostname, port: port, vhost: vhost, app: app, stream: stream };
            JSWebrtc.FillQuery(a.search, ret);
            return ret
        },

        HttpPost: function (url, data) {
            return new Promise(function (resolve, reject) {
                var xhr = new XMLHttpRequest;
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
                        var respone = JSON.parse(xhr.responseText);
                        xhr.onreadystatechange = new Function;
                        xhr = null; resolve(respone)
                    }
                };
                xhr.open("POST", url, true);
                xhr.timeout = 5e3;
                xhr.responseType = "text";
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.send(data)
            })
        }
    };


    if (document.readyState === "complete") {
        JSWebrtc.CreateVideoElements()
    } else {
        document.addEventListener("DOMContentLoaded", JSWebrtc.CreateVideoElements)
    }
    JSWebrtc.VideoElement = function () {
        "use strict";
        var VideoElement = function (element) {
            var url = element.dataset.url;
            if (!url) {
                throw "VideoElement has no `data-url` attribute"
            }
            var addStyles = function (element, styles) {
                for (var name in styles) {
                    element.style[name] = styles[name]
                }
            };
            this.container = element;
            addStyles(this.container,
                { display: "inline-block", position: "relative", minWidth: "80px", minHeight: "80px" }
            );
            this.video = document.createElement("video");
            this.video.width = 300;
            this.video.height = 300;
            addStyles(this.video,
                { display: "block", width: "100%" }
            );
            this.container.appendChild(this.video);
            this.playButton = document.createElement("div");
            this.playButton.innerHTML = VideoElement.PLAY_BUTTON;
            addStyles(this.playButton,
                { zIndex: 2, position: "absolute", top: "0", bottom: "0", left: "0", right: "0", maxWidth: "75px", maxHeight: "75px", margin: "auto", opacity: "0.7", cursor: "pointer" }
            );

            this.container.appendChild(this.playButton);
            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;
            if (options.poster && !options.autoplay) {
                options.decodeFirstFrame = false;
                this.poster = new Image;
                this.poster.src = options.poster;
                this.poster.addEventListener("load", this.posterLoaded);
                addStyles(this.poster, { display: "block", zIndex: 1, position: "absolute", top: 0, left: 0, bottom: 0, right: 0 });
                this.container.appendChild(this.poster)
            }
            if (!this.player.options.streaming) {
                this.container.addEventListener("click", this.onClick.bind(this))
            }
            if (options.autoplay) {
                this.playButton.style.display = "none"
            }
            if (this.player.audioOut && !this.player.audioOut.unlocked) {
                var unlockAudioElement = this.container;
                if (options.autoplay) {
                    this.unmuteButton = document.createElement("div");
                    this.unmuteButton.innerHTML = VideoElement.UNMUTE_BUTTON;
                    addStyles(this.unmuteButton, { zIndex: 2, position: "absolute", bottom: "10px", right: "20px", width: "75px", height: "75px", margin: "auto", opacity: "0.7", cursor: "pointer" });
                    this.container.appendChild(this.unmuteButton);
                    unlockAudioElement = this.unmuteButton
                }
                this.unlockAudioBound = this.onUnlockAudio.bind(this, unlockAudioElement);
                unlockAudioElement.addEventListener("touchstart", this.unlockAudioBound, false);
                unlockAudioElement.addEventListener("click", this.unlockAudioBound, true)
            }
        };

        VideoElement.prototype.onUnlockAudio = function (element, ev) {
            if (this.unmuteButton) {
                ev.preventDefault();
                ev.stopPropagation()
            }
            this.player.audioOut.unlock(function () {
                if (this.unmuteButton) {
                    this.unmuteButton.style.display = "none"
                }
                element.removeEventListener("touchstart", this.unlockAudioBound);
                element.removeEventListener("click", this.unlockAudioBound)
            }.bind(this))
        };
        VideoElement.prototype.onClick = function (ev) {
            if (this.player.isPlaying) {
                this.player.pause();
                this.playButton.style.display = "block"
            } else {
                this.player.play();
                this.playButton.style.display = "none";
                if (this.poster) {
                    this.poster.style.display = "none"
                }
            }
        };
        VideoElement.PLAY_BUTTON = '<svg style="max-width: 75px; max-height: 75px;" ' + 'viewBox="0 0 200 200" alt="Play video">' + '<circle cx="100" cy="100" r="90" fill="none" ' + 'stroke-width="15" stroke="#fff"/>' + '<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>' + "</svg>";
        VideoElement.UNMUTE_BUTTON = '<svg style="max-width: 75px; max-height: 75px;" viewBox="0 0 75 75">' + '<polygon class="audio-speaker" stroke="none" fill="#fff" ' + 'points="39,13 22,28 6,28 6,47 21,47 39,62 39,13"/>' + '<g stroke="#fff" stroke-width="5">' + '<path d="M 49,50 69,26"/>' + '<path d="M 69,50 49,26"/>' + "</g>" + "</svg>";
        return VideoElement
    }();
    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()
        };

        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()
            }
        };

        Player.prototype.play = function (ev) {
            if (this.animationId) {
                return
            } this.animationId = requestAnimationFrame(this.update.bind(this));
            this.paused = false
        };
        Player.prototype.pause = function (ev) {
            if (this.paused) {
                return
            } cancelAnimationFrame(this.animationId);
            this.animationId = null;
            this.isPlaying = false;
            this.paused = true;
            this.options.video.pause();
            if (this.options.onPause) {
                this.options.onPause(this)
            }
        };
        Player.prototype.stop = function (ev) {
            this.pause()
        };
        Player.prototype.destroy = function () {
            this.pause();
            this.pc && this.pc.close() && this.pc.destroy();
            this.audioOut && this.audioOut.destroy()
        };
        Player.prototype.update = function () {
            this.animationId = requestAnimationFrame(this.update.bind(this));
            if (this.options.video.readyState < 4) {
                return
            } if (!this.isPlaying) {
                this.isPlaying = true;
                this.options.video.play;
                //this.options.video.play() //自己修改部分 用处未知
                if (this.options.onPlay) {
                    this.options.onPlay(this)
                }
            }
        };
        return Player
    }();

JS视频实例化对象   在需要实例化视频播放的位置插入即可 

var video = document.getElementById('video-webrtc');
var url = ‘你的视频地址’;
var player = new JSWebrtc.Player(url, {
    video: video,
    autoplay: true,
    onPlay: (obj) => {
    // video.muted = false //此项设置静音播放
    // console.log("start play")
    }
});