Replace the audio/video track

Introduction

A media stream is a combination of audio and video tracks on web pages. If two or more media streams exist locally, ZEGOCLOUD’s SDKs allow you to flexibly combine and use the audio and video tracks contained in the media stream.

For example, when a host wants to play background music, the host collects media stream A through the camera and microphone, and also loads an MP3 music media stream B through the <audio> tag. After replacing the audio track of media stream A with that of media stream B, the audience that subscribed the stream A can hear the background music rather than the host's voice.

Prerequisites

Before you implement the audio/Video track replacement feature, make sure you complete the following steps:

• Create a project in ZEGOCLOUD Admin Console, and get the AppID and ServerSecret of your project.
• Integrate the Video Call SDK into the project. For details, see Integration and Implementation.

Create and publish video streams

To create the video streams, call the createZegoStream method and set the camera property for creating the media (camera and microphone) source stream.

// After calling the createZegoStream method, you need to wait for the ZEGO server to return the local stream object before any further operation.
const localStream = await this.zg.createZegoStream();

// Play preview of the stream
localStream.playVideo(document.querySelector("#local-video"));

// [publishStreamId] must be global unique.
// For more details about the [publishOption], please check the api document.
const result = zg.startPublishingStream(publishStreamId, localStream, publishOption);

Load background music

Load the background music with the <Audio> tag.

<!--Load a music with mp3 relative path-->
<audio id="customAudio" crossOrigin="anonymous" loop preload playsinline controls src="../../../assets/16183688734997.mp3"></audio>

Replace audio track with the microphone source stream

1. Call the startCaptureCustomAudio method to replace the microphone with background music
2. Call the updatePublishingStream method to synchronize and update the streaming audio, replacing the microphone with background music.

// Listen for the [change] function of the background music.
$('#CustomAudio').on('change', async function({ target }) {
        // Select the target.
    if (target.checked) {
        // Play the background music.
        $('#customAudio')[0].play()
        try {
            // capture custom audio
            await localStream.startCaptureCustomAudio({
                source: $('#customAudio')[0]
            })
            // update the stream
            await zg.updatePublishingStream(localStream, 1)
        } catch (err) {
            console.log(err);
        }
    }
});

Replace the camera with screen sharing

Call the startCaptureScreen interface to replace the camera with screen sharing; call the updatePublishingStream interface to synchronize the publishing stream video, replacing the camera with screen sharing.

try {
    // Start capturing screen sharing
    await localStream.startCaptureScreen()
    // Update the publishing stream video of localStream
    await zg.updatePublishingStream(localStream, 0)
} catch (err) {
    console.log(err);
}