The tutorial in this chapter only supports the
Electronenvironment, not theWeb
When the user uses the dynamic PPT of the RTC and the whiteboard at the same time, the following problems may be encountered:
In order to solve these problems, the 2.9.13 whiteboard has a built-in RTC interface for mixing. Users can avoid these problems after implementing them according to the content of this chapter.
If the user's RTC provider does not support mixing, the content of this chapter will be invalid
The user needs to implement the AudioMixerImple class, which is used to bridge the whiteboard SDK and the RTC client referenced by the user.
The AudioMixerBridge interface method is called inside the PPT before the playback event is triggered, and the mixing-related methods of the RTC are called through the user's implementation class.
The implementation example of AudioMixerImpl is as follows:
import {RTCClient} from "white-web-sdk";
class AudioMixerImpl implements RTCClient {
private readonly rtcEngine: AgoraSdk;
public startCallback?: (state: number, errorCode: number) => void;
public stopCallback?: (state: number, errorCode: number) => void;
public constructor(rtcEngine: AgoraSdk) {
this.rtcEngine = rtcEngine;
}
public startAudioMixing(
filePath: string,
loopback: boolean,
replace: boolean,
cycle: number,
callback?: (state: number, errorCode: number) => void,
): number {
this.startCallback = callback;
// it has been found that if filePath is an online resource, there is a certain probability that there will be no sound when playing.
// please use the dynamic ppt resource package to download to the local in advance, and replace it here
return this.rtcEngine.startAudioMixing(
filePath,
loopback,
replace,
cycle,
);
}
public stopAudioMixing(callback?: (state: number, errorCode: number) => void): number {
this.stopCallback = callback;
return this.rtcEngine.stopAudioMixing();
}
public pauseAudioMixing(): number {
return this.rtcEngine.pauseAudioMixing();
}
public resumeAudioMixing(): number {
return this.rtcEngine.resumeAudioMixing();
}
public setAudioMixingPosition(position: number): number {
// the case where position is 0 must be skipped, otherwise there will be no sound
// because the audio stream may still be loading, if you set 0, it will cause an unexpected situation in agora-electron-sdk
if (position !== 0) {
return this.rtcEngine.setAudioMixingPosition(position);
}
return 0;
}
}
There is an additional optional parameter pptParams.rtcClient in the white sdk initialization method after 2.9.14. If users want to use the RTC audio mixing function, they need to pass the AudioMixerImpl interface implementation to this method before initializing the SDK:
// if the user needs to use the rtc mixing function to solve the echo and sound suppression problems, then the rtcEngine must be initialized before the white-web-sdk
// after AudioMixerImpl is passed in to sdk, all audio and video in ppt will be played using rtc mixing
const audioMixer = new AudioMixerImpl(rtcEngine);
const whiteWebSdk = new WhiteWebSdk({
// ...
pptParams: {
rtcClient: audioMixer,
},
});
The RTC client needs to have a mixing status callback prompt. In this callback method, the mixing status change method in the sdk is called to notify the PPT whether it should play video.
If the RTC client does not have related callbacks, it will cause the PPT video to be out of sync.
enum audioMixingStateChangedState {
// the audio mixing file is playing
Start = 710,
// the audio mixing file stops playing
Stop = 713,
}
const audioMixingStateChanged = (state: number, errorCode: number): void => {
if (audioMixer === undefined) {
return;
}
switch (state) {
case audioMixingStateChangedState.Stop: {
if (audioMixer.stopCallback) {
audioMixer.stopCallback(state, errorCode);
}
break;
}
case audioMixingStateChangedState.Start: {
if (audioMixer.startCallback) {
audioMixer.startCallback(state, errorCode);
}
break;
}
default: {
if (audioMixer.startCallback) {
audioMixer.startCallback(state, errorCode);
} else if (audioMixer.stopCallback) {
audioMixer.stopCallback(state, errorCode);
}
break;
}
}
}
rtcEngine.on("audioMixingStateChanged", audioMixingStateChanged);
// when the component is uninstalled, audioMixingStateChanged must be removed, otherwise an error will be reported
// rtcEngine.off("audioMixingStateChanged", audioMixingStateChanged);
filePath in startAudioMixingaudioMixingStateChanged event of rtc when the component is uninstalled, otherwise, when entering the classroom again, an error will be reported and the video cannot be played