fakeMediaDevices.getFakeMedia

In Real Time Communication(RTC) development, we often need to obtain a MediaStream from the camera
for encoding and transmission purposes. The fakeMediaDevices library simulates a camera stream to
ensure a stable input during testing. Additionally, it offers various parameters to support
testing with different focuses.

This page is a visual rendering showcase. In actual use, developers can access the WebRTC object programmatically for transmission.

Github by Lu Yuchun

1. Default Options

Most areas of the video remain static to avoid encoding resource usage,
while audio and video remain smooth for stability monitoring.

        const fakeMedia = fakeMediaDevices.getFakeMedia({
            audio: true,
            video: true,
        })
        const fakeMediaStream = new MediaStream([fakeMedia.audio.track, fakeMedia.video.track])
        document.getElementById("video-default").srcObject = fakeMediaStream

2. Stereo Audio + Configurable Video (Resolution, Frame Rate) with Noise in Right Channel

Audio: Verifies stereo encoding, decoding, and playback support in the audio pipeline and devices.
Video: Verifies device and codec support for resolution and frame rate.

        const fakeMedia = fakeMediaDevices.getFakeMedia({
            audio: {
                channelCount: 2,
                left: {
                    data: "bbdbbjyy",
                    loop: true,
                    gain: 1,
                },
                right: {
                    data: "mmdmmjwp",
                    loop: true,
                    gain: 0.5,
                    noise: {
                        gain: 0.05,
                    },
                },
            },
            video: {
                width: 1024,
                height: 768,
                frameRate: 15,
            },
        })
        const fakeMediaStream = new MediaStream([fakeMedia.audio.track, fakeMedia.video.track])
        document.getElementById("video-stereo").srcObject = fakeMediaStream

3. Background Replacement

Verifies the Wasm pipeline for video pre-processing

        const bgImg = new Image()
        bgImg.src = "./assets/img/mountain.jpeg"
        document.getElementById("play-btn-background").onclick = async ()=>{
            const fakeMedia = fakeMediaDevices.getFakeMedia({
                audio: true,
                video: {
                    type: "background",
                    bgImg,
                },
            })
            const fakeMediaStream = new MediaStream([fakeMedia.audio.track, fakeMedia.video.track])
            document.getElementById("video-background").srcObject = fakeMediaStream
        }

4. Random Pixels

This demo creates a high-information-density camera environment to stress test the entire
communication process. Notably, when WebRTC performance is limited, it allows trade-offs
between resolution and image quality, making it ideal for such scenarios.

        document.getElementById("play-btn-random").onclick = async ()=>{
            const fakeMedia = fakeMediaDevices.getFakeMedia({
                audio: false,
                video: {
                    type: "randomcolor",
                    bgImg,
                },
            })
            const fakeMediaStream = new MediaStream([fakeMedia.video.track])
            document.getElementById("video-randomcolor").srcObject = fakeMediaStream
        }

5. Default Video Stream + Phase-Canceling Stereo Sine Waves

Some devices do not support stereo playback and merge all channels during playback.
If the energy of both channels cancels out at the same time, the audio disappears.
This demo demonstrates this phenomenon. Notably, if the entire pipeline fails to synchronize
the left and right channels precisely, the otherwise silent audio may produce sound.

        const fakeMedia = fakeMediaDevices.getFakeMedia({
            audio: {
                type: "oscstereo",
            },
            video: true,
        })
        const fakeMediaStream = new MediaStream([fakeMedia.audio.track, fakeMedia.video.track])
        document.getElementById("video-oscstereo").srcObject = fakeMediaStream