<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <title>SRS</title>
    <meta charset="utf-8">
    <style>
        body {
            padding-top: 30px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="assets/js/webrtc/adapter-7.4.0.min.js"></script>
    <script type="text/javascript" src="assets/js/webrtc/srs.sdk.js"></script>
    <script type="text/javascript" src="assets/js/webrtc/srs.sig.js"></script>
    <script type="text/javascript" src="assets/js/restajax.js"></script>
</head>
<body>
<img src='https://ossrs.net/gif/v1/sls.gif?site=ossrs.net&path=/player/one2one'/>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="https://github.com/ossrs/srs">SRS</a>
            <div class="nav-collapse collapse">
                <ul class="nav srs_nav">
                    <li class="active"><a href="one2one.html">一对一通话</a></li>
                    <li><a href="room.html">多人通话</a></li>
                    <li class="srs_ignore">
                        <a href="https://github.com/ossrs/signaling">
                            <img alt="GitHub Repo stars"
                                 src="https://img.shields.io/github/stars/ossrs/signaling?style=social">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="websocket-line">
        接收用户ID <input id="toUserId" class="websocket-input" type="text" style="width: 196px;" placeholder="输入接收用户ID"/>
    </div>
    <div class="websocket-line">
        <input id="clientName" class="websocket-input" type="text" placeholder="请输入客户端名称"/>
        <button id="loginBtn" onclick="login()">登录</button>
        <button id="closeBtn" style="display: none;" onclick="closeWebSocket()">关闭</button>
    </div>
    <div class="form-inline">
        SRS:
        <input type="text" id="txt_host" class="input-medium" value="">
        Room:
        <input type="text" id="txt_room" class="input-small" value="1">
        Display:
        <input type="text" id="txt_display" class="input-small" value="">
        <button class="btn btn-primary" id="btn_start" onclick="send()">开始通话</button>
    </div>


    <div class="row">
        <div class="span4 hide" id="publisher">
            <label></label>
            <video id="rtc_media_publisher" width="310" autoplay muted controls></video>

            <label></label>
            <span id='self'></span>
        </div>
        <div class="span6 hide" id="player">
            <label></label>
            <video id="rtc_media_player" width="310" autoplay muted controls></video>

            <label></label>
            <span id='peer'></span>
            <a href="javascript:control_refresh_peer()">Refresh</a>
            <input type="text" id="txt_alert" class="input-medium" value="">
            <a href="javascript:control_alert_peer()">Alert</a>
        </div>
    </div>

    <label></label>

    <label></label>
</div>
<footer class="footer">
    <div class="container">
        <p>&copy; SRS 2020</p>
    </div>
</footer>
<script type="text/javascript">
    var sig = null;
    var publisher = null;
    var player = null;
    var control_refresh_peer = null;
    var control_alert_peer = null;
    console.log('?wss=x to specify the websocket schema, ws or wss');
    console.log('?wsh=x to specify the websocket server ip');
    console.log('?wsp=x to specify the websocket server port');
    console.log('?host=x to specify the SRS server');
    console.log('?room=x to specify the room to join');
    console.log('?display=x to specify your nick name');

    /**
     var startDemo = async function () {
            var host = $('#txt_host').val();
            var room = $('#txt_room').val();
            var display = $('#txt_display').val();

            // Connect to signaling first.
            if (sig) {
                sig.close();
            }
            sig = new SrsRtcSignalingAsync();
            sig.onmessage = function (msg) {
                console.log('Notify: ', msg);

                if (msg.event === 'leave') {
                    $('#player').hide();
                }

                if (msg.event === 'publish') {
                    if (msg.peer && msg.peer.publishing && msg.peer.display !== display) {
                        startPlay(host, room, msg.peer.display);
                    }
                }

                if (msg.event === 'control') {
                    if (msg.param === 'refresh') {
                        setTimeout(function () {
                            window.location.reload();
                        }, 500);
                    } else if (msg.param === 'alert') {
                        alert('From ' + msg.peer.display + ': ' + msg.data);
                    }
                }

                if (msg.participants.length >= 2) {
                    $('.srs_merge').show();
                } else {
                    $('.srs_merge').hide();
                }
            };
            await sig.connect(conf.wsSchema, conf.wsHost, room, display);

            control_refresh_peer = async function () {
                let r1 = await sig.send({action:'control', room:room, display:display, call:'refresh'});
                console.log('Signaling: control peer to refresh ok', r1);
            };
            control_alert_peer = async function () {
                let r1 = await sig.send({action:'control', room:room, display:display, call:'alert', data:$('#txt_alert').val()});
                console.log('Signaling: control peer to alert ok', r1);
            };

            let r0 = await sig.send({action:'join', room:room, display:display});
            console.log('Signaling: join ok', r0);

            // For one to one demo, alert and ignore when room is full.
            if (r0.participants.length > 2) {
                alert('Room is full, already ' + (r0.participants.length - 1) + ' participants');
                sig.close();
                return;
            }

            // Start publish media if signaling is ok.
            await startPublish(host, room, display);
            let r1 = await sig.send({action:'publish', room:room, display:display});
            console.log('Signaling: publish ok', r1);

            // Play the stream already in room.
            r0.participants.forEach(function(participant) {
                if (participant.display === display || !participant.publishing) return;
                startPlay(host, room, participant.display);
            });

            if (r0.participants.length >= 2) {
                $('.srs_merge').show();
            }
        };

     var startPublish = function (host, room, display) {
            $(".ff_first").each(function(i,e) {
                $(e).text(display);
            });

            var url = 'webrtc://' + host + '/' + room + '/' + display + conf.query;
            $('#rtc_media_publisher').show();
            $('#publisher').show();

            if (publisher) {
                publisher.close();
            }
            publisher = new SrsRtcPublisherAsync();
            $('#rtc_media_publisher').prop('srcObject', publisher.stream);

            return publisher.publish(url).then(function(session){
                $('#self').text('Self: ' + url);
            }).catch(function (reason) {
                publisher.close();
                $('#rtc_media_publisher').hide();
                console.error(reason);
            });
        };

     var startPlay = function (host, room, display) {
            $(".ff_second").each(function(i,e) {
                $(e).text(display);
            });

            var url = 'webrtc://' + host + '/' + room + '/' + display + conf.query;
            $('#rtc_media_player').show();
            $('#player').show();

            if (player) {
                player.close();
            }

            player = new SrsRtcPlayerAsync();
            $('#rtc_media_player').prop('srcObject', player.stream);

            player.play(url).then(function(session){
                $('#peer').text('Peer: ' + display);
                $('#rtc_media_player').prop('muted', false);
            }).catch(function (reason) {
                player.close();
                $('#rtc_media_player').hide();
                console.error(reason);
            });
        };

     // Pass-by to SRS url.
     let conf = SrsRtcSignalingParse(window.location);
     $('#txt_host').val(conf.host);
     conf.room && $('#txt_room').val(conf.room);
     $('#txt_display').val(conf.display);

     $(".ff_host").each(function(i,e) {
            $(e).text(conf.host);
        });
     $(".ff_app").each(function(i,e) {
            $(e).text($('#txt_room').val());
        });
     $('#ff_preview').attr('href', 'http://ossrs.net/players/srs_player.html?app=' + $('#txt_room').val() + '&stream=merge.flv&server=' + conf.host + '&vhost=' + conf.host + '&autostart=true');

     // Update href for all navs.
     $('ul.srs_nav').children('li').not('.srs_ignore').children('a').each(function (i, e) {
            $(e).attr('href', $(e).attr('href') + conf.rawQuery);
        });

     $('#btn_apply').click(function () {
            if ($('#txt_wx_video_tcurl').val() !== '' && $('#txt_wx_video_stream').val() !== '') {
                $('#ff_wxvideo').text('"' + $('#txt_wx_video_tcurl').val() + $('#txt_wx_video_stream').val() + '"').show();
                $('#ff_output').hide();
                $('#ff_preview').parent().hide();
            } else {
                $('#ff_wxvideo').hide();
                $('#ff_output').show();
                $('#ff_preview').parent().show();
            }
        });

     $("#btn_start").click(startDemo);
     if (conf.autostart) {
            startDemo();
        }

     **/

        //
    var websocket;

    function register(sessionId) {
        var registBody = {
            id: new Date().getTime(),
            type: 1000,
            from: $('#currentUserId').val(),
            to: $('#currentUserId').val(),
            body: {
                sessionId: sessionId
            }
        }
        websocket.send(JSON.stringify(registBody));
    }

    function initWebSocket(sessionId) {
        if ('WebSocket' in window) {
            websocket = new WebSocket('ws://localhost:8081/websocket');
            console.log("WebSocket连接成功")
        } else {
            alert('浏览器不支持WebSocket');
            return;
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log('error')
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            console.log('open', event);
            // 打开连接，注册WebSocket
            register(sessionId);
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            var data = JSON.parse(event.data);
            if (data.type === 1000) {
                // 注册
                var body = JSON.parse(data.body);
                if (body.code === 200) {
                    $('#loginStatus').html('已连接');
                } else {
                    $('#loginStatus').html(body.msg);
                }
            } else if (data.type === 2001) {
                // 文本消息
                var body = data.body;
                $('#websocketHistoryBox').append('<div class="receive-msg-box"><div class="message receive-msg">' + body + '</div></div>');
                autoScrollBottom();
            } else if (data.type === 5001) {

            } else if (data.type === 9001) {
                // 发送状态
                var body = JSON.parse(data.body);
                if (body.code != 200) {
                    $('#' + data.id).before('<span class="send-status" title="' + body.msg + '">!</span> ')
                }
            } else if (data.type === 9101) {
                // 接收状态
                var body = JSON.parse(data.body);
                if (body.code != 200) {
                    $('#' + data.id).before('<span class="send-status" title="' + body.msg + '">!</span> ')
                }
            }
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log('close')
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
    }

    function login() {
        if (!$('#toUserId').val()) {
            alert('请输入接收用户ID');
            return;
        }
        if (!$('#clientName').val()) {
            alert('请输入客户端名称')
            return;
        }
        restAjax.get(restAjax.path('api/websocket/client/login/{clientName}', [$('#clientName').val()]), {}, null, function (code, data) {
            var sessionId = data.data
            $('#loginBtn').hide();
            $('#closeBtn').show();
            $('#clientName').attr('disabled', 'disabled');
            $('#toUserId').attr('disabled', 'disabled');
            $('#sendBox').show();
            initWebSocket(sessionId);
        }, function (code, data) {
            alert(data.msg);
        })
    }

    async function send() {
        if (!websocket) {
            alert('请开启WebSocket');
            return;
        }
        // var sendId = new Date().getTime();
        // var sendBody = {
        //     id: sendId,
        //     type: 5004,
        //     from: $('#currentUserId').val(),
        //     to: $('#toUserId').val(),
        //     body: {
        //         room: $('#txt_room').val()
        //     }
        // }
        // websocket.send(JSON.stringify(sendBody));

        // var player = new SrsRtcPlayerAsync();
        // $('#rtc_media_player').prop('srcObject', player.stream);

        // 'webtrc://192.168.0.106/1/123'
        var pc = new RTCPeerConnection(null);
        var stream = new MediaStream();
        pc.ontrack = function(event) {
            if (self.ontrack) {
                self.ontrack(event);
            }
        };
        pc.addTransceiver("audio", {direction: "recvonly"});
        pc.addTransceiver("video", {direction: "recvonly"});
        // // 创建offer
        var offer = await pc.createOffer();
        console.log(offer)
        // // 设置offer
        await pc.setLocalDescription(offer);

        // 设置
        var conf = {
            api: 'https://192.168.0.106/rtc/v1/publish',
            tid: Number(parseInt(new Date().getTime()*Math.random()*100)).toString(16).substr(0, 7),
            streamurl: 'webtrc://192.168.0.106/1/123',
            clientip: null,
            sdp: offer.sdp
        }

        var session = await new Promise((resolve, reject) => {

            $.ajax({
                type: "POST", url: conf.api, data: JSON.stringify(conf),
                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);
            });

            // restAjax.post(conf.api, conf, null, function(code, data) {
            //     if(data.code) {
            //         reject(data);
            //         return;
            //     }
            //     resolve(data);
            // }, function(code, data) {
            //     console.log(code, data);
            //     reject(data);
            // })
        });
        // 设置远程
        await pc.setRemoteDescription(
            new RTCSessionDescription({type: 'answer', sdp: session.sdp})
        );
        console.log(session)
    }

    function closeWebSocket() {
        websocket.close();
        $('#loginBtn').show();
        $('#closeBtn').hide();
        $('#clientName').removeAttr('disabled');
        $('#toUserId').removeAttr('disabled');
        $('#sendBox').hide();
    }
</script>
</body>
</html>

