How To Embed Livestreamed Video On Your Site

Posted By admin On 29/12/21
Embed

In this blog post, I will explain how to embed WebRTC live streaming into your website using Ant Media Server. We are going to use Ant Media Server for this post. Ant Media Server is a media server that supports ultra low latency (~0.5 sec) with WebRTC. You could learn how to install Ant Media Server from here.

Embed

Method 3: HTTP Live Streaming. This method uses H.264 video encoding, and is therefore much lower bandwidth than the above JPEG methods. It also includes audio. The main drawbacks are that it does not have universal support in web browsers (it works best in Safari on either macOS or iOS), and there is an inevitable 10-second latency. In order to do this, you need to access your live streaming host’s admin portal and schedule a live stream. You will be redirected to the embed options where you’ll find the Javascript embed code. To embed the code, access your website’s HTML code view and paste the embed code there.

There are two options for embedding WebRTC live streaming into your website. One of the option is to use iframe and second option is to create a video component.

Before starting we need to put required libraries into a folder, which is named js in our case. Required libraries could be found in here.

Embed

Table of Contents

  • First Option: Using Iframe
  • Second Option: Use Video Component
    • Step 1: Create a Web Page and Embed WebRTC Live Streaming
    • Step 2: Remove JSP codes
    • Step 3: Manually set websocketURL
    • Step4: Run and Play

First Option: Using Iframe

This option is the easiest way to embed WebRTC live streaming. Firstly, go to management console of Ant Media Server and click the options button in a live stream and click Copy Live Embed Code to Clipboard:

Live embed code should be something like this:

<iframe width='560' height='315' src='//test.antmedia.io:5443/WebRTCAppEE/play.html?name=554221610006205395756180' frameborder='0' allowfullscreen></iframe>

You can directly embed this code in your website. In some cases this embed code doesnt works. In this case add “http” or “https” to the src.

If SSL is not enabled, then you could use the code below. Notice that the port is 5080 and src starts with http:

<iframe width='560' height='315' src='http://test.antmedia.io:5080/WebRTCAppEE/play.html?name=554221610006205395756180' frameborder='0' allowfullscreen></iframe>

If SSL is enabled, then you could use the code below. Notice that the port is 5443 and src starts with https:

<iframe width='560' height='315' src='https://test.antmedia.io:5443/WebRTCAppEE/play.html?name=554221610006205395756180' frameborder='0' allowfullscreen></iframe>

Second Option: Use Video Component:

Step 1: Create a Web Page and Embed WebRTC Live Streaming

Now create a web page html file in the same level with the js folder.
The content of html page will be a copy of play_embed.html in the StreamApp repository with some exceptions explained in next steps.

Step 2: Remove JSP codes

Remove JSP codes which are used by the StreamApp java application:

<%@ page language='java' contentType='text/html; charset=UTF-8' pageEncoding='UTF-8'%>

var token = '<%= request.getParameter('token') %>';

Replace the following with a hard coded stream id:
varstreamId='<%= request.getParameter('name') %>';

Replaced version:

varstreamId='your_stream_id';

Step 3: Manually set websocketURL

Manually assign your Ant Media Server url to websocketURL as in the following:

var webRTCAdaptor = new WebRTCAdaptor({
websocket_url : 'wss://your_server_url:5443/WebRTCAppEE/websocket',
mediaConstraints : mediaConstraints,
peerconnection_config : pc_config,
sdp_constraints : sdpConstraints,
remoteVideoId : 'remoteVideo',
isPlayMode: true,
debug: true,
callback : function(info, description)

Key point here is that your url starts with wss://. This means SSL is enabled in your server. You can enable SSL as described here.
If SSL is not enabled, url needs to be like the following:
websocket_url : 'ws://your_server_url:5080/WebRTCAppEE/websocket'

In this case, browser will not be able to reach the camera and mic because your domain is not secure and you will not be able to publish stream. There is a work around for Chrome.

Use webrtcadaptor’s play method without token because we removed this option for this sample:

How to embed livestreamed video on your site free

webRTCAdaptor.play(streamId, token); to webRTCAdaptor.play(streamId);

Embed

Step4: Run and Play

Now firstly start a live stream with an id your_stream_id and then open play_embed.html web page. The stream will start when you click the play button after the stream starts. It doesn’t start automatically because browsers stop video’s start automatically because of an update in their policy.

Now you know; Embed WebRTC Live Streaming with Ant Media Streaming. If you want to embed publishing videos to your website, please check this post. Yoıu may want to check 3 Great Canvas Manipulations in WebRTC Live Streaming at Ant Media Server.

If you have any questions, drop a line to contact(at)antmedia.io!

Useful Links

How To Embed Livestreamed Video On Your Site Free

You can try Ant Media Serverfor free with all features!

You can download native Android and iOS WebRTC SDKs and integrate them into your applications for free!

Ant Media ServerGithub Wiki

You would want to checkFuture of Ultra-Low Latency Streaming Market,Linear Live Streaming 101.

Live-streaming has grown and became an important tool for web marketers. Well, this tutorial explains how to use live-streamed videos in Weebly.


How to Add Video Streaming in Weebly

Let’s say you want to comment on an online soccer game. You can then follow these three steps to embed this sort of livestreamed video at your Weebly site:

Step 1: Visit the service where the video you’re interested in is hosted. In this case,Twitch livestreams shows fromseveral soccer games.

Step 2: Navigate to the “share” button placed below the video. Click and scan the selections, choosing the option that reads “embed.” Copy that code to your computer’s clipboard.

Step 3: Create a new page or blog entry on your site. Select the Embed Code element and drop it where you want. When asked to “click to add HTML,” do so, and then cut and paste the code within. It should look similar to what you see highlighted in the box above. Your video will render upon saving. Check for errors and hit publish.

How To Embed Livestreamed Video On Your Site Video

We hope this article helped you learn how to add live-streamed video in Weebly. You may also want to see our guide on how to embed Javascript code in Weebly.

How To Embed Livestreamed Video On Your Site Without

If you liked this tutorial, then you may consider subscribing to our WeeblyTutorials YouTube Channel for Weebly video tutorials. You can also find us on Twitter and Facebook.