Behind the scenes: how to share a Live Stream with large audiences with nanoStream WebRTC.live, nanoStream Cloud and nanoStream H5Live Player

As we learned in this article, nanoStream WebRTC.live is a powerful live encoding tool for browser-based interactive live streaming. Combining it with the unique nanoStream Cloud with integrated nanoStream H5Live Player creates an end-to-end workflow for scalable ultra-low-latency live streams worldwide.

This article shows how to use the nanoStream WebRTC.live demo applications from our web sites to share live streams from your web cam to your audience via the H5Live Player.

End-to-end live streaming workflow

What is H5Live?

nanoStream H5Live is a unique delivery and playback technology working on all HTML5 browsers. It is a unique development by nanocosmos based on existing HTML5 / streaming technologies like HLS, fMP4, and Websockets; dependent on the target device and browser, the stream format is automatically chosen. In combination with nanoStream WebRTC.live ingest and nanoStream Cloud for delivery, the H5Live solution creates a scalable solution for large audiences.

H5Live is connected to the delivery/playback parts of nanoStream Cloud, as WebRTC.live is connected to the ingest/encoding part.

nanoStream Cloud Global Footprint

nanoStream Cloud contains all software and services for interactive live streaming worldwide. It includes a global CDN (content delivery network) of ingest and edge servers which is designed for ultra-low-latency worldwide for global audiences. WebRTC.live and H5Live web clients are seemlessly integrated into this architecture and automatically choose the closest server locations available to the user.

 

How to use WebRTC.live with nanoStream Cloud?

It is very simple to test and use nanoStream WebRTC.live as your live encoder to nanoStream Cloud with integrated nanoStream H5Live Player. You need a camera connected to your computer or built-in on your device, and a WebRTC-compatible browser. We recommend using Google Chrome.
There are three options:

1 Easy and quick demo for simple test.

Try here.

Access https://nanocosmos.de/webrtc 

On the right-hand side of the page you see the WebRTC.live broadcast from your camera.

Click on the image for a webcam preview.

Click on the orange button to start the broadcast. You will need to provide your email first.

Your broadcast will then start: the live stream is sent to nanoStream Cloud and a new window from nanoStream H5Live Player will appear right below with your live stream.

 

The H5Live Player shows the low latency live stream coming from nanoStream Cloud. You can share the URL to test low latency live playback on any HTML5 browser.

2 Start with our sample HTML page.

You can use our sample web page with all broadcast features for further testing. 

Note: You need a nanoStream Cloud / bintu.live account and API key to use this page. See below for instructions.

Try it here.

When opening the page, you need to add your bintu API key to the browser URL.

https://webrtc.nanocosmos.de/release/webcast.html?bintu.apikey=YOURAPIKEY

First, open the provided URL with a WebRTC-compatible browser (Chrome or Firefox).

You will see a preview of your camera image or screen in the „Local Video“ window.

If you want to choose another camera or microphone, select „options“.

You are then ready to start your broadcast. Simply click on „broadcast“ to start the live stream.

The live stream is sent to nanoStream Cloud and can be played with the H5Live player.
To start playback click on „
play h5live stream“  below the Broadcast Settings.

The player will open in a new web page. You share this web page and open on all HTML5 browsers to play the live stream in ultra-low-latency.
The player page also shows a Javascript code snippet to embed on your own web page.

Broadcast configuration

The WebRTC.live broadcast configuration is automatically set to H264 video with 500 kbits/s. Audio is sent with the Opus audio codec and will be transcoded automatically to AAC for live distribution with nanoStream Cloud.


 

3 Embed nanoStream WebRTC.live as a live encoder and nanoStream H5Live Player in your own webpage. Learn more here.

You can easily embed nanoStream WebRTC.live and nanoStram H5Live Player in our own web page.

Example: https://yourserver.com/broadcaster.html

Notes:

  • verify that your webcam is running
  • your web page needs to be accessible over https.
  • you have verified that the WebRTC.live test (above) works on your browser

Add the Javascript codes to your web page.

You find more details about custom integration here.

Create your own nanoStream Cloud account

To stream directly to nanoStream Cloud you will need to register at bintu.live . Bintu.live is the rest API and stream management tool included in nanoStream Cloud.
You can find the step-by-step guide to register by
clicking here.

Once registered, you can create new URLs by calling the bintu API with a valid API key.

 

 

Finally, combining nanoStream WebRTC.live with nanostream Cloud and nanoStream H5Live Player is simply a click on “start broadcast” and your stream will be available around the world in 1 second!

Buy now

Get a quote

Learn more about nanoStream Cloud