white-fast-web-sdk
v1.0.2
Published
Downloads
7
Readme
⚡ Open source ultra fast whiteboard.
🎉 Quickstart
Online
Collaborative WhiteBoard
<body>
<div id="app-root"></div>
<script src="https://sdk.herewhite.com/fast-sdk/index.js"></script>
<script type="text/javascript">
var userId = `${Math.floor(Math.random() * 100000)}`;
var uuid = "8c2ee602f11e4883a75a9be9dd51b4cd";
var roomToken = "WHITEcGFydG5lcl9pZD0zZHlaZ1BwWUtwWVN2VDVmNGQ4UGI2M2djVGhncENIOXBBeTcmc2lnPWFhODIxMTQ5NjdhZDdmMmVlMzI1NmJhNjUwNmM2OTJmMzFkNGZiODg6YWRtaW5JZD0xNTgmcm9vbUlkPThjMmVlNjAyZjExZTQ4ODNhNzVhOWJlOWRkNTFiNGNkJnRlYW1JZD0yODMmcm9sZT1yb29tJmV4cGlyZV90aW1lPTE2MDA1MTI0OTYmYWs9M2R5WmdQcFlLcFlTdlQ1ZjRkOFBiNjNnY1RoZ3BDSDlwQXk3JmNyZWF0ZV90aW1lPTE1Njg5NTU1NDQmbm9uY2U9MTU2ODk1NTU0NDAwMjAw";
WhiteFastSDK.Room("app-root",{
uuid: uuid,
roomToken: roomToken,
userId: userId,
});
</script>
</body>WhiteBoard Player
<body>
<div id="app-root"></div>
<script src="https://sdk.herewhite.com/fast-sdk/index.js"></script>
<script type="text/javascript">
var userId = `${Math.floor(Math.random() * 100000)}`;
var uuid = "8c2ee602f11e4883a75a9be9dd51b4cd";
var roomToken = "WHITEcGFydG5lcl9pZD0zZHlaZ1BwWUtwWVN2VDVmNGQ4UGI2M2djVGhncENIOXBBeTcmc2lnPWFhODIxMTQ5NjdhZDdmMmVlMzI1NmJhNjUwNmM2OTJmMzFkNGZiODg6YWRtaW5JZD0xNTgmcm9vbUlkPThjMmVlNjAyZjExZTQ4ODNhNzVhOWJlOWRkNTFiNGNkJnRlYW1JZD0yODMmcm9sZT1yb29tJmV4cGlyZV90aW1lPTE2MDA1MTI0OTYmYWs9M2R5WmdQcFlLcFlTdlQ1ZjRkOFBiNjNnY1RoZ3BDSDlwQXk3JmNyZWF0ZV90aW1lPTE1Njg5NTU1NDQmbm9uY2U9MTU2ODk1NTU0NDAwMjAw";
WhiteFastSDK.Player("app-root",{
uuid: uuid,
roomToken: roomToken,
userId: userId,
});
</script>
</body>📖 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: falseidentity [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: 1569290494106duration [number] optional
How long the player plays
duration: 94106mediaUrl [url] optional
Recorded media
mediaUrl: "https://path/to/media.m3u8"isChatOpen [boolean] optional
isChatOpen: trueboardBackgroundColor [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!