captureStream/captureStream.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stream from Offscreen Canvas</title>
    <style>
        body {
            background-color: #333;
            color: #fff;
        }
        div#results {
            display: flex;
        }
    </style>
</head>
<body>
<p>
    This example uses the <code>captureStream</code> method to capture the video and audio directly from a <code>video</code> element.
    The audio is captured using the Web Audio API and combined with the video stream to create a <code>MediaStream</code>.
</p>
<span>Press start if the video does not play automatically: </span>
<button id="start">Start</button>
<div id="results">
    <div>
        <h3>Input video</h3>
        <video id="source" src="../media/BigBuckBunny_360p30.mp4" controls autoplay playsinline loop></video>
    </div>
    <div>
        <h3>MediaStream output</h3>
        <video id="output" controls autoplay playsinline></video>
    </div>
</div>
<br>
<button id="hide">Hide source</button>
<button id="mute">Mute local video</button>
<button id="duck">Duck local video</button>

<script>
    // Main Thread Script
    const startButton = document.querySelector('button#start');

    document.addEventListener("DOMContentLoaded", () => {
        const sourceVideo = document.getElementById("source");
        const outputVideo = document.getElementById("output");


        sourceVideo.onplaying = () => {
            startButton.disabled = true;

            // Combine video stream with audio stream
            const videoStream = sourceVideo.captureStream();
            outputVideo.srcObject = videoStream;

        };

        const hideButton = document.querySelector('button#hide');
        hideButton.onclick = () => {
            sourceVideo.style.visibility = sourceVideo.style.visibility === "hidden" ? "visible" : "hidden"
            hideButton.innerText = sourceVideo.hidden ? "Unhide source" : "Hide source";

        };

        const muteButton = document.querySelector('button#mute');
        muteButton.onclick = () => {
            sourceVideo.muted = !sourceVideo.muted;
            muteButton.innerText = sourceVideo.muted ? "Unmute local video" : "Mute local video";
        };

        const duckButton = document.querySelector('button#duck');
        duckButton.onclick = () => {
            sourceVideo.volume = sourceVideo.volume === 0.1 ? 1.0 : 0.1;
            duckButton.innerText = sourceVideo.volume === 0.1 ? "Unduck local video" : "Duck local video";
        };

        startButton.onclick = () => {
            sourceVideo.play();
        };
    });

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