互动白板
  • iOS
  • Android
  • macOS
  • Windows
  • Web : JavaScript
  • Electron
  • 概述
  • 价格说明
  • 下载
  • 体验 App
  • 跑通示例源码
  • 接入指南
  • 快速开始
  • 场景实践
  • 常见错误码
  • 服务端 API
  • 客户端 API
  • 常见问题

集成

更新时间: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 (可选)新建项目

此步骤以如何创建新项目为例,如果是集成到已有项目,可忽略此步。
  1. 创建一个文件夹作为项目文件夹,结构类似如下:
├── index.html
├── sdk
├── js
│   └── index.js
└── css
    └── index.css
  • “index.html” 文件:为项目的前端页面文件。
  • “sdk” 目录:用于存放 ZegoWhiteboardView SDK 文件。
  • “js” 目录下的 “index.js” 文件:为实现 ZegoWhiteboardView 功能的 JavaScript 代码。
  • “css” 目录下的 “index.css” 文件:用于设置页面的样式。
  1. 将以下代码拷贝到 “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>
  1. 在本地 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;