Introduction: Datarhei/Restreamer - Embed Livestream on Website

By datarhei.github.io/restreamer/
About: Datarhei/Restreamer offers smart free video streaming in real time. Stream H264 video of IP cameras live to your website with our open source software for free

    In this Instructables we show how to embed your Datarhei/Restreamer HLS live stream and the snapshot on your website . As a result you will get your own H.264 streaming without streaming provider as promised and a snapshot on your website!

    The main steps are

    1. Open the preview player
    2. Copy & embed HTML iFrame code
    3. Copy & embed snapshot link
    4. Forward a TCP port to allow connection between website and Datarhei/Restreamer in your router

    To prepare for the next steps be sure you are ready to rock...

    Software:

    1. Running Datarhei/Restreamer connected to the internet (if you need to install it take a look at our other Instructables)
    2. Logged in Datarhei/Restreamer in your favourite browser
    3. HTML/Text Editor - You have the "embarras de richesses" Windows should have "notepad" on board and Macintosh "Text Edit", Linux users should use VIM :) thats enough for embedding an iFrame. If you want to dive deeper take a look at this list on Wikipedia: https://en.wikipedia.org/wiki/List_of_HTML_editors
    4. A running Website where to embed the player and the snapshot!

    5. FTP Client to upload your files - We recommend the open source swiss army knife for FTP - FileZilla There is a nice tutorial on YouTube for those not familiar with FTP and FileZilla.

    For the latest up to date documentation on Datarhei/Restreamer take a look in our Docs on GitHub.

    Ok - Let´s rock!
    (Sven)

    ---------

    We have some more step by step Instructables ready:

    1. Datarhei/Restreamer - Installation OSX and Windows with Docker Toolbox (Kitematic)
    2. Prepare memory card with HypriotOS for Datarhei/Restreamer on Raspberry Pi1 & Pi2 with Microsoft Windows
    3. Datarhei/Restreamer - Setup your IP camera for livestreaming
    4. Datarhei/Restreamer - Setup Ip Raspicam for livestreaming
    5. Datarhei/Restreamer - Changing Port, Username, Password and Snapshot Interval
    6. How to update Datarhei/Restreamer on Raspberry Pi 1/2 (video tutorial)

    ---------

    Want to talk to us? Email to open@datarhei.org. You could choose a nickname speak to us in IRC: irc.freenode.net/#datarhei or (Webchat). You could ask a question in our Forum, too. If you're having a problem while developing, see Known Issues. If you want just keep in touch follow us on Twitter: https://twitter.com/datarhei

    Step 1: Open the Preview-Player

    You have to login in your Datarhei/Restreamer and check if your video device is connected. If you have not setup yet check out our Instructables how to do this first...

    1. How2 setup your IP camera for livestreaming
    2. How2 setup your Raspicam for livesteraming

    If everything ist working (green):

    1. Click on the button "Open player" (look at the picture to find it)

    The video player opens in a new window with the video player and the snapshot as player background of your video stream (if not check your pop up blocker or open link in new browser tab)

    Go to the next step >>

    Step 2: Get the Player-Code

    Below the player you see your iframe HTML snippet which you need for integration into your website.

    Copy the complete iFrame code to your own website. I will explain the attributes of that frame

    scr="http://your.public.ip:8008" >> the public address of your internet connection on port 8080. This is essential to guarantee the communication between the player on your website and your running Datarhei/Restreamer at home.
    name="restreamer-player" >> the name you rename if you want but would be great if you use our name :) 
    width="800" height="450" >> the resolution of your video player. You could modify that but <strong>be sure you have the right aspect ratio</strong> otherwise your player looks ugly... We recommend to use 16:9 resolutions for your player. 450p 480p 720p 1080p are some established standard resolutions.
    scrolling="no" >> says if iframe is bigger than shows - scrolling is activated we recommend to let this on no.
    frameborder="0" >> does what is says. If you like borders play around with this
    webkitallowfullscreen="true" >> fullscreen for Google Chrome

    mozallowfullscreen="true" >> fullscreen for Mozilla Firefox and Opera
    allowfullscreen="true" >> allows the player to go fullscreen in MS Internet Explorer

    Step 3: Get the Snapshot-Code

    The snapshot is a very nice thing to e.g. link from the "Home" of your website to the site where you added the video player. It updates automatic every 60 seconds and gives your website visitor a preview of your video stream. Neat things could be done with a snapshot like time lapse, building up archives of your camera or take the snapshot as background on your website.

    As you could see on the picture ^^ You find the snapshot code in the "Open Player" below the iframe vide player code ready to copy for your website. Copy the complete iFrame code to your own website.

    I will explain the attributes of the snapshot iframe:

    <img src="<a href="http://your.public.ip:8008/images/live.jpg" rel="nofollow">http://your.public.ip:8008/images/live.jpg</a>" >> the public address of your internet connection on port 8080 and the link to the snapshot. This is essential to guarantee the communication between the player on your website and your running Datarhei/Restreamer at home to deliver the snapshot
    width="800" height="450" >> snapshot width and heigh. You could modify the parameters but be sure you have the right aspect ratio otherwise your snapshot looks ugly... We recommend to use 16:9 resolutions for your player. 450p 480p 720p 1080p are some established standard resolutions.

    Step 4: Forward the TCP Port of Your Restreamer

    To guarantee the communication between the iframe on your website for the video player and the snapshot you have to forward the TCP Port 8080 to use the direct streaming on your website with Datarhei.

    Only if the TCP port is forwarded the connection between your video player and Datarhei will be successful.

    There are many routers on the market and we could not explain how to do the forwarding for your special device. But nearly all routers could forward a port. Keyword in the manual of your router: Portforwarding

    There are many videos on YouTube how to forward a port. As a example for all the portforwarding in FRITZ!box is shown in a nice video. It should look similar or nearly similar in your own router.

    Remember: If you changed the port 8080 with your own environmentyou need to forward your environment port!

    More information about port forwarding could be found in our wiki.

    Go now to the last step >> Check your Website!

    Step 5: Check the Result on Website

    Now it is time to check the result on your website - Yeah!

    What you have done so far:

    1. Copied the HTML snippet iframe code out of the local Datarhei/Restreamer player to your website
    2. Copied the HTML snippet iframe code with the live snapshot to your website
    3. Uploaded the *html sites with the iframes on your webspace with FTP
    4. And forwarded the port to communicate between the iframes and the Datarhei/Restreamer

    The result in my example is shown in the pictures above. A small and sweet one pager with a Bootstrap theme called Grayscale. I took the snapshot as wallpaper on the website via CSS and placed the iframe with the player centered of the page. As a small addon I build my template with two other sub pages. One for the YouTube-Live iframe and the other iframe with Ustream. The do not work all together because multiple streaming is not a official Restreamer feature at the moment.

    Keep on streaming!
    (Sven)