在agora web sdk中添加音效

Question

我有一个名为 TweetUp made using Agora App Builder 的网络会议应用程序。现在，我想在用户加入、用户断开、通知等方面添加音效

Answer 1

假设您使用的是最新版本 AgoraAppBuilder Core (2.1.0)

以下是实现用例的方法

用户加入，用户断开

在您的应用中导航到 {APP-Name}/src/pages/VideoCall.tsx

导航到您的 PropsProvider 组件。

它可能看起来像这样，

<PropsProvider
    value={{
        rtcProps: {
            ...rtcProps,
            callActive,
        },
        callbacks, // --> callbacks for events
        ...restProps
}}>

寻找 callbacks 道具， callbacks 道具采用对象类型：

export interface CallbacksInterface {    
  UserJoined: () => {};
  UserOffline: () => {};
  ...otherCallbacks

如果您想为用户加入或离线（断开连接）注册回调，您可以将回调传递给您的 PropsProvider

const playSound = () => {
    let src ='http://commondatastorage.googleapis.com/codeskulptor-assets/sounddogs/explosion.mp3';
    let audio = new Audio(src);
    audio.play();
}

<PropsProvider
    value={{
        .
        .
        callbacks= {
              UserOffline: () =>{
                  console.log('User offline')
                  playSound()
              },
              UserJoined: () => {
                  console.log('User Joined')
                  playSound()
              }
            .
        }
        .
    }}
}}>

与消息接收通知类似，您可以使用 events 对象。在您的 VideoCall 组件中使用：

const {events} = useContext(ChatContext);

一旦您有权访问 events 对象，请注册您的自定义事件以处理 public 和 private 消息。

events.on(
  messageChannelType.Public,
  'onPublicMessageReceived',
  (data: any, error: any) => {
    if (!data) return;
    playSound()
  },
);
events.on(
  messageChannelType.Private,
  'onPrivateMessageReceived',
  .
  .
  .

我们计划发布更新版本的 Agora App Builder Core，在新版本中您将可以访问 Agora AppBuilder Extension API。扩展 API 将为您的应用启用 enhance/add 更新的功能，而无需触及核心代码库。

在agora web sdk中添加音效

adding sound effects in agora web sdk

javascript

agora.io

videochat

agora-web-sdk-ng