在基于小鱼易连 Web SDK实现多人音视频通话功能时，首先需要初始化 Web SDK。初始化完成后，您可以进行用户登录及会议呼叫操作。
1、在开始之前，请确保完成准备工作，并获取到必要的账号信息：
2、通过导入 XYRTC 主文件，调用其 XYRTC.createClient 方法创建 XYRTCClient 模块；
// 导入主文件
import XYRTC from '@xylink/xy-rtc-sdk';
// 创建 XYRTCClient 实例
const XYClient = XYRTC.createClient({
clientId: '<您的 clientId>',
clientSecret: '<您的 clientSecret>',
extId: '<您的 extId>',
// 公有云环境下默认可不填写，默认是：cloudapi.xylink.com:443
// 分区云环境下需要指定服务器地址+端口
server: 'cloudapi.xylink.com:443',
container: {
// 配置显示容器节点 ID
elementId: 'meeting',
},
});
// 后续通过 XYClient 实例执行登录、呼叫等操作
XYRTCClient实例，避免重复创建；server地址，格式是服务器地址+端口，无需协议头，举例：abc.xylink.com:9443；elementId容器可见，以便让Web SDK内部正确计算每个参会者画面的位置和尺寸；通过简单的 UI 交互，您可以为用户提供发起会议呼叫的功能。以下是示例代码：
// 导入主文件
import XYRTC from '@xylink/xy-rtc-sdk';
// 定义点击事件处理函数
const joinMeeting = () => {
const XYClient = XYRTC.createClient({
clientId: '<您的 clientId>',
clientSecret: '<您的 clientSecret>',
extId: '<您的 extId>',
container: {
elementId: 'meeting',
},
});
// 示例：监听呼叫状态
XYClient.on('call-status', (status) => {
console.log('呼叫状态更新:', status);
});
// 示例：三方账号登录
await XYClient.loginExternalAccount({...});
};
// 创建简单的 UI 按钮
<div onClick={joinMeeting}>开始呼叫</div>