cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to display a live video stream on Thingworx mashup.

SOLVED
Newbie

How to display a live video stream on Thingworx mashup.

Like Image we want to display a live video from a source on our thingworx mashup.

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to display a live vedio stream on Thingworx mashup.

In order to embed a youtube video in Thingworx, do the following:
Go to http://embedresponsively.com/ and add the youtube link you want to embed. The result should be something like this:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/-UV0QGLmYys' frameborder='0' allowfullscreen></iframe></div>

Put the result above in a Thingworx service which outputs a string.
In the mashup, add a Html TextArea widget and bind the output of the Thingworx service to the Text property of the widget.

13 REPLIES 13

Re: How to display a live vedio stream on Thingworx mashup.

Hi

You may look to this widget to start https://marketplace.thingworx.com/Items/html5-video

If it is not a local video you can embed iframe and load the live video url in an iframe

Re: How to display a live vedio stream on Thingworx mashup.

Hi ,

I tried using this widget and in the VideoLocation attribute I have given a link of a Youtube video but it is still not playing.

Re: How to display a live vedio stream on Thingworx mashup.

Hi

I have tried this widget its seems fine with widget , please follow the widget guide it  states the video Url pattern as like this

http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4

it does not expects the video as like the You tube Url , as i have already stated if the video will be dynamic video Url as like youtube or so  you should use Iframe for that  .

Let me know if you find it working . My TW version is 6.5 +

Re: How to display a live vedio stream on Thingworx mashup.

Hi ,

With this kind of url it is working. But how to use iframe in case I want to show YouTube video or any video from our local storage.

Re: How to display a live vedio stream on Thingworx mashup.

Re: How to display a live vedio stream on Thingworx mashup.

I think "WebFrame" is best fit here. There are some site which are not supported by IFrame i.e. WebFrame e.g. Google, Facebook etc. If you want, you can do testing with http://www.ptc.com site. Accordingly you can render static/dynamic site.

You can prepare a static site which hosts the live video and you can put that in WebFrame widget. I hope it helps.

Re: How to display a live vedio stream on Thingworx mashup.

I attached an enhanced version of the HTML5 video which supports HLS.

Also, I attached the documentation  and an example on how to stream video from an IP camera.

Re: How to display a live vedio stream on Thingworx mashup.

Hi Cristina,

I tried using this 1.1 version of HTML5 extension but in this also the YouTube videos are not streaming.

If we use Web Frames then the whole YouTube page is opened. I only want the video to be streaming.

Re: How to display a live vedio stream on Thingworx mashup.

In order to embed a youtube video in Thingworx, do the following:
Go to http://embedresponsively.com/ and add the youtube link you want to embed. The result should be something like this:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/-UV0QGLmYys' frameborder='0' allowfullscreen></iframe></div>

Put the result above in a Thingworx service which outputs a string.
In the mashup, add a Html TextArea widget and bind the output of the Thingworx service to the Text property of the widget.