diff --git a/src/pages/test.tsx b/src/pages/test.tsx new file mode 100644 index 000000000..720354820 --- /dev/null +++ b/src/pages/test.tsx @@ -0,0 +1,60 @@ +import React, { useState } from 'react'; + +export default function Test() { + const [mediaUrl, setMediaUrl] = useState(); + + const startStream = async () => { + const source = new MediaSource(); + const url = URL.createObjectURL(source); + setMediaUrl(url); + + source.addEventListener('sourceopen', async () => { + if (!source.sourceBuffers.length) { + console.log('supported', MediaSource.isTypeSupported('video/mp4; codecs="avc1.64000d,mp4a.40.2"')); + const sourceBuffer = source.addSourceBuffer('video/mp4; codecs="avc1.64000d,mp4a.40.2"'); + const resp = await fetch('https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4'); + const reader = resp.body.getReader(); + new ReadableStream({ + start() { + // The following function handles each data chunk + function push() { + console.log('read', source.readyState); + // "done" is a Boolean and value a "Uint8Array" + reader.read().then(({ done, value }) => { + // Is there more data to read? + if (!done) { + sourceBuffer.appendBuffer(value); + } else { + console.log('close'); + source.endOfStream(); + } + }); + }; + + sourceBuffer.addEventListener('updateend', () => { + push(); + }); + + push(); + } + }); + } + }); + + source.addEventListener('sourceended', () => { + console.log('sourceend'); + }); + } + + return (
+ +
+ { + mediaUrl && + () + } +
+
) +} \ No newline at end of file