How to Embed WebRTC Live Streaming into Your Website in 2 Easy Ways?
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.
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.
First Option: Using Iframe
This option is the easiest way of embedding live stream. 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 doesn't 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 as 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:var streamId = "<%= request.getParameter("name") %>";
Replaced version:
var streamId = "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)
The key point here is that your URL starts with wss://. This means SSL is enabled on your server. You can enable SSL as described here.
If SSL is not enabled, the URL needs to be like the following:websocket_url : "ws://your_server_url:5080/WebRTCAppEE/websocket"
In this case, the 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 workaround for Chrome.
Use webrtcadaptor’s play method without token because we removed this option for this sample:
webRTCAdaptor.play(streamId, token); to webRTCAdaptor.play(streamId);
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.
If you want to embed publishing video to your website, please check this post. If you have any questions, drop a line to contact(at)antmedia.io!
This blog post originally published in https://antmedia.io/how-to-embed-webrtc-live-streaming-into-your-website/
