WebCodecs/decodeToVideo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebCodecs Stream</title>
    <link rel="stylesheet" href="../style.css">
</head>
<body>
<p>
    Proof of concept that loads a video file and uses WebCodecs to convert it to a
    <code><a href="https://www.w3.org/TR/mediacapture-streams/#mediastream">MediaStream</a></code> where it can be set as a
    VideoElement <code>srcObject</code> or sent to a WebRTC <code>RTCPeerConnection</code>
</p>
<p>
    Notes:
    <ul>
        <li><a href="https://github.com/gpac/mp4box.js">mp4box.js</a> is used for demuxing.</li>
        <li>Doesn't include a buffer management system to keep audio & video in sync</li>
        <li>Only works if the source file contains a single audio and video track</li>
    </ul>
</p>
<p>
    See <a href="https://webrtcHacks.com">webrtcHacks</a> for more details and commentary.
</p>
<p>
    Heavily inspired by the <a href="https://github.com/w3c/webcodecs">W3C WebCodecs</a> work and their <a
        href="https://w3c.github.io/webcodecs/samples/audio-video-player/audio_video_player.html">Audio and Video Player
    sample</a>.
    Video "<a href="https://peach.blender.org/">Big Buck Bunny</a>" by Blender Foundation, used under <a
        href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</p>
<button>Play Big Buck Bunny</button> or select a local file:
<input type="file" id="videoFile" accept="video/*">
<br/>
<video autoplay playsinline controls></video>
<script type="module">
    const bbbButton = document.querySelector("button");
    const fileButton = document.querySelector("input");
    const video = document.querySelector('video');

    // Assumes file has both audio and video tracks
    const videoTrackGenerator = new MediaStreamTrackGenerator({kind: 'video'});
    const audioTrackGenerator = new MediaStreamTrackGenerator({kind: 'audio'});

    const stream = new MediaStream([videoTrackGenerator, audioTrackGenerator]);
    video.srcObject = stream;

    function start(file) {
        bbbButton.disabled = true;
        fileButton.disabled = true;

        const worker = new Worker("./worker.js");

        const videoWriter = videoTrackGenerator.writable;
        const audioWriter = audioTrackGenerator.writable;

        worker.postMessage({file, videoWriter, audioWriter}, [videoWriter, audioWriter]);
    }

    const videoUrl = '../media/BigBuckBunny_360p30.mp4';
    // const videoUrl = "https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"; // works
    bbbButton.onclick = () => start(videoUrl);
    fileButton.onchange = () => start(fileButton.files[0]);

</script>
</body>
</html>