本文为您介绍 Web 端集成 SDK 的操作步骤，帮助您快速集成 SDK，开始使用音视频通话的基本功能。

前提条件

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

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

集成 SDK

npm 集成

1. 安装 npm。

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

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

   npm install nertc-web-sdk --save
   

   • 在 vue 的项目配置中需设置外部引用 NERTC Web SDK，请勿使用 babel 打包 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_AIAudioEffects_vx.x.x.js	可选
   啸叫检测	NIM_Web_AIhowling_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 已导入完成。

后续步骤

实现音视频通话