boz
/
billd-live


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Video to ReadableStream</title>
  </head>
  <body>
    <video
      id="video"
      width="640"
      height="480"
      autoplay
      loop
      muted
    >
      <source
        src="your-video.mp4"
        type="video/mp4"
      />
    </video>
    <script>
      const video = document.getElementById('video');

      async function videoToStream(videoElement) {
        // 创建 MediaStream
        const stream = videoElement.captureStream();
        const reader = new MediaRecorder(stream);

        // 创建一个可读流
        const readableStream = new ReadableStream({
          start(controller) {
            reader.ondataavailable = (event) => {
              if (event.data.size > 0) {
                const chunk = new Uint8Array();
                const reader = new FileReader();
                reader.onload = () => {
                  // 将数据块添加到可读流
                  controller.enqueue(new Uint8Array(reader.result));
                };
                reader.readAsArrayBuffer(event.data);
              }
            };
            reader.onstop = () => {
              controller.close();
            };
            // 开始录制
            reader.start();
          },
          cancel() {
            reader.stop();
          },
        });

        return readableStream;
      }

      video.addEventListener('loadeddata', async () => {
        const stream = await videoToStream(video);
        console.log(stream); // 你可以在这里使用这个流
      });
    </script>
  </body>
</html>