A signaling server for GB28181

2024-04-17 14:31:33 +08:00
parent 8774b234b4
commit 0b7126b12b
50 changed files with 11136 additions and 1 deletions
--- a/web/html/index.html
+++ b/web/html/index.html
@ -0,0 +1,865 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>DEMO</title>   
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
+    <style>
+        body{
+            padding-top: 30px;
+        }
+        #my_modal_footer {
+            margin-top: -20px;
+            padding-top: 3px;
+        }
+        #main_modal {
+            margin-top: -60px;
+        }
+        #rtc_player_modal {
+            margin-top: -60px;
+        }
+        .div_play_time {
+            margin-top: 10px;
+        }
+        #pb_buffer_bg {
+            margin-top: -4px;
+            margin-bottom: 10px;
+        }
+    </style>
+</head>
+<body>
+<img src=' '/>
+<div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+        <div class="container">
+            <a id="srs_index" class="brand" href="#">DEMO</a>
+            <div class="nav-collapse collapse">
+                <ul class="nav">
+                    <li class="active" ><a id="nav_gb28181" href="srs_gb28181.html">GB28181</a></li>
+                    <li>
+                        <a href="https://github.com/ossrs/srs">
+                            <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/srs?style=social">
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container">
+    <div name="detect_flash">
+        <div id="main_flash_alert" class="alert alert-danger fade in hide">
+            <button type="button" class="close" data-dismiss="alert">×</button>
+            <strong><p>Usage:</p></strong>
+            <p>
+                请点击下面的图标，启用Flash
+            </p>
+            <p>
+                若没有见到这个图标，Chrome浏览器请打开
+                <span class="text-info">chrome://settings/content/flash</span> 并修改为"Ask first"。
+            </p>
+        </div>
+        <div id="main_flash_hdr" class="hide">
+        </div>
+    </div>
+
+    <div class="form-inline">
+        API地址与端口
+        <input type="text" id="txt_api_url" class="input-xxlarge">
+        <p></p>
+      
+    </div>
+
+    <div>
+        <div class="row">
+            <div class="span4" id="divSipSessionList">
+                <span>设备列表</span><label id="lab_sip_session"></label>
+                <div style="overflow:scroll; height:330px; width:310px">
+                 <ul id="channelList"></ul>
+                </div>
+                
+
+            </div>
+            <div class="span8">
+                <button class="btn btn-primary" id="btn_query_channel">获取设备</button>
+                <button class="btn btn-primary" id="btn_sip_bye">bye</button>
+                <button class="btn btn-primary" id="btn_sip_querycatalog" style="display:none;">querycatalog</button>
+                <div id="context2">
+                  <div>
+                    <pre id="video"  style="overflow:scroll; height:280px"></pre>
+                  </div>
+               </div>
+            </div>
+        </div>
+      </div>
+      <p></p>
+
+      <div>
+        <div class="row">
+            <div class="span4" id="divMediaChannelList">             
+            </div>
+            <div class="span8">
+                <div id="context2">
+                  URL:<a id="gb28181ChannelId"></a>
+                  <div>
+                    <textarea class="span6" id="txt_rtc_url" rows="2"></textarea>
+                    <button class="btn btn-primary" id="btn_rtc_play">RTC播放</button>
+                  </div>
+                  <div>
+                    <div>Message</div>
+                    <pre id="apiMessage"  style="overflow:scroll; height:210px"></pre>
+                  </div>
+               </div>
+            </div>
+        </div>
+      </div>
+
+      <div id="main_content" class="hide">
+        <div id="main_modal" class="modal hide fade">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3><a href="https://github.com/ossrs/srs">SrsFlvPlayer</a></h3>
+            </div>
+            <div class="modal-body">
+                <div>
+                    <video id="video_player" width="98%" autoplay controls></video>
+                </div>
+            </div>
+            <div class="modal-footer" id="my_modal_footer">
+                <div>
+                    <div class="btn-group dropup">
+                        <button class="btn btn-primary" id="btn_ptz_up"> 上↑ </button>
+                        <button class="btn btn-primary" id="btn_ptz_down"> 下↓ </button>
+                        <button class="btn btn-primary" id="btn_ptz_left"> ←左 </button>
+                        <button class="btn btn-primary" id="btn_ptz_right"> 右→ </button>
+                        <button class="btn btn-primary" id="btn_ptz_zoomin"> 放大＋ </button>
+                        <button class="btn btn-primary" id="btn_ptz_zoomout"> 缩小－ </button>
+                    </div>    
+                </div>
+            </div>
+        </div>
+
+        <div id="rtc_player_modal" class="modal hide fade">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3><a href="https://github.com/ossrs/srs">RtcPlayer</a></h3>
+            </div>
+            <div class="modal-body">
+                <video id="rtc_media_player" width="100%" controls autoplay ></video>
+            </div>
+            <div class="modal-footer" id="my_modal_footer">
+                <div>
+                    <div class="btn-group dropup">
+                        <button class="btn btn-primary" id="btn_ptz_up_rtc"> 上↑ </button>
+                        <button class="btn btn-primary" id="btn_ptz_down_rtc"> 下↓ </button>
+                        <button class="btn btn-primary" id="btn_ptz_left_rtc"> ←左 </button>
+                        <button class="btn btn-primary" id="btn_ptz_right_rtc"> 右→ </button>
+                        <button class="btn btn-primary" id="btn_ptz_zoomin_rtc"> 放大＋ </button>
+                        <button class="btn btn-primary" id="btn_ptz_zoomout_rtc"> 缩小－ </button>
+                    </div>    
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <footer>
+        <p></p>
+        <p><a href="https://github.com/ossrs/srs">SRS Team &copy; 2013</a></p>
+    </footer>
+</div>
+</body>
+<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
+<script type="text/javascript" src="js/bootstrap.min.js"></script>
+<script type="text/javascript" src="js/json2.js"></script>
+<script type="text/javascript" src="js/srs.page.js"></script>
+<script type="text/javascript" src="js/srs.log.js"></script>
+<script type="text/javascript" src="js/srs.utility.js"></script>
+<script type="text/javascript" src="js/winlin.utility.js"></script>
+<script type="text/javascript">
+    $(function(){
+        $('#main_content').show();
+        autoLoadPage();
+    });
+</script>
+<script type="text/javascript">
+    var srs_player = null;
+    var url = null;
+
+    var query = parse_query_string();
+    var query_host = query.host.split(':');
+    if (query_host && query_host.length == 2) {
+        $("#txt_api_url").val("http://" + query_host[0] + ":2020");
+    } else {
+        $("#txt_api_url").val("http://" + query.host + ":2020");
+    }
+    var __active_dar = null;
+    function select_dar(dar_id, num, den) {
+        srs_player.set_dar(num, den);
+
+        if (__active_dar) {
+            __active_dar.removeClass("active");
+        }
+
+        __active_dar = $(dar_id).parent();
+        __active_dar.addClass("active");
+    }
+
+    var __active_size = null;
+    function select_fs_size(size_id, refer, percent) {
+        srs_player.set_fs(refer, percent);
+
+        if (__active_size) {
+            __active_size.removeClass("active");
+        }
+
+        __active_size = $(size_id).parent();
+        __active_size.addClass("active");
+    }
+
+    function select_buffer(buffer_time) {
+        var bt = buffer_time;
+        var bt_id = "#btn_bt_" + bt.toFixed(1).replace(".", "_");
+        select_buffer_time(bt_id, bt);
+    }
+    function select_max_buffer(max_buffer_time) {
+        var mbt = max_buffer_time;
+        var mbt_id = "#btn_mbt_" + mbt.toFixed(1).replace(".", "_");
+        select_max_buffer_time(mbt_id, mbt);
+    }
+
+    var __active_bt = null;
+    function select_buffer_time(bt_id, buffer_time) {
+        srs_player.set_bt(buffer_time);
+
+        if (__active_bt) {
+            __active_bt.removeClass("active");
+        }
+
+        __active_bt = $(bt_id).parent();
+        __active_bt.addClass("active");
+
+        select_max_buffer(srs_player.max_buffer_time);
+    }
+
+    var __active_mbt = null;
+    function select_max_buffer_time(mbt_id, max_buffer_time) {
+        srs_player.set_mbt(max_buffer_time);
+
+        if (__active_mbt) {
+            __active_mbt.removeClass("active");
+        }
+
+        __active_mbt = $(mbt_id).parent();
+        __active_mbt.addClass("active");
+    }
+
+
+    //格式化json显示
+    function syntaxHighlight(json) {
+        if (typeof json != 'string') {
+        json = JSON.stringify(json, undefined, 2);
+        }
+        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
+        var cls = 'number';
+        if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+                cls = 'key';
+            } else {
+            cls = 'string';
+            }
+        } else if (/true|false/.test(match)) {
+            cls = 'boolean';
+        } else if (/null/.test(match)) {
+            cls = 'null';
+        }
+        return '<span class="' + cls + '">' + match + '</span>';
+        });
+    }  
+
+    function http_get(url){
+        var retdata = null;
+        console.log("GET", url);
+        $.ajax({
+            type       : "GET",
+            async      : false,
+            url        : url,
+            contentType: "text/html",
+            data       : "",
+            complete   : function() {
+            },
+            error      : function(ret) {
+                alert("GET 请求失败:" + url);
+            },
+            success    : function(ret) {
+                console.log(ret);
+                retdata = ret;
+            }
+        });
+        return retdata;
+    }
+
+    function http_post(url, data){
+        var retdata = null;
+        console.log("POST", url);
+        $.ajax({
+            type       : "POST",
+            async      : false,
+            url        : url,
+            contentType: "application/json",
+            data       : JSON.stringify(data),
+            complete   : function() {
+            },
+            error      : function(ret) {
+                alert("POST 请求失败:" + url);
+            },
+            success    : function(ret) {
+                console.log(ret);
+                retdata = ret;
+            }
+        });
+        return retdata;
+    }
+
+    function getParentIdById(id) {
+        for (let parentId in devices) {
+            let parentDevices = devices[parentId];
+            for (let idx in parentDevices) {
+                if (parentDevices[idx].id == id) {
+                    return parentId;
+                }
+            }
+        }
+        return null;
+    }
+
+
+    // request: {"device_id": "1", "channel_id": "1", "sub_stream": 0}
+    // response: {"code": 0, "data": {"channel_id": "1", "url": "webrtc://"}}
+    function channelOnClick(chidObj){
+        var chId = chidObj.text;
+        var parentId = getParentIdById(chId); 
+        
+        var body = {
+            "device_id": parentId,
+            "channel_id": chId,
+            "sub_stream": "0"
+        };
+        url = $("#txt_api_url").val();
+        var apiurl = url + "/srs-sip/v1/invite";
+        
+        var ret = http_post(apiurl, body);
+        $('#sipSessionMessage').html(syntaxHighlight(ret)); 
+
+        if (ret == undefined || ret.code != 0) {
+            alert("invite请求失败");
+            return;
+        }
+        play(ret.data);
+    } 
+
+    function play(data) {
+        $("#txt_rtc_url").val(data.url);
+        $("#btn_rtc_play").click();
+    }
+
+    function refreshGb28181ChList(data) {
+        $("#channelList").empty();
+        devices = {};
+
+        // 遍历数据，将设备信息按照parent_id进行分组
+        for (let idx in data) {
+            var device = data[idx];
+            var parent = device.parent_id;
+            var id = device.device_id;
+
+            // 如果该parent_id不存在在devices对象中，则创建一个新数组
+            if (!devices[parent]) {
+                devices[parent] = [];
+            }
+
+            // 将设备信息添加到对应的parent_id数组中
+            devices[parent].push({ id: id, ip: device.ip_address, name: device.name});
+        }
+
+        // 遍历devices对象，生成设备树
+        for (let parent in devices) {
+            var parentDevices = devices[parent];
+            var parentLi = "<li>" + parent + "<ul>";
+
+            // 遍历该parent_id下的设备信息
+            parentDevices.forEach(function(device) {
+                var id = device.id;
+                var title = device.name + "(" + device.ip + ")";
+                var childLi = "<li><a id='linkChannelId" + id + "' href='javascript:void(0)' title='" + title + "' onclick='channelOnClick(this)'>" + id + "</a></li>";
+                parentLi += childLi;
+            });
+
+            parentLi += "</ul></li>";
+
+            // 将生成的设备树添加到页面中
+            $("#channelList").append(parentLi);
+        }
+
+    }
+
+    // Async-await-promise based SRS RTC Player.
+    function SrsRtcPlayerAsync() {
+        var self = {};
+
+        // @see https://github.com/rtcdn/rtcdn-draft
+        // @url The WebRTC url to play with, for example:
+        //      webrtc://r.ossrs.net/live/livestream
+        // or specifies the API port:
+        //      webrtc://r.ossrs.net:11985/live/livestream
+        // or autostart the play:
+        //      webrtc://r.ossrs.net/live/livestream?autostart=true
+        // or change the app from live to myapp:
+        //      webrtc://r.ossrs.net:11985/myapp/livestream
+        // or change the stream from livestream to mystream:
+        //      webrtc://r.ossrs.net:11985/live/mystream
+        // or set the api server to myapi.domain.com:
+        //      webrtc://myapi.domain.com/live/livestream
+        // or set the candidate(ip) of answer:
+        //      webrtc://r.ossrs.net/live/livestream?eip=39.107.238.185
+        // or force to access https API:
+        //      webrtc://r.ossrs.net/live/livestream?schema=https
+        // or use plaintext, without SRTP:
+        //      webrtc://r.ossrs.net/live/livestream?encrypt=false
+        // or any other information, will pass-by in the query:
+        //      webrtc://r.ossrs.net/live/livestream?vhost=xxx
+        //      webrtc://r.ossrs.net/live/livestream?token=xxx
+        self.play = async function(url) {
+            var conf = self.__internal.prepareUrl(url);
+            self.pc.addTransceiver("audio", {direction: "recvonly"});
+            self.pc.addTransceiver("video", {direction: "recvonly"});
+
+            var offer = await self.pc.createOffer();
+            await self.pc.setLocalDescription(offer);
+            var session = await new Promise(function(resolve, reject) {
+                // @see https://github.com/rtcdn/rtcdn-draft
+                var data = {
+                    api: conf.apiUrl, streamurl: conf.streamUrl, clientip: null, sdp: offer.sdp
+                };
+                console.log("Generated offer: ", data);
+
+                $.ajax({
+                    type: "POST", url: conf.apiUrl, data: JSON.stringify(data),
+                    contentType:'application/json', dataType: 'json'
+                }).done(function(data) {
+                    console.log("Got answer: ", data);
+                    if (data.code) {
+                        reject(data); return;
+                    }
+
+                    resolve(data);
+                }).fail(function(reason){
+                    reject(reason);
+                });
+            });
+            await self.pc.setRemoteDescription(
+                new RTCSessionDescription({type: 'answer', sdp: session.sdp})
+            );
+            return session;
+        };
+
+        // Close the publisher.
+        self.close = function() {
+            self.pc.close();
+        };
+
+        // The callback when got remote stream.
+        self.onaddstream = function (event) {};
+
+        // Internal APIs.
+        self.__internal = {
+            defaultPath: '/rtc/v1/play/',
+            prepareUrl: function (webrtcUrl) {
+                var urlObject = self.__internal.parse(webrtcUrl);
+
+                // If user specifies the schema, use it as API schema.
+                var schema = urlObject.user_query.schema;
+                schema = schema ? schema + ':' : window.location.protocol;
+
+                var port = urlObject.port || 1985;
+                if (schema === 'https:') {
+                    port = urlObject.port || 443;
+                }
+
+                // @see https://github.com/rtcdn/rtcdn-draft
+                var api = urlObject.user_query.play || self.__internal.defaultPath;
+                if (api.lastIndexOf('/') !== api.length - 1) {
+                    api += '/';
+                }
+
+                apiUrl = schema + '//' + urlObject.server + ':' + port + api;
+                for (var key in urlObject.user_query) {
+                    if (key !== 'api' && key !== 'play') {
+                        apiUrl += '&' + key + '=' + urlObject.user_query[key];
+                    }
+                }
+                // Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
+                var apiUrl = apiUrl.replace(api + '&', api + '?');
+
+                var streamUrl = urlObject.url;
+
+                return {apiUrl: apiUrl, streamUrl: streamUrl, schema: schema, urlObject: urlObject, port: port};
+            },
+            parse: function (url) {
+                // @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
+                var a = document.createElement("a");
+                a.href = url.replace("rtmp://", "http://")
+                    .replace("webrtc://", "http://")
+                    .replace("rtc://", "http://");
+
+                var vhost = a.hostname;
+                var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));
+                var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);
+
+                // parse the vhost in the params of app, that srs supports.
+                app = app.replace("...vhost...", "?vhost=");
+                if (app.indexOf("?") >= 0) {
+                    var params = app.slice(app.indexOf("?"));
+                    app = app.slice(0, app.indexOf("?"));
+
+                    if (params.indexOf("vhost=") > 0) {
+                        vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);
+                        if (vhost.indexOf("&") > 0) {
+                            vhost = vhost.slice(0, vhost.indexOf("&"));
+                        }
+                    }
+                }
+
+                // when vhost equals to server, and server is ip,
+                // the vhost is __defaultVhost__
+                if (a.hostname === vhost) {
+                    var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+                    if (re.test(a.hostname)) {
+                        vhost = "__defaultVhost__";
+                    }
+                }
+
+                // parse the schema
+                var schema = "rtmp";
+                if (url.indexOf("://") > 0) {
+                    schema = url.slice(0, 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;
+                    }
+                }
+
+                var ret = {
+                    url: url,
+                    schema: schema,
+                    server: a.hostname, port: port,
+                    vhost: vhost, app: app, stream: stream
+                };
+                self.__internal.fill_query(a.search, ret);
+
+                // For webrtc API, we use 443 if page is https, or schema specified it.
+                if (!ret.port) {
+                    if (schema === 'webrtc' || schema === 'rtc') {
+                        if (ret.user_query.schema === 'https') {
+                            ret.port = 443;
+                        } else if (window.location.href.indexOf('https://') === 0) {
+                            ret.port = 443;
+                        } else {
+                            // For WebRTC, SRS use 1985 as default API port.
+                            ret.port = 1985;
+                        }
+                    }
+                }
+
+                return ret;
+            },
+            fill_query: function (query_string, obj) {
+                // pure user query object.
+                obj.user_query = {};
+
+                if (query_string.length === 0) {
+                    return;
+                }
+
+                // split again for angularjs.
+                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 elem = queries[i];
+
+                    var query = elem.split("=");
+                    obj[query[0]] = query[1];
+                    obj.user_query[query[0]] = query[1];
+                }
+
+                // alias domain for vhost.
+                if (obj.domain) {
+                    obj.vhost = obj.domain;
+                }
+            }
+        };
+
+        self.pc = new RTCPeerConnection(null);
+        self.pc.onaddstream = function (event) {
+            if (self.onaddstream) {
+                self.onaddstream(event);
+            }
+        };
+
+        return self;
+    }
+
+    var flvPlayer = null;
+    var hlsPlayer = null;
+    var devices = {};
+
+    var stopPlayers = function () {
+        if (flvPlayer) {
+            flvPlayer.destroy();
+            flvPlayer = null;
+        }
+        if (hlsPlayer) {
+            hlsPlayer.destroy();
+            hlsPlayer = null;
+        }
+    };
+
+    var hide_for_error = function () {
+        $('#main_flash_alert').show();
+        $('#main_info').hide();
+        $('#main_tips').hide();
+        $('#video_player').hide();
+        //$('#btn_play').hide();
+
+        stopPlayers();
+    };
+
+    var show_for_ok = function () {
+        $('#main_flash_alert').hide();
+        $('#main_info').show();
+        $('#main_tips').show();
+        $('#video_player').show();
+        //$('#btn_play').show();
+    };
+
+
+    /****
+    * The parameters for this page:
+    *       schema, the protocol schema, rtmp or http.
+    *       server, the ip of the url.
+    *       port, the rtmp port of url.
+    *       vhost, the vhost of url, can equals to server.
+    *       app, the app of url.
+    *       stream, the stream of url, can endwith .flv or .mp4 or nothing for RTMP.
+    *       autostart, whether auto play the stream.
+    *       buffer, the buffer time in seconds.
+    * extra params:
+    *       shp_identify, hls+ param.
+    * for example:
+    *       http://localhost:8088/players/srs_player.html?vhost=ossrs.net&app=live&stream=livestream&server=ossrs.net&port=1935&autostart=true&schema=rtmp
+    *       http://localhost:8088/players/srs_player.html?vhost=ossrs.net&app=live&stream=livestream.flv&server=ossrs.net&port=8080&autostart=true&schema=http
+    */
+    var autoLoadPage = function() {
+        var query = parse_query_string();
+
+        // get the vhost and port to set the default url.
+        // url set to: http://localhost:8080/live/livestream.flv
+        srs_init_flv("#txt_url", "#main_modal");
+        srs_init_flv("#txt_url", "#rtc_player_modal");
+
+        // consts for buffer and max buffer.
+        var bts =  [0.1, 0.2, 0.3, 0.5, 0.8, 1, 2, 3, 4, 5, 6, 8, 10, 15, 20, 30];
+        var mbts = [0.6, 0.9, 1.2, 1.5, 2.4, 3, 6, 9, 12, 15, 18, 24, 30, 45, 60, 90];
+
+        // the play startup time.
+        var pst = new Date();
+        
+        $("#main_modal").on("show", function(){
+        });
+
+        $("#main_modal").on("hide", function(){
+           
+        });
+
+        if (true) {
+            for (var bt of bts) {
+                var bt_id = "#btn_bt_" + bt.toFixed(1).replace(".", "_");
+
+                var bt_fun = function(id, v){
+                    $(bt_id).click(function(){
+                        select_buffer_time(id, v);
+
+                        // remember the chagned buffer.
+                        if (Number(query.buffer) != srs_player.buffer_time) {
+                            query.buffer = srs_player.buffer_time;
+                            apply_url_change();
+                        }
+
+                    });
+                };
+                bt_fun(bt_id, bt);
+            }
+        }
+        if (true) {
+            for (var mbt of mbts) {
+                var mbt_id = "#btn_mbt_" + mbt.toFixed(1).replace(".", "_");
+
+                var mbt_fun = function(id, v){
+                    $(mbt_id).click(function(){
+                        select_max_buffer_time(id, v);
+                    });
+                };
+                mbt_fun(mbt_id, mbt);
+            }
+        }
+
+        if (true){
+            var time_query = function(){
+                $("#btn_query_channel").click();
+                setTimeout(function () {$("#btn_query_channel").click()}, 1000);
+            };
+
+            $("#btn_sip_bye").click(function(){
+                var text = $("#sipSessionId").text();
+                if (text.indexOf("-->") != -1) {
+                    var str = text.split("-->");
+                    id = str[0];
+                    var str2 = str[1].split(":")
+                    chid = str2[1];
+
+                    url = $("#txt_api_url").val();
+                    var apiurl = url + "/srs-sip/v1/gb28181?action=sip_bye&id=" + id + "&chid="+chid;
+                    var ret = http_get(apiurl);
+                    $('#sipSessionMessage').html(syntaxHighlight(ret)); 
+
+                    if (ret != undefined && ret.code == 0){
+                        time_query();
+                    }
+                }
+            });
+
+            $("#btn_sip_querycatalog").click(function(){
+                var text = $("#sipSessionId").text();
+                if (text.indexOf("-->") != -1) {
+                    var str = text.split("-->");
+                    id = str[0];
+                    var str2 = str[1].split(":")
+                    chid = str2[0];
+
+                    url = $("#txt_api_url").val();
+                    var apiurl = url + "/srs-sip/v1/gb28181?action=sip_query_catalog&id=" + id;
+                    var ret = http_get(apiurl);
+                    $('#sipSessionMessage').html(syntaxHighlight(ret)); 
+                    if (ret != undefined && ret.code == 0){
+                        time_query();
+                    }
+                }
+            });
+
+            $("#btn_query_channel").click(function(){
+                url = $("#txt_api_url").val();
+                var apiurl = url + "/srs-sip/v1/channels/"
+                var ret = http_get(apiurl);
+                $('#apiMessage').html(syntaxHighlight(ret)); 
+
+                if (ret != undefined && ret.code == 0){
+                    refreshGb28181ChList(ret.data);
+                }
+            });
+
+            var call_ptz_cmd = function(cmd) {
+                var str = $("#gb28181ChannelId").text();
+                var str_array = str.split("@")
+                var chid = "";
+                var id = "";
+                if (str_array.length < 1){
+                    return;
+                }
+
+                var speed = "136";
+               
+                id = str_array[0];
+                chid = str_array[1];
+                
+                url = $("#txt_api_url").val();
+                var apiurl = url + "/srs-sip/v1/gb28181?action=sip_ptz&id=" + id + "&chid="+chid+ "&ptzcmd="+cmd + "&speed=" + speed;
+                var ret = http_get(apiurl);
+                $('#apiMessage').html(syntaxHighlight(ret)); 
+            };
+
+            var ptz_cmd = ["up", "down", "right", "left", "zoomin", "zoomout"]
+            for (var i=0; i<ptz_cmd.length; i++){
+                var bt_fun = function(id, cmd){
+                    $(bt_id).mousedown(function(){
+                        call_ptz_cmd(cmd);
+                    });
+                    $(bt_id).mouseup(function(){
+                        call_ptz_cmd("stop");
+                    });
+                };
+
+                var bt_id = "#btn_ptz_"+ptz_cmd[i]+ "_rtc";
+                bt_fun(bt_id, ptz_cmd[i]);
+
+                bt_id = "#btn_ptz_"+ptz_cmd[i];
+                bt_fun(bt_id, ptz_cmd[i]);
+            }
+
+            var sdk = null; // Global handler to do cleanup when replaying.
+            var startPlay = function() {
+                $('#rtc_media_player').show();
+
+                // Close PC when user replay.
+                if (sdk) {
+                    sdk.close();
+                }
+
+                sdk = new SrsRtcPlayerAsync();
+                sdk.onaddstream = function (event) {
+                    console.log('Start play, event: ', event);
+                    $('#rtc_media_player').prop('srcObject', event.stream);
+                };
+
+                // For example:
+                //      webrtc://r.ossrs.net/live/livestream
+                var url = $("#txt_rtc_url").val();
+                sdk.play(url).then(function(session){
+                    $('#sessionid').html(session.sessionid);
+                    $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
+                }).catch(function (reason) {
+                    sdk.close();
+                    $('#rtc_media_player').hide();
+                    console.error(reason);
+                });
+            };
+
+            $("#btn_rtc_play").click(function(){
+                $('#rtc_media_player').width(srs_get_player_width);
+                $('#rtc_media_player').height(srs_get_player_height);
+                $("#rtc_player_modal").modal({show: true, keyboard: false});
+                
+                startPlay();
+            });
+
+
+            $("#rtc_player_modal").on("hide", function(){
+                if (sdk) {
+                    sdk.close();
+                }
+             });
+
+        }
+    };
+</script>
+</html>