{"id":1575,"date":"2023-05-27T12:43:51","date_gmt":"2023-05-27T07:13:51","guid":{"rendered":"https:\/\/www.enablex.io\/insights\/?p=1575"},"modified":"2025-06-06T06:17:42","modified_gmt":"2025-06-06T00:47:42","slug":"live-video-assistance-with-annotation-for-field-support-using-enablex-apis","status":"publish","type":"post","link":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/","title":{"rendered":"Live Video Assistance with Annotation for Field Support Using EnableX APIs"},"content":{"rendered":"<p>In a world that\u2019s fast inclining towards live video communication, one of the high-demand use cases is the technical support for field service agents. When a field service agent is seeking guidance from a domain expert, a visual aid comes in handy. The tool can be used to pinpoint the issue or demonstrate the error, and this is where Annotations fit in. Annotations allow you to graphically point out and provide inputs over a live video stream.<\/p>\n<p>In this tutorial, let us learn how to build a live video conferencing application with annotation capability. We will be making use of EnableX &#8211; a cloud-based communications platform that provides all the necessary toolkits\/APIs &#8211; to implement <a href=\"https:\/\/www.enablex.io\/cpaas\/video-api\">video calling<\/a> capability with annotations in your Android application.<\/p>\n<p>The EnableX Annotation features allow you to conduct the following:<\/p>\n<ul style=\"margin-left: 40px;\">\n<li>Annotates over a shared video stream<\/li>\n<li>Screen capture<\/li>\n<li>Predefined drawing tools and custom shapes<\/li>\n<li>On-the-fly customisation of the Annotations e.g. thickness and colour<\/li>\n<\/ul>\n<p>Now, let me show you how to implement video conferencing with annotations in an Android application using EnableX <a href=\"https:\/\/www.enablex.io\/cpaas\/video-api\">video SDK<\/a> for Android.<\/p>\n<h2>Implement one-to-one video conferencing using EnableX<\/h2>\n<p>Before we jump on the Annotations part, we should have an Android application with video conferencing capability. Please follow our blog \u201c<a href=\"https:\/\/www.enablex.io\/insights\/how-to-build-a-video-conferencing-app-for-android-with-enablex-apis\/\">How to build a video conference app in android with EnableX<\/a>\u201d on how to implement video conferencing in your Android application.<\/p>\n<h2>Add Annotations in a one-to-one video-conferencing application<\/h2>\n<p>Now that we have an Android application with <a href=\"https:\/\/www.enablex.io\/cpaas\/video-api\">video calling<\/a>, let\u2019s Annotate!<\/p>\n<h3>Add annotation toolbar<\/h3>\n<p>To initiate Annotation Toolbar, use the following code snippet in XML:<\/p>\n<pre><code>\r\n        &lt;enx_rtc_android.annotations.EnxAnnotationsToolbar\r\n        \r\n        android:id=\"@+id\/annotations_bar\"\r\n    \r\n        android:layout_width=\"match_parent\"\r\n            \r\n        android:layout_height=\"wrap_content\"\/&gt;\r\n    <\/code><\/pre>\n<h3>Start Annotations<\/h3>\n<p><strong style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;\">1. Set AnnotationObserver<\/strong><span style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;\"> after getting connected to a Room.<\/span><\/p>\n<pre><code>            \/\/ Called when room is connected successfully\r\n            @Override\r\n                public void onRoomConnected(EnxRoom enxRoom, JSONObject roomMetaData) {\r\n                    enxRoom.setAnnotationObserver(annotation-observer-instance);\r\n                }\r\n          <\/code><\/pre>\n<p><strong>2. Pick the media Stream<\/strong><\/p>\n<p>GetActiveTalkers() would return you a list of media Streams connected to the Room. You can pick the EnxStream out of this list to annotate. It is almost customary to pick from the first index in the list which implies the most recently active media Stream. Annotations are typically implemented on a one-to-one basis in the conference to avoid any alignment or scaling issues.<\/p>\n<p><strong>3. Start Annotations <\/strong>by calling the enxRoom.startAnnotation() on the picked video Stream.<\/p>\n<pre><code>\/\/ To Start annotations\r\n            enxRoom.startAnnotation(enxStream);\r\n         <\/code><\/pre>\n<p><strong>4. Handle Events<\/strong><\/p>\n<p>After EnxRoom.startAnnotation() is successfully executed, it sends the following event notifications:<\/p>\n<p><strong>OnStartAnnotationAck:<\/strong> Notifies the Annotator (the user who started the annotations) that she can now start annotating. You can start the process by making the toolbar visible.<\/p>\n<pre><code>@Override\r\n                public void onStartAnnotationAck(JSONObject jsonObject) {\r\n                  enxAnnotationsToolbar.setVisibility(View.VISIBLE);\r\n                }\r\n              <\/code><\/pre>\n<p><strong>OnAnnotationStarted: <\/strong>Notifies the other users connected to the Room that the Annotator shall now start annotating.<\/p>\n<p>To support the visibility of annotations in the Room, the annotation\u2019s view must be added to the frame layout.<\/p>\n<p><strong>mAnnotationViewContainer <\/strong>\u2013 Frame layout view initialized in XML.<\/p>\n<p><strong>enxStream.mEnxPlayerView<\/strong> &#8211; Annotation\u2019s view added in the frame layout<\/p>\n<pre><code>\r\n                @Override\r\n                public void onAnnotationStarted(EnxStream enxStream) {\r\n                    \/\/ frame layout view initialized\r\n                    mAnnotationViewContainer.setVisibility(View.VISIBLE);\r\n                    \r\n                mAnnotationViewContainer.removeAllViews();\r\n                    \/\/ Annotations view added in the frame layout\r\n                    mAnnotationViewContainer.addView(enxStream.mEnxPlayerView);\r\n                }\r\n                <\/code><\/pre>\n<p>This is how the Annotation screen will look like:<\/p>\n<p><img decoding=\"async\" class=\"size-medium wp-image-1576 alignleft\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation1-168x300.png\" alt=\"\" width=\"168\" height=\"300\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation1-168x300.png 168w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation1.png 174w\" sizes=\"(max-width: 168px) 100vw, 168px\" \/>\u00a0 \u00a0<img decoding=\"async\" class=\"size-medium wp-image-1577 alignleft\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation2-168x300.png\" alt=\"\" width=\"168\" height=\"300\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation2-168x300.png 168w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation2.png 174w\" sizes=\"(max-width: 168px) 100vw, 168px\" \/>\u00a0 \u00a0<img decoding=\"async\" class=\"size-medium wp-image-1578 alignleft\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation3-168x300.png\" alt=\"\" width=\"168\" height=\"300\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation3-168x300.png 168w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation3.png 174w\" sizes=\"(max-width: 168px) 100vw, 168px\" \/>\u00a0 \u00a0<img decoding=\"async\" class=\"size-medium wp-image-1579 alignleft\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation4-168x300.png\" alt=\"\" width=\"168\" height=\"300\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation4-168x300.png 168w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation4.png 174w\" sizes=\"(max-width: 168px) 100vw, 168px\" \/> \u00a0 <img decoding=\"async\" class=\"size-medium wp-image-1580 alignleft\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation5-168x300.png\" alt=\"\" width=\"168\" height=\"300\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation5-168x300.png 168w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Annotation5.png 174w\" sizes=\"(max-width: 168px) 100vw, 168px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: bold;\">Stop Annotations<\/span><b>\u00a0<\/b><\/p>\n<p>You can Stop Annotations by calling the EnxRoom.stopAnnotations() method.<\/p>\n<pre><code>\/\/ To stop annotations\r\n            enxRoom.stopAnnotations();\r\n         <\/code><\/pre>\n<p>The successful execution of stopAnnotations() would trigger the following event notifications:<\/p>\n<p><strong> OnStoppedAnnotationAck:<\/strong> Notifies the Annotator that the annotations have been stopped. The annotator can now hide the toolbar.<\/p>\n<pre><code>\r\n             @Override\r\n            public void onStoppedAnnotationAck(JSONObject jsonObject) {\r\n              enxAnnotationsToolbar.setVisibility(View.GONE);\r\n            }\r\n          <\/code><\/pre>\n<p><strong> OnAnnotationStopped:<\/strong> Notifies other users connected to the Room that the annotations have been stopped. The annotation view can now be removed from the frame layout.<\/p>\n<pre><code>\r\n            @Override\r\n            public void onAnnotationStopped(EnxStream enxStream) {\r\n              mAnnotationViewContainer.setVisibility(View.GONE);\r\n          ((ViewGroup) mAnnotationViewContainer).removeView(enxStream.EnxPlayerView);\r\n              mAnnotationViewContainer.removeAllViews();\r\n            }\r\n          <\/code><\/pre>\n<h2>Build and Test on Device<\/h2>\n<p>Go to Android Studio, plug in your Android device, and click on Run to build the application on your device. Remember to build the application on two devices so you can initiate a video call between the two devices.<\/p>\n<p>Congratulations! You just built a video conferencing application with annotations.<\/p>\n<p>Refer to the complete <a href=\"https:\/\/github.com\/EnableX\/1-to-1-Video-Chat-Android-App-Sample-With-Annotation\">sample application code for video calling on Android with Annotations.<\/a><\/p>\n<p>If you are excited to try out more of these interesting, then do check out the EnableX <a href=\"https:\/\/www.enablex.io\/developer\/video-api\/client-api\/android-toolkit\/\">Android Toolkit<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a world that\u2019s fast inclining towards live video communication, one of the high-demand use cases is the technical support for field service agents. When a field service agent is seeking guidance from a domain expert, a visual aid comes in handy. The tool can be used to pinpoint the issue or demonstrate the error, &#8230;<\/p>\n","protected":false},"author":25,"featured_media":1581,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[134,122,23,20,93],"tags":[217,215,216],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Live Video Assistance with Annotation for Field Support Using EnableX APIs - Insights about video API, SMS API; WhatsApp for Business API<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Live Video Assistance with Annotation for Field Support Using EnableX APIs - Insights about video API, SMS API; WhatsApp for Business API\" \/>\n<meta property=\"og:description\" content=\"In a world that\u2019s fast inclining towards live video communication, one of the high-demand use cases is the technical support for field service agents. When a field service agent is seeking guidance from a domain expert, a visual aid comes in handy. The tool can be used to pinpoint the issue or demonstrate the error, ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/\" \/>\n<meta property=\"og:site_name\" content=\"Insights about video API, SMS API; WhatsApp for Business API\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-27T07:13:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-06T00:47:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Live-Video-Assistance-with-Annotation-for-Field-Support-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jason Wills\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@enablexio\" \/>\n<meta name=\"twitter:site\" content=\"@enablexio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Wills\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Live Video Assistance with Annotation for Field Support Using EnableX APIs - Insights about video API, SMS API; WhatsApp for Business API","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/","og_locale":"en_US","og_type":"article","og_title":"Live Video Assistance with Annotation for Field Support Using EnableX APIs - Insights about video API, SMS API; WhatsApp for Business API","og_description":"In a world that\u2019s fast inclining towards live video communication, one of the high-demand use cases is the technical support for field service agents. When a field service agent is seeking guidance from a domain expert, a visual aid comes in handy. The tool can be used to pinpoint the issue or demonstrate the error, ...","og_url":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/","og_site_name":"Insights about video API, SMS API; WhatsApp for Business API","article_published_time":"2023-05-27T07:13:51+00:00","article_modified_time":"2025-06-06T00:47:42+00:00","og_image":[{"width":1201,"height":423,"url":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2021\/05\/Live-Video-Assistance-with-Annotation-for-Field-Support-1.png","type":"image\/png"}],"author":"Jason Wills","twitter_card":"summary_large_image","twitter_creator":"@enablexio","twitter_site":"@enablexio","twitter_misc":{"Written by":"Jason Wills","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/#article","isPartOf":{"@id":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/"},"author":{"name":"Jason Wills","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/person\/422d2b153c3c96827da141c6446d11a3"},"headline":"Live Video Assistance with Annotation for Field Support Using EnableX APIs","datePublished":"2023-05-27T07:13:51+00:00","dateModified":"2025-06-06T00:47:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/"},"wordCount":627,"publisher":{"@id":"https:\/\/www.enablex.io\/insights\/#organization"},"keywords":["field service solutions","Live video field support","video field service"],"articleSection":["Codes &amp; Tutorials","Communication APIs","TechTalks","Use Cases","Video API"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/","url":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/","name":"Live Video Assistance with Annotation for Field Support Using EnableX APIs - Insights about video API, SMS API; WhatsApp for Business API","isPartOf":{"@id":"https:\/\/www.enablex.io\/insights\/#website"},"datePublished":"2023-05-27T07:13:51+00:00","dateModified":"2025-06-06T00:47:42+00:00","breadcrumb":{"@id":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.enablex.io\/insights\/live-video-assistance-with-annotation-for-field-support-using-enablex-apis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.enablex.io\/insights\/"},{"@type":"ListItem","position":2,"name":"Live Video Assistance with Annotation for Field Support Using EnableX APIs"}]},{"@type":"WebSite","@id":"https:\/\/www.enablex.io\/insights\/#website","url":"https:\/\/www.enablex.io\/insights\/","name":"Enablex","description":"","publisher":{"@id":"https:\/\/www.enablex.io\/insights\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.enablex.io\/insights\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.enablex.io\/insights\/#organization","name":"Enablex","url":"https:\/\/www.enablex.io\/insights\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/logo\/image\/","url":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/05\/EnableX-Logo-01.png","contentUrl":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/05\/EnableX-Logo-01.png","width":17382,"height":3567,"caption":"Enablex"},"image":{"@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/twitter.com\/enablexio","https:\/\/www.linkedin.com\/company\/vcloudx"]},{"@type":"Person","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/person\/422d2b153c3c96827da141c6446d11a3","name":"Jason Wills","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/person\/image\/","url":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2025\/05\/envato-labs-ai-f14f6981-d7f8-4c3e-9234-00323c7d5ca0-96x96.jpg","contentUrl":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2025\/05\/envato-labs-ai-f14f6981-d7f8-4c3e-9234-00323c7d5ca0-96x96.jpg","caption":"Jason Wills"},"description":"Jason works behind the scenes at EnableX, helping to turn complex tech into practical tools that developers and businesses can actually use. With several years of experience in product development and platform architecture, he focuses on making communication technologies simpler, smarter and easier to build with. Whether he's writing step-by-step guides, product tips or explaining how our APIs work, Jason keeps things clear and useful.","sameAs":["https:\/\/www.enablex.io\/","https:\/\/www.linkedin.com\/company\/vcloudx\/"],"url":"https:\/\/www.enablex.io\/insights\/author\/jason-wills\/"}]}},"_links":{"self":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/posts\/1575"}],"collection":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/comments?post=1575"}],"version-history":[{"count":0,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/posts\/1575\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/media\/1581"}],"wp:attachment":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/media?parent=1575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/categories?post=1575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/tags?post=1575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}