{"id":4059,"date":"2021-11-03T17:27:36","date_gmt":"2021-11-03T09:27:36","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=4059"},"modified":"2025-04-11T13:48:01","modified_gmt":"2025-04-11T05:48:01","slug":"annotation","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video-api\/client-api\/web-toolkit\/annotation\/","title":{"rendered":"Annotation: Web SDK &#8211; Video API"},"content":{"rendered":"\n<p>The Annotation feature allows you to annotate on a Remote Stream. To support Annotations, you need to enable Canvas Streaming during&nbsp;<a href=\"..\/..\/..\/server-api\/rooms-route\/#create-room\" target=\"_blank\" rel=\"noreferrer noopener\">Room Creation<\/a>&nbsp;by <code>setting: { canvas: true; }}<\/code> in the JSON payload. To implement Annotation, you need to add Annotation Toolbar before you can start Annotations.<\/p>\n\n\n\n<h4>Table of Contents<\/h4>\n\n\n\n<ul><li><a href=\"#annotation-toolbar\">Annotation Toolbar<\/a><\/li><li><a href=\"#annotation-start\">Start Annotation<\/a><\/li><li><a href=\"#annotation-stop\">Stop Annotation<\/a><\/li><\/ul>\n\n\n\n<a name=\"annotation-toolbar\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Annotation Toolbar<\/h3>\n\n\n\n<p>The Annotation Toolbar appears with a default set of tools and properties. The <code>EnxRoom.annotateToolAction()<\/code> method allows you to configure the Annotation Toolbar.<\/p>\n\n\n\n<p><strong>Class:<\/strong> <code>EnxRoom<\/code><\/p>\n\n\n\n<p><strong>Method: <\/strong><code>EnxRoom.annotateToolAction(action, value)<\/code><\/p>\n\n\n\n<p><strong>Parameters:<\/strong> <\/p>\n\n\n\n<ul><li><code>action<\/code>:  String. Tool property name. Following tools are used as action:<ul><li><code>draw<\/code> : Boolean.<\/li><li><code>drawType<\/code> : String e.g. Pencil.<\/li><li><code>Color<\/code> : String. HEX Color Code e.g. #ff0000<\/li><li><code>LineWidth<\/code> : Numeric. Default: 3<\/li><\/ul><\/li><li><code>value<\/code>: value of the Tool as explained above.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">function annotateToolAction(\"Color\", \"#ff0000\") {\n}<\/pre>\n\n\n\n<a name=\"annotation-start\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Start Annotation<\/h3>\n\n\n\n<p>The&nbsp;<code>EnxRoom.startAnnotation()<\/code>&nbsp;method is used to start Annotation on a given Stream object. <\/p>\n\n\n\n<p><strong>Class:<\/strong> <code>EnxRoom<\/code><\/p>\n\n\n\n<p><strong>Methods:<\/strong> <code>EnxRoomstartAnnotation(EnxStream, Callback)<\/code>&nbsp; <\/p>\n\n\n\n<p><strong>Parameter:<\/strong>&nbsp;<\/p>\n\n\n\n<p><code>EnxStream<\/code> &#8211; Stream Object that needs to be annotated.<\/p>\n\n\n\n<p><strong>Event Listeners:<\/strong><\/p>\n\n\n\n<ul><li><code>canvas-started<\/code>&nbsp;&#8211; Notification to everyone in the Room when canvas streaming starts. The event message contains <code>\"canvasType == \"Annotation<\/code>&#8221;  to identify it as Annotation.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">const stream = roomObject.remoteStreams.get(streamId);\nroomObject.startAnnotation(stream, function (arg) {\n\tconsole.log(arg, \"arg\");\n});\n\n\/\/All are notified that Annotation started\nroomObject.addEventListener(\"canvas-started \", function(evt) {\n\t\/* evt.canvasType === \"Annotation\" *\/ \n}); \n<\/pre>\n\n\n\n<a name=\"annotation-stop\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Stop Annotation<\/h3>\n\n\n\n<p>The&nbsp;<code>EnxRoom.stopAnnotation()<\/code>&nbsp;method is used to stop Annotations.<\/p>\n\n\n\n<p><strong>Methods<\/strong>:<code>EnxRoom.stopAnnotation(Callback)<\/code>&nbsp; <\/p>\n\n\n\n<p><strong>Event Listeners:<\/strong><\/p>\n\n\n\n<ul><li><code>canvas-stopped<\/code>&nbsp;\u2013 Notification to everyone in the Room when canvas streaming stops. The event message contains <code>\"canvasType == \"Annotation<\/code>&#8221; to identify it as Annotation.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">roomObject.stopAnnotation(function (arg) {\n});\n\n\/\/All are notified that Annotation stopped\nroomObject.addEventListener(\"canvas-stopped \", function(evt) {\n\t\/* evt.canvasType === \"Annotation\" *\/ \n}); <\/pre>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<p> \u2190 <a href=\"..\/canvas-streaming\/\" data-type=\"URL\">Canvas Streaming<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-center\"> <a href=\"..\/\">Index<\/a> <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-right\"><a href=\"..\/recording\/\">Record a Session<\/a> \u2192 <\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Annotation feature allows you to annotate on a Remote Stream. To support Annotations, you need to enable Canvas Streaming during&nbsp;Room Creation&nbsp;by setting: { canvas: true; }} in the JSON payload. To implement Annotation, you need to add Annotation Toolbar before you can start Annotations. Table of Contents Annotation Toolbar Start Annotation Stop Annotation Annotation Toolbar The Annotation Toolbar appears with a default set of tools and properties. The EnxRoom.annotateToolAction()&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3724,"menu_order":0,"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":"The Annotation feature allows you to annotate on a Remote Stream. To support Annotations, you need to enable Canvas Streaming during&nbsp;Room Creation&nbsp;by setting: { canvas: true; }} in the JSON payload. To implement Annotation, you need to add Annotation Toolbar before you can start Annotations. Table of Contents Annotation Toolbar Start Annotation Stop Annotation Annotation&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4059"}],"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=4059"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4059\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/3724"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=4059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}