视频通话（MeetingKit）

本篇文档将介绍如何使用小鱼易连Web MeetingKit UI库集成多人音视频通话服务到 React 项目中，开发者按照步骤执行即可完成集成操作；

在开始之前，请确认您已经完成相应的准备工作，获取集成 MeetingKit 所需的clientId、clientSecret、extId配置信息；

提示

小鱼易连 MeetingKit UI库暂时仅支持 React 框架集成，后续会放开更多的框架支持；

时序图

集成小鱼易连Web Meetingkit UI库具体的流程如下：

说明

小鱼易连 Web MeetingKit UI 库其强大音视频通话能力依赖于小鱼易连音视频 Web SDK 库的支持，两者共同协作，为开发者提供全面的解决方案；

Web MeetingKit UI 库

底层基于Web SDK库实现，按照标准的集成SDK流程实现UI逻辑；
使用 React 框架实现；
提供丰富的 UI 组件和便捷的交互方法，帮助开发者快速搭建用户界面和实现会议交互逻辑；
适合开发者专注于界面和用户体验的开发，减少手动处理复杂的底层逻辑和状态管理；
详细内容请参考：API 参考；

Web SDK 库

作为系统核心底层库，提供如下关键功能支持：

登录：完成用户的身份验证和权限管理；
呼叫与会议操作：包括发起/接收呼叫、加入/离开会议、会中操作等；
音视频采集与处理：支持摄像头、麦克风流采集和传输，并对音视频流进行编解码和质量优化；
信令传输：实现与服务端的消息交互，确保音视频通话的实时性与稳定性；
网络适配：提供动态网络条件下的适应性调整，确保流畅的用户体验；

基础流程引导

下面展示基础的通话流程步骤，请按顺序执行；

1、初始化项目

基于 Vite 快速搭建一个React+Typescript测试项目：video-call

$ npm create vite@latest video-call -- --template react-ts

2、安装依赖

进入video-call目录，执行安装依赖命令：

$ npm install

3、安装 MeetingKit 库

安装@xylink/meetingkit库

$ npm install @xylink/meetingkit -S

4、清理文件

默认搭建的测试项目包含一些基础的样式，需要移除并关闭React严格模式：

清空src/index.css、src/App.css 文件内容，确保样式初始化；
修改src/index.css文件，添加html、body、root容器的默认高度，如果项目已经存在，则无需添加；

html, body{
  height: 100%;
  width: 100%;
}

#root {
  width: 800px;
  height: 500px;
}

修改src/main.tsx文件，移除StrictMode模式，修改完成代码如下：

import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';

createRoot(document.getElementById('root')!).render(<App />);

5、初始化 MeetingKit 库

编辑src/App.tsx文件，执行下面各项操作：

加载 MeetingKit 样式：

import '@xylink/meetingkit/css/style.css';

导入uiMeetingKit, XYMeetingEventKey模块，调用uiMeetingKit.createClient()创建XYRTCClient实例，并配置对应的clientID、clientSecret、extID参数；
添加uiMeetingKit的监听事件，执行退会逻辑；
添加会议状态、缓存XTRTCClient实例；

详细代码逻辑如下：

提示

通过npm/yarn安装完成MeetingKit库后，会依赖安装 @xylink/xy-rtc-sdk 库，项目中直接使用即可；

// App.tsx

import { useEffect, useRef, useState } from 'react';
import { uiMeetingKit, XYMeetingEventKey } from '@xylink/meetingkit';
// 安装MeetingKit后自动安装此依赖
import { XYRTCClient } from '@xylink/xy-rtc-sdk';
import './App.css';
import '@xylink/meetingkit/css/style.css';

// 会议状态
export enum MeetingState {
  Login,
  Meeting,
}

function App() {
  // 定义会议状态，默认是登录状态
  const [meetingState, setMeetingState] = useState(MeetingState.Login);
  // 缓存XYRTCClient实例
  const client = useRef<XYRTCClient | null>(null);

  useEffect(() => {
    // 初始化执行
    createMeetingClient();
  }, []);

  // 创建Meeting Client客户端
  const createMeetingClient = async () => {
    try {
      if (!client.current) {
        // 返回SDK Client
        client.current = await uiMeetingKit.createClient({
          // 请在此处配置准备工作中获取到的配置参数
          // 请在此处配置准备工作中获取到的配置参数
          // 请在此处配置准备工作中获取到的配置参数
          clientId: '',
          clientSecret: '',
          extId: '',
        });

        uiMeetingKit.on(XYMeetingEventKey.DISCONNECTED, disconnected);
      }
    } catch (error: unknown) {
      console.warn('init client error: ', error);
    }
  };

  // 监听异常退会消息
  const disconnected = () => {
    // 退回加入会议页面
    setMeetingState(MeetingState.Login);
  };

  return <div></div>;
}

export default App;

6、添加登录和呼叫功能

继续编辑src/App.tsx文件，添加加入会议按钮和点击事件；

调用XYRTCClient.loginExternalAccount方法进行三方账号登录，注意配置合适的三方用户ID：extUserId
调用uiMeetingKit.makeCall方法发起呼叫，注意配置云会议号：confNumber

详细代码如下：

import { uiMeetingKit, XYMeetingEventKey, XYShow, XYButton } from '@xylink/meetingkit';

