集成指导

环境要求

浏览器要求

在集成测试之前，你需要一台可以支持运行 Web MeetingKit的浏览器：

浏览器	版本	是否兼容
Chrome 谷歌浏览器	v92+	✅
Edge 浏览器	v80+	✅

请选择一款符合条件的现代浏览器进行开发测试，推荐使用最新版本的 Chrome 浏览器，此浏览器兼容性最好；

开发环境要求

小鱼易连 Web MeetingKit 是基于 React 开发的，以下是推荐的开发环境配置：

react和react-dom版本要求：

react：>=18.3.1
react-dom：>=18.3.1

Node.js：>= v18.18.0
JavaScript 或 TypeScript：推荐使用 TypeScript，提供更强的类型检查和开发体验；

快速集成 MeetingKit

不存在React项目？

如果您没有React项目，可按照视频通话文档从零搭建一个项目集成开发，或直接运行快速跑通 DEMO 中的示例项目，开发并部署完成后，通过iframe加载到您的项目中，方便快速接入；

存在React项目

如果您已有React项目，按照以下步骤进行接入：

1. 安装MeetingKit库

$ npm install @xylink/meetingkit -S

2. 导入 MeetingKit 样式：

在会议组件下，导入MeetingKit的样式文件；

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

2. 初始化MeetingKit和添加监听事件

在会议组件下，调用 uiMeetingKit.createClient 创建XYRTCClient实例，并添加监听事件；

提示

请注意配置对应的clientID、clientSecret、extID参数；

import { useEffect } from 'react';
import { uiMeetingKit, XYMeetingEventKey } from '@xylink/meetingkit';

let client;

function APP() {
  // state: 'Login'|'Meeting'，分别代表登录和会议状态
  const [state, setState] = useState('Login');

  useEffect(() => {
    // 执行初始化逻辑，仅需创建一次即可
    createMeetingClient();
  }, []);


  // 创建Meeting Client客户端
  const createMeetingClient = async () => {
    client = await uiMeetingKit.createClient({
      // 请在此处配置准备工作中获取到的配置参数
      clientId: '',
      clientSecret: '',
      extId: '',
      // 默认可不填写，是公有云地址，分区云需要配置
      server: 'cloudapi.xylink.com'
    });
    
    uiMeetingKit.on(XYMeetingEventKey.DISCONNECTED, disconnected);
  }; 
  
  // 监听异常退会消息
  const disconnected = () => {
    // 退回加入会议页面
    setState('Login');
  };
}

3. 添加 MeetingKit 组件，添加呼叫按钮；

通过MeetingKit组件的visible属性控制会议界面的显示和隐藏；

return (
  // 外围显示容器，可以自由限制加载空间
  <div style={{ width: '100%', height: '100%'}} >
    {/* 加入会议，XYShow和XYButton组件来自@xylink/meetingkit导出 */}
    <XYShow is={state === 'Login'}>
      <XYButton type="primary" onClick={joinMeeting}>
        加入会议
      </XYButton>
    </XYShow>

    <XYMeetingKitComp visible={state === 'Meeting'} />
  </div>
)

提示

1. 组件上层可以指定容器渲染，如果不指定，则使用顶层容器渲染；

2. 组件中，内部弹框基于window窗口居中显示；

4. 加入会议操作

执行三方账号登录；
调用 makeCall 发起会议呼叫；

// 加入会议
const joinMeeting = async () => {
  try {
    if (client) {
      // 切换到会议模式，显示MK组件
      setState('Meeting');

      await client.loginExternalAccount({
        // 配置三方用户ID
        extUserId: 'xxxx',
        displayName: '测试MK',
      });

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

5. 完整代码

完整的示例代码如下：

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

let client: XYRTCClient | null = null;

function App() {
  // 定义会议状态，默认是登录状态
  // state: 'Login'|'Meeting'，分别代表登录和会议状态
  const [meetingState, setMeetingState] = useState('Login');

  useEffect(() => {
    // 执行初始化逻辑，仅需创建一次即可
    createMeetingClient();
  }, []);

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

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

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

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

        await client.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%' }}>
      {/* 加入会议，XYShow和XYButton组件来自@xylink/meetingkit导出 */}
      <XYShow is={meetingState === 'Login'}>
        <XYButton type="primary" onClick={joinMeeting}>
          加入会议
        </XYButton>
      </XYShow>

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

export default App;

如果在此过程中存在任何的问题，你可以直接通过相应项目的 Github 提交 Issues，我们会及时和你取得联系解决遇到的问题，如果非常紧急，也可以通过和你对接的人员联系，进而获取技术人员的实时技术支持。

2025-01-16 14:59:50

导出PDF文档