文档中心
互动白板
快速开始
集成

集成

更新时间：2022-04-13 14:05

1 前提条件

如果需要使用文件共享功能，请下载 ZegoDocsView SDK。

2 准备环境

在开始集成 ZegoWhiteboardView SDK 前，请确保开发环境满足以下要求：

准备一台可以连接到互联网的 Windows 或 macOS 计算机。
获取摄像头麦克风等行为需运行在 HTTPS 环境下，集成 SDK 之前，请确保最终项目能够运行在 HTTPS 环境下。开发环境下则可先通过本地运行规避，例如 localhost 或 127.0.0.1。
使用 SDK 支持的浏览器，目前 SDK 支持的浏览器版本如下：

平台	浏览器/Webview	备注
Windows	Chrome	支持 win7 或以上
macOS	Chrome	支持 macOS 10.10 或以上
iOS	Safari	支持 iOS 10.0 或以上
iOS	微信内嵌浏览器	支持 iOS 10.0 或以上
Android	Chrome	支持 Android 8.0 或以上
Android	微信内嵌浏览器	支持 Android 8.0 或以上

3 集成 SDK

3.1 （可选）新建项目

此步骤以如何创建新项目为例，如果是集成到已有项目，可忽略此步。

创建一个文件夹作为项目文件夹，结构类似如下：

├── index.html
├── sdk
├── js
│   └── index.js
└── css
    └── index.css

“index.html” 文件：为项目的前端页面文件。
“sdk” 目录：用于存放 ZegoWhiteboardView SDK 文件。
“js” 目录下的 “index.js” 文件：为实现 ZegoWhiteboardView 功能的 JavaScript 代码。
“css” 目录下的 “index.css” 文件：用于设置页面的样式。

将以下代码拷贝到 “index.html” 文件中。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ZegoWhiteboardView</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app"></div>
    <script src="./js/index.js"></script>
</body>
</html>

在本地 Web 服务器上运行和测试该项目。

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

a. 在命令行中执行 npm i live-server -g 命令，安装 live-server。

b. 进入项目所在的根目录。

c. 执行 live-server . 命令运行该项目，浏览器会自动打开 “index.html” 页面。

3.2 下载 SDK

3.2.1 从官网下载 SDK

请从 ZegoWhiteboardView 下载 SDK。

历史版本更新，请查看发布历史。

3.2.2 npm 下载 SDK

npm i zego-express-whiteboard-web

互动白板 2.2.0 及之前版本的 SDK 仅适配 ZegoExpress-Video 2.14.0 及之前的 SDK。
npm 下载包支持 typescript 语言(推荐)。

3.3 导入 SDK

可使用 script 直接引入

<script src="ZegoExpressWhiteboardWeb.js"></script>

或者

import { ZegoExpressEngine } from 'zego-express-whiteboard-web';
// 或
const ZegoExpressEngine = require('zego-express-whiteboard-web').ZegoExpressEngine;