node-rtsp-stream-server/index.html

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>DEMO node-rtsp-stream-jsmpeg</title>
    <script src="https://jsmpeg.com/jsmpeg.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <style type="text/css">
        html,
        body {

            text-align: center;
        }

        input[type='text'] {
            width: 450px;
        }
    </style>
</head>

<body>
    <div>
        <!-- <span>rtsp : <input type="text" name="rtsp" id="rtsp"  value="rtsp://admin:xcs123456@192.168.3.11:554/h264/ch1/main/av_stream"></span><br /> -->
        <span>rtsp : <input type="text" name="rtsp" id="rtsp"  value="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></span><br />
               
        <span>rtsp : <input type="text" name="size" id="size" value="1024*768"></span><br />
        <canvas id="video-canvas">
        </canvas><br />

        <input type="button" value="Start Stream" onclick="start()">
        <input type="button" value="Close Stream" onclick="closeStream()">
    </div>

 
    <script type="text/javascript">
        var player

        function closeStream() { 
            $.post("http://127.0.0.1:3000/cameras/close/", { rtspUrl: $('#rtsp').val() }, function (result) {
                player.destroy()
            })
        }


        function start() { 
            var rstp = $('#rtsp').val() 
            var size = $('#size').val()
            $.post("http://127.0.0.1:3000/cameras/", { rtspUrl:rstp, size:  size }, function (result) {  
                var url = "ws://127.0.0.1:" + result.port;
                var canvas = document.getElementById('video-canvas');
                let opt = {
                    canvas: canvas,
                    poster: "0.jpg",
                }
                player = new JSMpeg.Player(url, opt);
            })

        }


    </script>


</body>