ipole_front/public/util/jswebrtc.min.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;
		// console.log("vhost---------"+window.location.host)
        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
            }
        }
		if(window.location.host == 'cloud.long-chi.com') {
			port = 443
		}
        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 = 960;
        this.video.height = 540;
        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;
				if(window.location.host == 'cloud.long-chi.com') {
					url = 'https://cloud.long-chi.com/rtc/v1/play/'
				}
                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();
            if (this.options.onPlay) {
                this.options.onPlay(this)
            }
        }
    };
    return Player
}();