Skip to main content
P
psaxena1-Visitor
1-Visitor
January 6, 2017
Solved

How to display a live video stream on Thingworx mashup.

  • January 6, 2017
  • 4 replies
  • 18210 views

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

    Best answer by cbuse

    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.

    4 replies

    N
    nkhose1-Visitor
    1-Visitor
    January 6, 2017

    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

    P
    psaxena1-VisitorAuthor
    1-Visitor
    January 9, 2017

    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.

    N
    nkhose1-Visitor
    1-Visitor
    January 9, 2017

    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 +

    K
    kmagdum14-Alexandrite
    14-Alexandrite
    January 9, 2017

    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.

    C
    cbuse13-Aquamarine
    13-Aquamarine
    January 9, 2017

    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.

      P
      psaxena1-VisitorAuthor
      1-Visitor
      January 16, 2017

      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.

      C
      cbuse13-AquamarineAnswer
      13-Aquamarine
      January 16, 2017

      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.

        C
        cbuse13-Aquamarine
        13-Aquamarine
        January 16, 2017

        Also, ReadOnly property of the Html TextArea widget should be true.

        Terms & ConditionsAccessibility statement