You can use package management tools (such as npm and yarn) to install White SDK, or directly import JS files.
npm and yarn are well-known package management tools in the JavaScript community. If yours happens to use one of them, you can directly use them to install White SDK. If you don't know what a package management tool is, you can read the following two articles first.
Use the following command to install white-web-sdk.
npm
npm install white-web-sdk
yarn
yarn add white-web-sdk
If you use React to develop web applications, you can install white-react-sdk. This library is a superset of white-web-sdk, which not only provides components that can be used directly by React, but also can completely replace white-web-sdk.
You may decide to install without any package management tools. For example, in order to reduce the size of the JS file and optimize the page loading speed, it was decided to only use the White SDK on the pages that need to use the whiteboard. Then, you can also install the White SDK by directly importing the URL of the JS file in <head>.
Insert the following code in the <head> in the html file.
<head>
<script src="https://sdk.herewhite.com/white-web-sdk/2.10.2.js"></script>
</head>
If you use packaging tools such as webpack and install White SDK with package management tools such as npm and yarn, you can import the project in the following way.
In the content after the advanced tutorial, we will default you to introduce the project in this way.
JavaScript
var WhiteWebSdk = require("white-web-sdk");
ES 6
import WhiteWebSdk from "white-web-sdk";
TypeScript
import * as WhiteWebSdk from "white-web-sdk";
If you use the method of directly referencing the URL of the JS file in the <head> to install the White SDK, you can use the following code to get the global variable named WhiteWebSdk.
var WhiteWebSdk = window.WhiteWebSdk;
The order of
<script>tags in<head>is very important. Please make sure that the JS file ofwhite-web-sdkis before the JS file of your business code. Only in this way can the business code successfully obtain the global variableWhiteWebSdk.
The API of White SDK generally uses enumeration types. For example, you can reference the enumeration type RoomPhase with the following code.
JavaScript
var RoomPhase = require("white-web-sdk").RoomPhase;
console.log(RoomPhase.Connected);
ES 6
import {RoomPhase} from "white-web-sdk";
console.log(RoomPhase.Connected);
TypeScript
import {RoomPhase} from "white-web-sdk";
console.log(RoomPhase.Connected);
In white-web-sdk, all enumerated types are essentially string. For example, the value of RoomPhase.Connected is the string "connected". This example can be generalized. In fact, all enumerated types can be replaced by strings with its little camel case.
If you don’t understand the little hump naming rule, you can read 《Hump case》
We recommend not to replace enumerations with strings. It is very difficult to develop in this way. If you accidentally spell a word incorrectly or have a bug, it is also difficult to locate. With enumeration, the IDE and compiler can directly block spelling errors.
If you use the method of inserting
<script>in<head>to install White SDK, you cannot use enumerated types. At this point, you have to replace enumeration types with strings.