White-fast-web-sdk NPM

npm.io

English | 简体中文 | 日本語

GitHub

⚡ Open source ultra fast whiteboard.

🎉 Quickstart

Online

codepen

jsrun#china

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: 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 dev in 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!