Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live Video Stream</title>
</head>
<body>
  <video id="videoPlayer" width="640" height="480" controls></video>

  <script>
    const videoElement = document.getElementById('videoPlayer');
    const mediaSource = new MediaSource();
    videoElement.src = URL.createObjectURL(mediaSource);

    mediaSource.addEventListener('sourceopen', handleSourceOpen);

    function handleSourceOpen(event) {
      const mediaSource = event.target;
      const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');

      const socket = new WebSocket('ws://example.com/video-stream'); // WebSocket server address

      socket.addEventListener('message', (event) => {
        // Assuming event.data contains your H.264 video frames as ArrayBuffer
        sourceBuffer.appendBuffer(event.data);
      });

      sourceBuffer.addEventListener('error', (event) => {
        console.error('Error occurred while appending video: ', event);
      });
    }
  </script>
</body>
</html>
Editor is loading...