Table of Contents<\/p>\n\n\n\n
The Whiteboard is an independent library available on GitHub and the Developer Center, designed to help developers easily deploy a whiteboard with streaming and collaboration features for session participants.<\/p>\n\n\n\n
The Whiteboard has all basic tools inbuilt. It is developed using Open Source Fabric.js (http:\/\/fabricjs.com\/<\/a>). In case you look to extend it and create richer set of Tools, you are free to do so using Fabric.js library.<\/p>\n\n\n\n Release Date: January 1, 2025. File Size: 441KB<\/p>\n\n\n\n<\/a>\n\n\n\n Create an Object of Parameter: <\/strong>A JSON Object, attributes explained below:<\/p>\n\n\n\n You need to draw the Whiteboard to get make it appear in the HTML DOM using the Method:<\/strong> Parameter<\/strong>: If you want\nto start streaming your Whiteboard, the Whiteboard contents will be viewable to\nremote participants as video stream and will be playable in a Video Player. The\nStreamed Whiteboard may also be recorded for future reference. <\/p>\n\n\n\n Methods:<\/strong> <\/p>\n\n\n\n Note:<\/strong> The Whiteboard Toolbar has toggle buttons\nto start\/stop streaming. The methods explained above are called by clicking the\nbuttons. However, these methods accessible to you to create your own UI to\nstart \/ stop streaming.<\/p>\n\n\n\n<\/a>\n\n\n\n If you want\nto collaborate Whiteboard with other participants, they will also be able to use\nthe Whiteboard to edit\/collaborate in it. When you share the Whiteboard with\nothers, the UI Component appears in the View in HTML DOM. <\/p>\n\n\n\n Methods:<\/strong> <\/p>\n\n\n\n Note:<\/strong> The Whiteboard Toolbar has toggle buttons\nto start\/stop Whiteboard Collaboration. The methods explained above are called\nby clicking these buttons. However, these methods accessible to you to create\nyour own UI to start \/ stop Collaboration.<\/p>\n\n\n\n<\/a>\n\n\n\n If you want\nto collaborate Whiteboard with specific participant, he will also be able to\nuse the Whiteboard to edit\/collaborate in it. When you share the Whiteboard\nwith a participant, the UI Component appears in the View in HTML DOM at\ndesignated Participants\u2019 end-point. <\/p>\n\n\n\n Method<\/strong>: Note<\/strong>: When you collaborate Whiteboard with all participants; you still need to use the <\/p>\n","protected":false},"excerpt":{"rendered":" Table of Contents Overview How to integrate? Methods Initiate Whiteboard Create Whiteboard Start \/ Stop Streaming Start \/ Stop Collaboration Collaborate with a Participant References Overview The Whiteboard is an independent library available on GitHub and the Developer Center, designed to help developers easily deploy a whiteboard with streaming and collaboration features for session participants. The Whiteboard has all basic tools inbuilt. It is developed using Open Source Fabric.js (http:\/\/fabricjs.com\/).… <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":116,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ub_ctt_via":""},"featured_image_src":null,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"featured":false,"featured-large":false},"uagb_author_info":{"display_name":"vcxdevwpadmin","author_link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/author\/vcxdevwpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"Table of Contents Overview How to integrate? Methods Initiate Whiteboard Create Whiteboard Start \/ Stop Streaming Start \/ Stop Collaboration Collaborate with a Participant References Overview The Whiteboard is an independent library available on GitHub and the Developer Center, designed to help developers easily deploy a whiteboard with streaming and collaboration features for session participants.…","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/742"}],"collection":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/comments?post=742"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/742\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/116"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}How to Integrate?<\/h2>\n\n\n\n
EnxWB.js<\/code> and EnxWB.js.map<\/code> files to a designated folder within Virtual Root.<\/li>EnxWB.js<\/code> file in your HTML through <Script><\/code> Tag. <\/li>Methods<\/h2>\n\n\n\n<\/a>\n\n\n\n
Initiate Whiteboard<\/h3>\n\n\n\n
EnxWb<\/code> Class with a JSON Payload to define Whiteboard UI Components.<\/p>\n\n\n\nvar wbObject = new EnxWb(\n\t{\tcanvasId: 'wb',\t\t\/\/ id of the Canvas DOM Element \n\t\tinitialWidth: 1000,\n\t\tinitialHeight: 500,\n\t\tscheme : 'default'\n\t}\n);<\/pre>\n\n\n\ncanvasId<\/code>: The HTML CANVAS Element ID which will be used with the Whiteboard. <\/li>initialWidth<\/code>: Width of the Whiteboard in pixel.<\/li>initialHeight<\/code>: Height of the Whiteboard in pixel<\/li>scheme<\/code>: It\u2019s a scheme \/ template definition of Whiteboard UI Components. You can use default scheme. In case you want to re-define, use custom scheme. And, when you use custom scheme, you need to define each UI component separately using a new object called custom in the JSON payload. E.g.<\/li>custom<\/code>: Optional. Custom Scheme definition object, in case you are usin scheme=custom. <\/li><\/ul>\n\n\n\nVar wbObject = new EnxWb(\n\t{\tcanvasId: 'wb', \/\/ id of the canvas \n\t\tinitialWidth: 1000,\n\t\tinitialHeight: 500,\n\t\tscheme : 'custom',\n\t\tcustom: {\n\t\t\tbgColor : 'red',\t\t\/* WB Backbround *\/\n\t\t\ttoolbarBGColor : 'black',\t\/* Toolbar Background *\/\n\t\t\tbrushColor:'black',\t\t\/* Default Brush Color *\/\n\t\t\ticon : {\t\t\t\/* Toolbar Icon definition *\/\n\t\t\t\tsize: 'medium', \/* Enum: small,large,medium *\/\n\t\t\t\ttype: 'rounded-square', \/* Enum: square,rounded-square *\/\n\t\t\t\tBGColor: '#f3f3f3',\t\/* Tool Background *\/\n\t\t\t\tFGColor: '#000000',\t\/* Tool Foreground *\/\n\t\t\t\tborder: '1px solid grey'\/* Tool Border *\/\n\t\t\t}\n\t\t}\n\t}\n);<\/pre>\n\n\n\n<\/a>\n\n\n\nCreate Whiteboard<\/h3>\n\n\n\n
EnxWb.create()<\/code> method. <\/p>\n\n\n\nEnxWb.create( EnxRoom-Object )<\/code><\/p>\n\n\n\nEnxRoom-Object<\/code>: It\u2019s the Room Object with which the Whiteboard to get connected to for streaming and collaboration.<\/p>\n\n\n\nwbObject.create(roomObject);<\/pre>\n\n\n\n<\/a>\n\n\n\n
Start \/ Stop Whiteboard Streaming<\/h3>\n\n\n\n
EnxWb.startStreaming()<\/code> – To start streaming<\/li>EnxWb.stopStreaming()<\/code> – To stop streaming<\/li><\/ul>\n\n\n\nwbObject.startStreaming();\nwbObject.stopStreaming();<\/pre>\n\n\n\n
Start \/ Stop Whiteboard Collaboration<\/h3>\n\n\n\n
EnxWb.startCollaboration()<\/code> – To start collaboration with others<\/li>EnxWb.stopStreaming()<\/code> – To stop collaboration with others<\/li><\/ul>\n\n\n\nwbObject.startCollaboration();\nwbObject.stopCollaboration();<\/pre>\n\n\n\n
Whiteboard Collaboration with designated Participant<\/h3>\n\n\n\n
EnxWb.shareWith(clientId)<\/code> – To start collaboration with participant specified by clientId parameter.
Parameter:<\/strong> clientId<\/code>\u2013 Client ID of the participant whom you wish to grant Collaboration Rights. <\/p>\n\n\n\nwbObject.shareWith(clientId);<\/pre>\n\n\n\n
shareWith()<\/code> method to share the whiteboard with any new participant joining the session after the initial startCollaboration()<\/code> was invoked. To do so, refer the following sample code: <\/p>\n\n\n\n\/\/ A new user connected. user JSON has user information\nroom.addEventListener(\"user-connected\", function(event) {\n \/\/ Share the Whiteboard for Collaboration\n wbObject.shareWith(event.clientId);\n});<\/pre>\n\n\n\n<\/a>\n\n\n\nReferences<\/h2>\n\n\n\n