集成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 集成
-
安装 npm。
操作步骤请参考 npm 官方文档。
-
通过 vue 搭建一个简单界面的项目,并在项目中使用 npm 安装 SDK 包。
npm install nertc-web-sdk --save
- 在 vue 的项目配置中需设置外部引用 NERTC Web SDK,请勿使用 label 打包 SDK。
- 如果您在 macOS 或 Linux 系统中执行 npm 命令失败,报错
permission denied
,请在 npm 命令前加上sudo
并重新执行即可。
-
在项目脚本里引入模块。
若您对包体积大小有要求,请集成 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"
-
在本地 Web 服务器上运行和测试项目。
本地服务器(localhost 或 127.0.0.1)运行 Web 应用仅作为测试,生产环境必须使用 https 协议。
手动集成
-
在网易云信 SDK 下载中心获取当前最新版本的 NERTC Web SDK,或联系网易云信技术支持获取对应版本的 SDK。
-
通过 vue 搭建一个简单界面的项目。
-
导入 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 文件拷贝到项目文件所在的目录下。
-
在项目文件的 head 中引入
NIM_Web_NERTC_vx.x.x.js
等文件。其中,“x.x.x” 为 SDK 的版本号,请参考压缩包解压后的文件名修改。 -
请在支持的浏览器上打开
index.html
文件,此时您可以看到基本的界面,代表 SDK 已导入完成。
后续步骤
此文档是否对你有帮助?