http://m.getsatisfaction.com/products/231810/topics?page=1 Topics for VOS Cloud - Discussion 1970-01-01T00:00:00Z 3 1 2 0 0 1 http://m.getsatisfaction.com/topics/7511750 7511750 Can #EXT-X-ENDLIST be appended to the end of the HLS playlists when a service is changed to Offline? 2017-05-04T04:18:14Z 2017-05-03T21:41:43Z ccarroll http://m.getsatisfaction.com/people/9029732 https://www.gravatar.com/avatar/61e0aed88c5f7fb904eca799a4c653d5?d=identicon&s=55&r=PG ccarroll_ji6y8gl8m52ba Is there an option for appending the #EXT-X-ENDLIST tag to the end of the HLS playlists when a Service is changed to Offline? question complete 1 2 1 comment http://m.getsatisfaction.com/topics/7425006 7425006 Show multiple VOS 360 and VOS Cloud runtime instances in Hub 2017-01-20T03:01:00Z 2017-01-19T03:41:56Z Ofer Aharon http://m.getsatisfaction.com/people/7935802 https://d2r1vs3d9006ap.cloudfront.net/public/uploaded_images/10943551/99489_medium.png ofer_aharon I'm operating both VOS Cloud and VOS 360 instances but in the hub can only see the VOS 360 runtimes idea active 4 2 1 comment http://m.getsatisfaction.com/topics/7317121 7317121 Grooming VOS Video Input Source through an I-Frame Window for inclusion in your own application 2016-09-23T18:55:41Z 2016-09-23T18:55:41Z Moore http://m.getsatisfaction.com/people/7955269 https://d2r1vs3d9006ap.cloudfront.net/public/uploaded_images/10813313/ScreenShot2016-05-02at2.11.42PM_medium.png moore_macauley <b>This article describes the requirements and steps to integrate the VOS Input Sources Grooming window (through an I-Frame) to a 3rd party application.<br /><br />1.&nbsp;&nbsp;&nbsp;Introduction</b><br /> The VOS Configuration App provides Grooming User Interface provides an interface&nbsp;for the&nbsp;end user to configure the Video input source for Video/Audio/Data streams to either added metadata or to exclude those streams from processing.&nbsp;For third Party Application integration, this user interface&nbsp;can’t be expose to&nbsp;their&nbsp;users because cross-origin resource sharing is not allowed in browsers by default.<br /><br /> To work around this limitation, Third Party application developers can use a special remote grooming request through an I-Frame Window in the browser to expose the VOS&nbsp;Grooming User Interface to user. This should greatly ease integration as the grooming of the source is one of the most complex tasks a Third Party developer has to undertake. However it requires third party application to use cross-window messaging to safely enable cross-origin communication.&nbsp;<br /><br /> <b>2.&nbsp;&nbsp;&nbsp;Requirements</b><br /><ul><li>Third Party Application developer must implement a&nbsp;Web Application/UI to expose cross-origin grooming user interface through an I-Frame in a browser.</li><li>Java Script will be used by the&nbsp;Third Party Client Application to send and listen to cross-window messaging for the communication between it and VOS Server.</li><li>The Cross-origin grooming request will only be allowed to the&nbsp;following URL by VOS Server through “X-Frame-Option” http response header -&nbsp;<i><a href="https://{vos-server}/groom/source" rel="nofollow" target="_blank" title="Link https//vos-server/groom/source">https://{vos-server}/groom/source</a></i></li><li>The Third Party Application must acquire OAuthAccess Token from VOS Server, and send it to VOS Server through cross-window message for Authentication. This topic is <a href="https://community.vos.tv/harmonicvos/topics/getting-and-managing-oauth-tokens-for-third-party-api-integrations" rel="nofollow" target="_blank">covered in another post</a>.</li><li>The Third Party Application must&nbsp;specify the Video input source in JSON format to be groomed, and send it to VOS Server through a&nbsp;cross-window message.</li></ul>The following is a screen capture of sample integration&nbsp;application to use cross-origin grooming feature of VOS Server.<br /><br /><img src="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1489253/8670-5si6m2_inline.png?1474925906" title="Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1489253/8670-5si6m2_inlinepng1474925906" /><br /><br /><b>3.&nbsp;&nbsp;&nbsp;References</b> &nbsp;The following are reference links for cross-origin x-frameoption and “postMessage” method in browser.<br /><br /> <ul><li><a href="https://tools.ietf.org/html/rfc7034" rel="nofollow" target="_blank" title="Link https//toolsietforg/html/rfc7034">X-Frame-Options (RFC7034</a>)</li><li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options" rel="nofollow" target="_blank" title="Link https//developermozillaorg/en-US/docs/Web/HTTP/Headers/X-Frame-Options">X-Frame-Options -HTTP | MDN</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" rel="nofollow" target="_blank" title="Link https//developermozillaorg/en-US/docs/Web/API/Window/postMessage">Window postMessage</a><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" rel="nofollow" target="_blank" title="Link https//developermozillaorg/en-US/docs/Web/API/Window/postMessage">&nbsp;| MDN</a></li></ul><b>4.&nbsp;&nbsp;&nbsp;Workflow</b> The workflow diagram for cross-origin grooming is as shown in the&nbsp;following digram and further clarified in the detailed steps. For reference the&nbsp;Third Party Application/UI will be displayed in “Main Window” and the&nbsp;VOS Grooming User Interface served by&nbsp;VOS will be displayed in I-Frame “GroomingWindow”.<br /><br /> &nbsp;<img src="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1489255/8670-v790so_inline.png?1474926038" title="Image https//d2r1vs3d9006apcloudfrontnet/s3_images/1489255/8670-v790so_inlinepng1474926038" /><br /><br /> <b>Detailed Steps</b><b>&nbsp;</b><br /><br />&nbsp;&nbsp;1. <a href="https://community.vos.tv/harmonicvos/topics/getting-and-managing-oauth-tokens-for-third-party-api-integrations" rel="nofollow" target="_blank" title="Link https//communityvostv/harmonicvos/topics/getting-and-managing-oauth-tokens-for-third-party-api-integrations">Acquire OAuth Access Token from VOS Server</a><br />&nbsp;&nbsp;2. Get the JSON for the Video Input Section by either:<br />&nbsp; &nbsp;&nbsp; &nbsp;-&nbsp;Getting the&nbsp;existing&nbsp;Video Input Source Data using the&nbsp;VOS API <br /><pre>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <a href="https://{VOS-Server}/vos-api/configure/v1/sources" rel="nofollow" target="_blank" title="Link https//VOS-Server/vos-api/configure/v1/sources">https:&#47;&#47;{VOS-Server}/vos-api/configure/v1/sources</a></pre>&nbsp; &nbsp; &nbsp;&nbsp;-&nbsp;Discover raw Video InputSource through VOS API <br /><pre>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <a href="https://{VOS-Server}/vos-api/source-monitor/v1/discover" rel="nofollow" target="_blank" title="Link https//VOS-Server/vos-api/source-monitor/v1/discover">https:&#47;&#47;{VOS-Server}/vos-api/source-monitor/v1/discover</a></pre>&nbsp;&nbsp;3. The Third Party UI is displayed in Main Window and the&nbsp;I-Frame Grooming window is hidden.&nbsp;<br />&nbsp;&nbsp;4. The Third Party UI Client builds cross-origin grooming request URL, and sets it as an&nbsp;I-Frame <br />&nbsp; &nbsp;&nbsp; &nbsp;Source URL -&nbsp;<a href="https://{VOS-Server}/groom/source" rel="nofollow" target="_blank" title="Link https//VOS-Server/groom/source">https://{VOS-Server}/groom/source</a><br />&nbsp;&nbsp;5. The Third Party UI Client in main Window and waits for 'GROOM_AUTHENTICATE' message from <br />&nbsp; &nbsp;&nbsp; &nbsp;I-Frame Grooming Window before sending&nbsp;a reply containing the OAuth Access Token.<br />&nbsp;&nbsp;6. The Third Party UI Client in main Window waits for 'GROOM_READY' message from I-Frame <br />&nbsp; &nbsp; &nbsp;&nbsp;Grooming&nbsp;Window and then unhides the&nbsp;I-Frame window, sending back a&nbsp;'GROOM_NEW_INPUT' <br />&nbsp; &nbsp; &nbsp;&nbsp;message with&nbsp;Video Input Source Data.<br />&nbsp;&nbsp;7. The&nbsp;Third Party UI Client in main Window must then&nbsp;listen for the following messages from I-Frame <br />&nbsp; &nbsp; &nbsp; to&nbsp;save or&nbsp;discard the Groomed Input Source, or resize I-Frame Window.<br /><ul><li>'GROOM_ERROR' -&nbsp;Server not able to handle Groom request&nbsp;</li><li>'GROOM_CANCEL_INPUT' -&nbsp;User discards the groom result.</li><li>'GROOM_UPDATE_INPUT' -&nbsp;User accepts the groom result.</li><li>'GROOM_SIZE_CHANGE' -&nbsp;Groom Window size is changed.</li></ul><br /> <b>5. Sample Java Script code to handle cross window messages</b><br /><br /> <b>Java Script to handle Window Message in Angular JS Controller</b><br /><br /> <blockquote>var demoInput = {"id": "ba805030-e630-9e8b-dfd9-2c6d4eb7a0ba",...} //Input Source Data<br />scope.groomReady = false;<br />scope.data = {command:'GROOM_NEW_INPUT', content:demoInput};<br />scope.authentication = {command:'GROOM_AUTHENTICATE', token:scope.accessToken};<br />scope.url = undefined;<br />window.addEventListener('message', function(e) {<br />&nbsp;&nbsp;&nbsp;&nbsp; if (e.data.command == 'GROOM_AUTHENTICATE') {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.url = e.origin;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.eFrame = angular.element($rootElement).find('#iGrooming')[0];<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.eFrame.contentWindow.postMessage(<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.authentication,<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.url.replace( /([^:]+:\/\/[^\/]+).*/, '$1' )<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; );<br />&nbsp;&nbsp;&nbsp;&nbsp; }else if (e.data.command == 'GROOM_READY') {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.groomReady = true;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.url = e.origin;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.eFrame = angular.element($rootElement).find('#iGrooming')[0];<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.inputJSON = JSON.stringify(scope.data.content, undefined, 4);<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp; else if (e.data.command == 'GROOM_ERROR') {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(e.data.message);<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp; else if (e.data.command == 'GROOM_CANCEL_INPUT') {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; angular.element(scope.avModal).modal('hide');<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; VOSLOGGER.log('grooming GROOM_CANCEL_INPUT');<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp; else if (e.data.command == 'GROOM_UPDATE_INPUT') {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; angular.copy(e.data.content, scope.data.content);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; angular.element(scope.avModal).modal('hide');<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.inputJSON = JSON.stringify(scope.data.content, undefined, 4);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; VOSLOGGER.log('grooming GROOM_UPDATE_INPUT');<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp; else if (e.data.command == 'GROOM_SIZE_CHANGE') {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.eFrame.style.height = e.data.height+'px';<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.eFrame.style.width = e.data.width+'px';<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; VOSLOGGER.log('grooming GROOM_SIZE_CHANGE: width='+e.data.width+',height='+e.data.height);<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br /> }, false);<br />...<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.groom = {show:false};<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.avModal;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.updateInput = function () {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.data.content = JSON.parse(scope.inputJSON);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.openGroom = function(eid) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (scope.avModal== undefined) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.avModal = angular.element($rootElement).find('#'+eid);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; angular.element(scope.avModal).modal('show');<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.groom.show = true;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; angular.element(scope.avModal).one('hidden.bs.modal', function(event) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.groom.show = false;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (scope.groomReady == true) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.eFrame.contentWindow.postMessage(<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.data,<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope.url.replace( /([^:]+:\/\/[^\/]+).*/, '$1' )<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; );<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</blockquote><b>Test HTML Template Angular JS Controller<br /></b><br /><blockquote><i>&nbsp;&lt;div class="spacer"&gt;<br /></i><i>&nbsp;&nbsp;&nbsp; &lt;div ng-disabled="!groomReady"class="btn btn-primary btn-lg pull-right"ng-click="openGroom('remote-groom')"&gt;Groom&lt;/div&gt;<br /></i><i>&nbsp;&nbsp;&nbsp; &lt;div class="form-grouppull-left"&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;labelclass="form-label-alt"&gt;Remote Server&lt;/label&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text"class="form-control input-sm" ng-model="host"style="width:400px;"&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;labelclass="form-label-alt"&gt;OAuth Token&lt;/label&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text"class="form-control input-sm" ng-model="accessToken"style="width:300px;"&gt;<br /></i><i>&nbsp;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br clear="all"&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button class="btn btn-defaultbtn-sm" ng-click="applyToken()"&gt;Connect&lt;/button&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt;<br /></i><i>&nbsp;<br /> </i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br clear="all"&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;labelclass="form-label-alt"&gt;Input&lt;/label&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textareang-model="inputJSON" style="width: 800px; height: 400px"rows="20" ng-change="updateInput()"&gt;&lt;/textarea&gt;<br /></i><i>&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br /></i><i>&nbsp;<br /></i><i>&nbsp;&nbsp;&nbsp; &lt;div class="modal fade"id="remote-groom" tabindex="-1" role="dialog"aria-labelledby="groom" aria-hidden="true"data-backdrop="static" data-keyboard="false"&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;divclass="modal-dialog"&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;iframe ng-if="IfUrl"id="iGrooming" ng-src="{{IfUrl}}" scrolling="no"height="650" width="600"frameBorder="0"&gt;&lt;/iframe&gt;<br /></i><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br /></i><i>&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br /></i><i>&lt;/div&gt;&nbsp; </i></blockquote><br /><b><br />Enjoy grooming....<br /><br /></b><pre></pre> idea vos_api vos_api complete 0 2 3 create vos_api