Custom Audio Capture

2024-02-27

Feature Overview

ZEGO provides custom audio Capture functionality, which is generally used in scenarios where captured input needs to be obtained from existing audio streams or audio files and handed over to SDK for transmission.

Example Source Code Download

Please refer to Download Example Source Code to get the source code.

For related source code, please check files in the "src/Examples/AdvancedAudioProcessing/CustomAudioCaptureAndRendering" directory.

Prerequisites

Before implementing custom audio Capture, please ensure:

A project has been created in ZEGOCLOUD Console, and valid AppID and Server address have been obtained. For details, please refer to Console - Project Information.
ZEGO Express SDK has been integrated into the project, and basic audio/video streaming functionality has been implemented. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

Usage Steps

Warning

Safari browser does not currently support third-party audio/video streaming.
Online resource addresses may not be obtainable due to CORS issues and need to allow cross-origin access.
When resource files are large, loading time may be long. Need to wait for loading to complete before obtaining the audio stream.
Since Google Chrome 86, when publishing third-party audio streams, if local audio is set to mute, the playing end will not be able to hear the corresponding sound.

Set Third-party Media Stream

Call the createZegoStream interface to create a third-party media stream, then call the startPublishingStream interface to publish the stream.

// Start preview (Rendering)
previewVideo.srcObject = mediaStream;
// Capture
const stream = await zg.createZegoStream({
    custom: {
        audio: {
            source: mediaStream
        }
    }
})
// Publish stream
zg.startPublishingStream(idName, stream);

// Start preview (Rendering)
previewVideo.srcObject = mediaStream;
// Capture
const stream = await zg.createZegoStream({
    custom: {
        audio: {
            source: mediaStream
        }
    }
})
// Publish stream
zg.startPublishingStream(idName, stream);

Set Third-party Audio

Call the createZegoStream interface to create third-party audio, then call the startPublishingStream interface to publish the stream.

When source is an <audio> object, use its specified audio source as preview.

// Start Rendering
<audio id="customAudio" crossorigin="anonymous" loop autoplay playsinline  controls  src="xxxx" />

// Capture: localAudio is <audio> object
const localAudio = document.querySelector("#customAudio")
const stream = await zg.createZegoStream({
    custom: {
        audio: {
            source: localAudio
        }
    }
})
// Publish stream
zg.startPublishingStream(idName, stream);

// Start Rendering
<audio id="customAudio" crossorigin="anonymous" loop autoplay playsinline  controls  src="xxxx" />

// Capture: localAudio is <audio> object
const localAudio = document.querySelector("#customAudio")
const stream = await zg.createZegoStream({
    custom: {
        audio: {
            source: localAudio
        }
    }
})
// Publish stream
zg.startPublishingStream(idName, stream);