集成SDK

更新时间: 2024/08/05 15:02:55

本文为您介绍 Web 端集成 SDK 的操作步骤,帮助您快速集成 SDK,开始使用互动直播的基本功能。

前提条件

在开始运行工程之前,请您准备以下开发环境:

  • 安全环境:https 环境或者本地连接 localhost/127.0.0.1 环境。
  • 浏览器:Chrome 72 及以上版本、Safari 12 及以上版本。更多浏览器兼容性相关请参考 NERTC Web SDK 支持哪些浏览器

网易云信 Web SDK 仅支持 HTTPS 协议或 localhost(http://127.0.0.1)。请勿使用 HTTP 协议在 localhost 之外访问项目,否则 Web 浏览器控制台会报错 NOT_SUPPORT 41001

集成 SDK

npm 集成

  1. 安装 npm。

    操作步骤请参考 npm 官方文档

  2. 通过 vue 搭建一个简单界面的项目,并在项目中使用 npm 安装 SDK 包。

    npm install nertc-web-sdk --save
    
    • 在 vue 的项目配置中需设置外部引用 NERTC Web SDK,请勿使用 label 打包 SDK。
    • 如果您在 macOS 或 Linux 系统中执行 npm 命令失败,报错 permission denied,请在 npm 命令前加上 sudo 并重新执行即可。
  3. 在项目脚本里引入模块。

    若您对包体积大小有要求,请集成 V4.6.20 及之后版本的 NERTC SDK,实现以插件化的方式按需集成动态库。

    • 若您集成的是 v4.6.20 及之后版本的 NERTC SDK,请添加如下代码。
    import NERTC from "nertc-web-sdk/NERTC"
    
    • 若您集成的是 v4.6.20 之前版本的 NERTC SDK,请添加如下代码。
    import NERTC from "nertc-web-sdk"
    
  4. 在本地 Web 服务器上运行和测试项目。

    本地服务器(localhost 或 127.0.0.1)运行 Web 应用仅作为测试,生产环境必须使用 https 协议。

手动集成

  1. 网易云信 SDK 下载中心获取当前最新版本的 NERTC Web SDK,或联系网易云信技术支持获取对应版本的 SDK。

  2. 通过 vue 搭建一个简单界面的项目。

  3. 导入 SDK。

    若您对包体积大小有要求,请集成 V4.6.20 及之后版本的 NERTC SDK,实现以插件化的方式按需集成动态库。

    • 若您集成的是 v4.6.20 及之后版本的 NERTC SDK,解压 SDK 压缩包后,请参考下表按需将文件拷贝到项目文件所在目录下。
    功能/插件 集成的动态库 是否可选
    音视频 NIM_Web_NERTC_vx.x.x.js 必选
    虚拟背景 NIM_Web_VirtualBackground_vx.x.x.js 可选
    美颜 NIM_Web_AdvancedBeauty_vx.x.x.js 可选
    AI 降噪 NIM_Web_AIDenoise_vx.x.x.js 可选
    • 若您集成的是 v4.6.20 之前版本的 NERTC SDK,解压 SDK 压缩包后,直接将 /js 目录下的 NIM_Web_NERTC_vx.x.x.js 文件拷贝到项目文件所在的目录下。
  4. 在项目文件的 head 中引入 NIM_Web_NERTC_vx.x.x.js 等文件。其中,“x.x.x” 为 SDK 的版本号,请参考压缩包解压后的文件名修改。

  5. 请在支持的浏览器上打开 index.html 文件,此时您可以看到基本的界面,代表 SDK 已导入完成。

后续步骤

实现互动直播

此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 集成 SDK
  • npm 集成
  • 手动集成
  • 后续步骤