集成 SDK

更新时间: 2024/08/16 09:24:22

本文为您展示通过 NEMeetingKit 实现音视频会议的相关步骤,帮助您在业务中实现创建会议、预约会议、查询会议信息等在线会议场景下的相关能力。

前提条件

在根据本文操作前,请确保您已在网易云信控制台上,完成以下设置:

  1. 网易云信控制台 创建至少一个应用。若无应用,请参考 创建应用并获取 AppKey
  2. 开通 视频会议 解决方案。具体步骤可参考 方案开通

开发环境

在客户端实现音视频会议功能之前,请您准备以下开发环境:

环境类型 具体要求

浏览器

  • Chrome:74 及以上版本
  • Safari:12 及以上版本
Node 8 及以上版本

注意事项

  • 请使用 https 协议访问网易会议组件的 Domain。
  • 不建议通过 require 方式引入 SDK,可能存在选择设备无效等问题。

方式 1:通过 script 标签引入 SDK

配置步骤

  1. 在本地文件夹中创建网易会议组件的项目文件夹,并将解压后的网易会议组件 SDK 拷贝到项目文件夹中。文件目录类似如下:

    ├── index.html
    ├── NEMeetingKit_V4.x.x.js
    
  2. 将如下代码添加到 index.html 页面的 body 底部中。

    HTML<script src="./NEMeetingKit_V4.x.x.js"></script>//将文件路径替换为网易会议组件在本地的相对路径,版本号请替换为对应的版本号
    
  3. 在页面添加 ID 为 ne-web-meeting 的元素(用于挂载网易会议组件)。

    HTML<div id="ne-web-meeting"></div>
    

    该 ID 为固定值,请不要修改。

  4. 初始化网易会议组件。

    JavaScriptNEMeetingKit.actions.init(800, 800, config, (e) => {
        // 初始化完成回调
    });
    

示例代码

HTML<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="ne-web-meeting"></div>
  <script src="./NEMeetingKit_v4.x.x.js"></script> //将文件路径替换为网易会议组件在本地的相对路径,版本号请替换为对应的版本号
  <script>
    // 先执行项目初始化,将会议初始化操作执行结束后,会依据初始化提供的宽高,进行占位
    // 3.8.0 版本开始初始化为异步方法,新增回调函数。
    NEMeetingKit.actions.init(800, 800, config, (e) => {
        // 初始化完成回调
    });
  </script>
</body>
</html>

方式 2:通过 esmodule 方式引入 SDK

  1. 将网易会议组件 SDK 拷贝到项目文件夹中。文件目录类似如下:
Bash├── index.js
├── NEMeetingKit_V4.x.x.js
  1. 将如下代码添加到 index.js 中。

    JavaScriptimport { actions } from './NEMeetingKit_V4.x.x.js' //将文件路径替换为网易会议组件在本地的相对路径,版本号请替换为对应的版本号
    aciotns.init(800, 800, config, (e) => {
        // 初始化完成回调
    });
    // or
    import NEMeetingKit from './NEMeetingKit_V4.x.x.js'
    NEMeetingKit.init(800, 800, config, (e) => {
        // 初始化完成回调
    });
    

下一步

调用网易会议组件接口 实现基础功能,例如调用初始化接口,并传入您在网易云信控制台上创建应用时获取的密钥(AppKey)。

此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 开发环境
  • 注意事项
  • 方式 1:通过 script 标签引入 SDK
  • 配置步骤
  • 示例代码
  • 方式 2:通过 esmodule 方式引入 SDK
  • 下一步