实现 3D 空间音频

功能简介

在社交元宇宙等场景下，用户在通过简单语音交流外，结合场景也需要一些立体声效果来让用户感知游戏角色周围其他用户的存在及其对应的距离和方位，提高语音通话的趣味性。 本文将介绍在如何在开发 TRTC 应用中开启 3D 空间音频功能。

前提条件

实现流程

你可以参考文档 开始集成音视频通话 来实现音视频通话。

加载 SDK

因为空间音频功能不是所有应用都需要，所以我们在 node_modules/trtc-js-sdk 目录下增加了一个 trtc-spatial.js 用于专门实现 3D 空间音频。

// 当您的应用不需要空间音频时
import TRTC from 'trtc-js-sdk';
// 当您的应用需要空间音频时
import TRTC from 'trtc-js-sdk/trtc-spatial.js';

实现

// 创建 client
const client = TRTC.createClient({ mode: 'rtc', sdkAppId, userId, userSig });
const { detail } = await TRTC.checkSystemRequirements();
// 如果你需要使用空间音频，你应该在加入房间前启用它。
if (detail.isSpatialAudioSupported) {
  client.enable3DSpatialAudioEffect(true);
}
// 加入房间
await client.join({ roomId: 8888 });
// 如果有远端用户加入，你会收到事件通知。
client.on('stream-added', event => {
  const remoteStream = event.stream;
  console.log('New remote stream:' + remoteStream.getId());
  // 订阅到远端流
  client.subscribe(remoteStream);
});
client.on('stream-subscribed', event => {
  const remoteStream = event.stream;
  console.log('成功订阅了远程流：' + remoteStream.getId());
  // 播放远端流
  remoteStream.play('remote_stream-' + remoteStream.getId());
});
// 当你成功订阅了一个用户，你可以实时更新他们的位置信息。
client.updateRemote3DSpatialPosition('tom', [100, 200, 0]);
// 你同时也可以更新自己的位置信息
client.updateSelf3DSpatialPosition([100, 0, 0], [2, 1, 0], [-1, 2, 0], [0, 0, 1]);

API

Client.enable3DSpatialAudioEffect(enabled): void

启用3D空间音频效果。

如果你需要使用空间音频，你应该在加入房间之前启用它。

例子：

// 开启 3D 音频效果
// Good:
client.enable3DSpatialAudioEffect(true);
await client.join({ roomId: 8888 });
// Bad:
await client.join({ roomId: 8888 });
client.enable3DSpatialAudioEffect(true);
client.enable3DSpatialAudioEffect(false);

Client.updateSelf3DSpatialPosition(position, axisRight, axisForward, axisUp): void

更新监听器的位置和方向。

例子：

client.updateSelf3DSpatialPosition([100, 0, 0], [2, 1, 0], [-1, 2, 0], [0, 0, 1])

Client.updateRemote3DSpatialPosition(userId, position): void

你可以通过自己的同步服务获得远程用户的位置信息。并更新远程用户的位置信息。

例子：

client.updateRemote3DSpatialPosition('tom', [100, 200, 0]);

Client.set3DSpatialReceivingRange(range): void

设置音频接收距离的最大范围。

例子：

client.set3DSpatialReceivingRange(10000);