⚡ Open source ultra fast whiteboard.
🎉 Quickstart
Online
Collaborative WhiteBoard
WhiteBoard Player
📖 Documentation
When setting your whiteboard widget in code, you have several configs at your disposal all of which are described in detail below.
WhiteBoard
To create a whiteboard, invoke a WhiteFastSDK.Room method in which you write the selected element in which you want to add the whiteboard and preferred configs.
- element [string] – contains a reference to the element in which whiteboard is
- configs [object] – options object
uuid [string] required
Room indentify.
uuid: "8c2ee602f11e4883a75a9be9dd51b4cd"
roomToken [string] required
Room auth token.
roomToken: "WHITEcGFydG5lcl9pZD....TOO...LONG"
userId [string] required
User indentify.
userId: "wdqzidmac"
userName [string] optional
User name.
userName: "rick"
userAvatarUrl [string] optional
User avatar url.
userAvatarUrl: "https://ohuuyffq2.qnssl.com/netless_icon.png"
logoUrl [url] optional
With the default value as undefined, Custom branding logo.
logoUrl: "https://path/to/logo.png"
toolBarPosition [string] optional
With the default value as top, ToolBar position, value include left,top,bottom,right.
toolBarPosition: "left"
pagePreviewPosition [string] optional
With the default value as right, Preview view position, value include left, right.
pagePreviewPosition: "left"
boardBackgroundColor [color] optional
With the default value as white, Background color.
boardBackgroundColor: "#F2F2F2"
isReadOnly [boolean] optional
With the default value as false, read-only meaning can not write at board.
isReadOnly: false
identity [string] optional
With the default value as host, value include host, guest, listener.
identity: “guest”
defaultColorArray [string[]] optional
defaultColorArray: [
"#EC3455",
"#005BF6",
"#F5AD46",
"#68AB5D",
"#9E51B6",
"#1E2023",
];
roomCallback [(room: Room) => void] optional
roomCallback: (room) => {
console.log(room);
}
colorArrayStateCallback [(colorArray: string[]) => void] optional
colorArrayStateCallback: (colorArray) => {
console.log(colorArray);
}
WhiteBoard Player
To create a player, invoke a WhiteFastSDK.Player method in which you write the selected element in which you want to add the player and preferred configs.
- element [string] – contains a reference to the element in which whiteboard is
- configs [object] – options object
uuid [string] required
Room indentify.
uuid: "8c2ee602f11e4883a75a9be9dd51b4cd"
roomToken [string] required
Room auth token.
roomToken: "WHITEcGFydG5lcl9pZD....TOO...LONG"
userId [string] required
User indentify.
userId: "wdqzidmac"
userName [string] optional
User name.
userName: "rick"
userAvatarUrl [string] optional
User avatar url.
userAvatarUrl: "https://ohuuyffq2.qnssl.com/netless_icon.png"
logoUrl [url] optional
With the default value as undefined, Custom branding logo.
logoUrl: "https://path/to/logo.png"
beginTimestamp [number] optional
UTC time when the player starts playing
beginTimestamp: 1569290494106
duration [number] optional
How long the player plays
duration: 94106
mediaUrl [url] optional
Recorded media
mediaUrl: "https://path/to/media.m3u8"
isChatOpen [boolean] optional
isChatOpen: true
boardBackgroundColor [color] optional
With the default value as white, Background color.
boardBackgroundColor: "#F2F2F2"
Callback [(player: Player) => void] optional
playerCallback: (player) => {
console.log(player);
}
🚀 Development
- Run
yarn devin your terminal - Live room by open facade/index.html
- Player by open facade/player.html
👏 Contributing
Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.
- Fork the repo on GitHub
- Clone the project to your own machine
- Commit changes to your own branch
- Push your work back up to your fork
- Submit a Pull request so that we can review your changes NOTE: Be sure to merge the latest from "upstream" before making a pull request!