function App() {
    ...
  // 内容同上

  // 加入会议
  const joinMeeting = async () => {
    try {
      setMeetingState(MeetingState.Meeting);

      if (client.current) {
        await client.current.loginExternalAccount({
          extUserId: 'xxxx',
          displayName: '测试MK',
        });

        await uiMeetingKit.makeCall({
          // 请在此处配置云会议号
          // 请在此处配置云会议号
          // 请在此处配置云会议号
          confNumber: '',
          password: '',
          displayName: '测试MK',
          // 入会是否是静音
          muteAudio: false,
          // 入会是否是关闭摄像头
          muteVideo: false,
        });
      }
    } catch (error: unknown) {
      console.log('join meeting error: ', error);
    }
  };

  return (
    <div style={{ width: '100%', height: '100%', padding: '20px' }}>
      {/* 加入会议，XYShow和XYButton组件来自@xylink/meetingkit导出 */}
      <XYShow is={meetingState === MeetingState.Login}>
        <XYButton type="primary" onClick={joinMeeting}>
          加入会议
        </XYButton>
      </XYShow>
    </div>
  );
}

7、添加 MeetingKit 组件

继续编辑src/App.tsx文件，加载组件，代码如下：

import { uiMeetingKit, XYMeetingEventKey, XYShow, XYButton, XYMeetingKitComp } from '@xylink/meetingkit';

function App() {
  ...
  // 内容同上
  
  return (
    <div style={{ width: '100%', height: '100%', padding: '20px' }}>
      {/* 加入会议，XYShow和XYButton组件来自@xylink/meetingkit导出 */}
      <XYShow is={meetingState === MeetingState.Login}>
        <XYButton type="primary" onClick={joinMeeting}>
          加入会议
        </XYButton>
      </XYShow>

      {/* 会中，使用指定容器渲染，如果不指定，则使用顶层容器渲染 */}
      <XYMeetingKitComp visible={meetingState === MeetingState.Meeting} />
    </div>
  );

8、开启调试

执行启动调试命令，使用浏览器打开对应的http://localhost+端口地址访问：

$ npm run dev

点击加入会议按钮，效果如下：

9、完整代码

完整的src/App.tsx如下，可作为参考，同时可以在 Github 中获取完整项目源码；

提示

1、请在createMeetingClient函数中配置clientId、clientSecret、extId

1、请在joinMeeting函数中配置：extUserId、confNumber

import { useEffect, useRef, useState } from 'react';
import { uiMeetingKit, XYMeetingEventKey, XYShow, XYButton, XYMeetingKitComp } from '@xylink/meetingkit';
// 安装MeetingKit后自动安装此依赖
import { XYRTCClient } from '@xylink/xy-rtc-sdk';
import './App.css';
import '@xylink/meetingkit/css/style.css';

export enum MeetingState {
  Login,
  Meeting,
}

function App() {
  // 定义会议状态，默认是登录状态
  const [meetingState, setMeetingState] = useState(MeetingState.Login);
  // 缓存XYRTCClient实例
  const client = useRef<XYRTCClient | null>(null);

  useEffect(() => {
    // 初始化执行
    createMeetingClient();
  }, []);

  // 创建Meeting Client客户端
  const createMeetingClient = async () => {
    try {
      if (!client.current) {
        // 返回SDK Client
        client.current = await uiMeetingKit.createClient({
          // 请在此处配置准备工作中获取到的配置参数
          // 请在此处配置准备工作中获取到的配置参数
          // 请在此处配置准备工作中获取到的配置参数
          clientId: '',
          clientSecret: '',
          extId: '',
        });

        uiMeetingKit.on(XYMeetingEventKey.DISCONNECTED, disconnected);
      }
    } catch (error: unknown) {
      console.warn('init client error: ', error);
    }
  };

  // 监听异常退会消息
  const disconnected = () => {
    // 退回加入会议页面
    setMeetingState(MeetingState.Login);
  };

  // 加入会议
  const joinMeeting = async () => {
    try {
      if (client.current) {
        setMeetingState(MeetingState.Meeting);

        await client.current.loginExternalAccount({
          extUserId: 'xxxx',
          displayName: '测试MK',
        });

        await uiMeetingKit.makeCall({
          // 请在此处配置云会议号
          // 请在此处配置云会议号
          // 请在此处配置云会议号
          confNumber: '',
          password: '',
          displayName: '测试MK',
          // 入会是否是静音
          muteAudio: false,
          // 入会是否是关闭摄像头
          muteVideo: false,
        });
      }
    } catch (error: unknown) {
      console.log('join meeting error: ', error);
    }
  };

  return (
    <div style={{ width: '100%', height: '100%', padding: '20px' }}>
      {/* 加入会议，XYShow和XYButton组件来自@xylink/meetingkit导出 */}
      <XYShow is={meetingState === MeetingState.Login}>
        <XYButton type="primary" onClick={joinMeeting}>
          加入会议
        </XYButton>
      </XYShow>

      {/* 会中，使用指定容器渲染，如果不指定，则使用顶层容器渲染 */}
      <XYMeetingKitComp visible={meetingState === MeetingState.Meeting} />
    </div>
  );
}

export default App;

样式文件如下：

html,
body {
  height: 100%;
  width: 100%;
}

#root {
  width: 800px;
  height: 500px;
}

10、常见问题

如果您在接入和使用中遇到问题，请参见FAQ常见问题。
了解更多详情您可访问小鱼易连官网网站提交咨询和反馈。

2025-01-15 17:40:15

导出PDF文档