index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>蒹葭乄白露</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script src="./player.js"></script>
    <script>
        function startWebSocket (ip, port) {
            if (!ip)	return
            var socketURL = `ws://${ip}:${port}`;
            var ws = new WebSocket(socketURL);
            ws.binaryType = 'arraybuffer';
            ws.onopen = function(evt) {
                ws.send({
                    url : `${ip}:${port}`,
                    cmd : "size",
                });
            };

            var canvas = document.getElementById('canvas');

            ws.addEventListener('message', function(event) {
              // Width & height must be same as resolution of YUV frame
              // 宽高必须跟视频的分辨率保持一致
              var [width, height] = [1280, 720];
              let uintArray = new Uint8Array(event.data)
              var renderContext = new Yuv2rgbPlayer(canvas);
              renderContext.renderFrame(uintArray, width, height, '420-yuv');
            });
        }

        startWebSocket('172.23.214.171', '7000')
    </script>
  </body>
</html>