The ffmpeg output binary stream front-end uses WebSocket to accept and cannot be played

Server push nodejs

Use ws service to pass to the front end

      ffmpegs = spawn('ffmpeg', [
        '-f', 'gdigrab',  // 这是 Windows 下用于捕获屏幕的输入格式
        '-framerate', '60',  // 捕获帧率
        '-i', 'desktop',  // 捕获桌面（即屏幕）
        '-c:v', 'vp8',  // 视频编码格式
        '-f', 'webm',  // 设置输出为 mpegts 流
        '-pix_fmt', 'yuv420p',
        'pipe:1',  // 输出到管道
      ]);

enter image description here

enter image description here

Front-end rendering

      let videoElement = document.getElementById('screenVideo');

      let mediaSource = new MediaSource();
      videoElement.src = URL.createObjectURL(mediaSource);

      mediaSource.addEventListener('sourceopen', () => {

        let sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"'); 

        let ws = new WebSocket(`ws://${ip}:3000/?device=${encodeURIComponent(selectedDevice)}`);

        ws.onmessage = (event) => {
          const data = new Uint8Array(event.data);
          if (!sourceBuffer.updating) {
            try {
              sourceBuffer.appendBuffer(data);
              console.log('ok')
            } catch (error) {
              console.error('Error appending buffer:', error);
            }
          } else {
            console.log('SourceBuffer is busy');
          }
        };

        ws.onerror = (error) => {
          console.error('WebSocket error:', error);
        };

        ws.onclose = () => {
          console.log('WebSocket connection closed');
        };

        if (mediaSource.readyState === 'open') {
          videoElement.play().catch(err => {
            console.error('Error attempting to play the video:', err);
          });
        }
}

The video keeps spinning in circles and cannot be played normally.

enter image description here

Unable to play normally. What’s the problem?