Connect Streaming Platforms (YouTube, Twitch...) with Livestorm

Sometimes you may have a specific use case that won't fit into Livestorm's streaming tech scope. This is why we built a way for you to embed another streaming platform into Livestorm  to still benefit from our logistic stack: emails, chat, polls, landing pages etc. 

By using the iframe mode on Livestorm , you can replace our video source by your iframe code. The iframe can be an embed widget from YouTube, UStream, Livestream, Twitch, Facebook Live, etc. 

Bear in mind that your session will not be recorded if you opt for this option.

IN THIS ARTICLE:


When should I use the iframe mode on Livestorm ?

As explained above, sometimes you might need to run a special kind of live events like a live summit or a roundtable with more than two presenters. This is when you start to step off the Livestorm scope. The iframe mode is ideal when:

  • You need more than 2 presenters.
  • You need to stream for more than 4 hours.
  • When you need a 4K quality.

What are the cons of using a third-party streaming platform?

However, there are some obvious disadvantages of relying on another streaming platform:

  • The user experience is much more complex. You may have to do some complex setups.
  • You will often need to use an encoder to send the local stream to those platforms. If you are on Mac try OBS, if on Windows try XSplit.
  • You won't have a real-time experience anymore. There will be a longer delay between what you do and what your audience will see.
  • In most cases, you won’t be able to go on stage, invite someone on stage or share a media via Livestorm.

Where do I use my embed code on Livestorm?

When you create a webinar or change your webinar settings, go to Integrations > Stream Settings. Click on "External source" and paste your iframe. Make sure to keep only the iframe HTML tag.

This is what it looks like on your webinar room:

Your attendees will see the controls of the stream, however, they cannot stop the stream. They can pause it and catch up after but they won't be able to end the stream.

Also, make sure to mark your live stream on YouTube as unlisted so people don't go to your channel and watch it. Go to Basic info > Privacy > Unlisted on your YouTube dashboard. 


Example: YouTube Live + Google Hangout

In this example, you will be able to create a live summit or a roundtable chat with multiple presenters and embed that live stream on Livestorm. You will need a YouTube account, Google Hangout and Livestorm.

Beforehand, we recommend having a person doing the broadcast on Google Hangout and another person in charge of managing the Livestorm room (to start/end the webinar on Livestorm). Doing both on the same computer can be stressful for the CPU and your browser...And for the host.

IN THIS SECTION:

Creating the event

First, head over your YouTube channel, and go to your dashboard. Go to your  live events section. Choose the "Quick" option to use Google Hangouts.

Don't forget to set up your privacy settings to "unlisted" to make sure your attendees don't go to your YouTube channel to watch the live stream.

Advanced settings

Under the advanced settings tab, there are several options you can choose to customize your stream. Here are a few that may find useful for this use case.

Important: make sure "Allow embedding" is checked. This is critical as you need to be able to embed the stream on Livestorm.

Uncheck the promotions boxes to prevent the stream to appear on your channel. Also, you can prevent people from going back in the stream with the DVR option. Finally, the latency options are here to set the delay between what people see and what actually happens during the stream.

If you choose "Ultra low-latency", you will get only 5s delay but won't be able to go back in the stream, and it does not support ultra HD resolutions.

Going live with Hangout

Click on "Go live now" to open Google Hangout and start streaming:

Before starting the broadcast:

  • In this example, I want to have multiple presenters (more than two), so I should add them to the Hangout.
  • Set the webcams, potential screen sharing etc
  • Grab the embed link and add it to Livestorm

Very important: replace the "http://" in the iframe link by "https://" otherwise it won't work on Livestorm

To paste the iframe code, go to your Webinar settings > Integrations > Stream settings:

Starting the broadcast

When you are ready, start the broadcast on Hangout. Then start the webinar on Livestorm right after.

Keep in mind that the replay is not generated by Livestorm but by YouTube, so as soon as you start the broadcast on Hangout everything is recorded.

If you are broadcasting on Google Hangout and at the same time on the Livestorm room, you should absolutely mute the YouTube player in the Livestorm room, or just wear earphones. Otherwise, the sound from the Livestorm room (with delay) will go back to the Hangout room and create an infinite loop of sound.

Ending the webinar

At the end of the webinar, you must end the broadcast on Hangout and the webinar on Livestorm. The recording will be compiled on YouTube not on Livestorm. You can grab the video file here on your YouTube dashboard.

More resources

There are some other resources you might find useful for using YouTube live like:


Example: Facebook Live

In this example, you will be able to create a live video on Facebook and embed that live stream on Livestorm. You will need a Facebook account and Livestorm account.

1. After you login to your Facebook account, from your newsfeed, click on Live Video. You can also click on Live Video from your Timeline as well. 

A large screen should show up with your webcam on the left and options to the right (see screenshot below).

2. First, choose where to post your live broadcast. You can choose between your timeline, group, event, or page.

You may enter a caption. Select your microphone and webcam.

Lastly, make sure to set your viewer settings to Public. Otherwise your Facebook Live video will not be viewable in Livestorm!

3. When you are ready, click on the blue Go Live button! This tab is your main feed that has the option to: End Live Video. Note: Keep this tab open!

4. Next step, where ever you chose to share the video, you'll need to go to that page to retrieve your video ID. So if you chose to share it on your Timeline, open another tab with your Facebook timeline and click on your video. Your video ID will be at the end of the URL (it should be a series of numbers). 

5. Now in your General Settings of your webinar in Livestorm, go to Stream Settings, and choose External source. Input the code below, replacing  {*INSERT_LIVE_VIDEO_ID_HERE*}  with your video ID including the brackets. So the brackets will no longer be there once you've input your video ID.  

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F {*INSERT_LIVE_VIDEO_ID_HERE*}%2F&width=500&show_text=false&appId=169703439750548&height=280" width="500" height="280" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Once this is saved, you may close the second tab that you opened to retrieve the video ID and go back to the main tab (where the option to: End Live Video, is).

6. Then you may Enter the webinar room on Livestorm and click Start webinar!

7. When you are done with your Facebook Live, click on the red End Live Video button and End webinar on Livestorm! Voila :)