When you’re broadcasting to Ant Media Server, this message is going to appear on the Ant Media web-based video player: “Your live stream will play automatically as soon as it’s available” as seen in the image below:
To customize this text, follow the steps below:
Navigate to the Webapp subdirectory under Ant Media
You need to have root access to your server and navigate to the following subdirectory directory path:
cd usr/local/antmedia/webapps/APP_NAMEThe {APP_NAME} is the specified application container that has all the streams you’re running. By default, Ant Media ships with two streaming applications:
- LiveAPP
- WebRTCApp
These apps are located under the following Ant Media subdirectory:
cd /usr/local/antmedia/webappsSee the image below:
Now, inside your Ant Media Web Panel, you can decide to use any of these applications to set up your streams.
Assuming you’ve set up the streams under LiveApp, then on your terminal, you will have to navigate to the following subdirectory:
cd usr/local/antmedia/webapps/LiveAppOn the other hand, if you’re using WebRTCAppEE, the directory path will be as seen below:
cd usr/local/antmedia/webapps/WebRTCAppEdit Play.html file
When you’re inside the specified webapp subdirectory, you’re going to find the play.html file. See the image below:
You can use any text editor on the terminal. In this example, we will be using the nano editor to edit the play.html file as seen below:
nano play.htmlThe above command will open the file, enabling you to see the following content:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ant Media Server WebRTC/HLS/DASH Player</title>
<link href="css/player.css" rel="stylesheet">
</head>
<body>
<div id="video_info">
Your live stream will play automatically as soon as it's available. <br />Get ready to be part of the action!
<!--
<div>
<img id="logo" src="images/logo.png" />
</div>
-->
</div>
<div id="video_container">
<video id='video-player' class='video-js vjs-default-skin vjs-big-play-centered' controls playsinline></video>
</div>
<div id="networkWarning">Your connection isn't fast enough to play this stream!</div>
<img id="play_button" src="images/play.png" onclick="playWebRTCVideo()"
style="position: absolute; top: 30px; left: 30px; display: none;" />
<!-- Mute/Unmute Video Button for 360 playback -->
<button id="unmuteButton" title="Mute/Unmute Video">
Unmute
</button>
<script type="module">
/**
* This page accepts following arguments through http query parameters
* 1. "id": the stream id to play.It is mandatory
* 2. "token": the token to play stream. It's mandatory if token security is enabled on server side.
* 3. "autoplay": To start playing automatically if streams is available. Optional. Default value is true
* 4. "mute": To start playing with mute if streams is available. Optional. Default value is true
* 5. "playOrder": the order which technologies is used in playing. Optional. Default value is "webrtc,hls".
* possible values are "hls,webrtc","webrtc","hls","vod","dash"
* 6. "playType": the order which play type is used in playing. Optional. Default value is "mp4,webm".
* possible values are "webm,mp4"","mp4","webm","mov"
* 7. "targetLatency": To define target latency for the DASH player. Optional. Default value is 3.
* 8. "is360": To play the stream in 360. Default value is false.
* It support vod playback directly from name of the file. Just give the stream id having a prefix with streams folder
* streams/test.mp4
*/
import { EmbeddedPlayer } from "./js/embedded-player.js";
var embeddedPlayer = new EmbeddedPlayer(window, document.getElementById("video_container"), document.getElementById("video_info"));
window.addEventListener("load", () => {
embeddedPlayer.play();
});
embeddedPlayer.addWebRTCDataListener((data) => {
console.log("Data received: " + data);
});
window.embeddedPlayer = embeddedPlayer;
// Mute/Unmute Video Button for 360 playback
document.getElementById("unmuteButton").addEventListener("click", function() {
if (embeddedPlayer.isMuted()) {
embeddedPlayer.mutePlayer(false);
document.getElementById("unmuteButton").innerHTML = "Mute";
} else {
embeddedPlayer.mutePlayer(true);
document.getElementById("unmuteButton").innerHTML = "Unmute";
}
});
embeddedPlayer.addPlayerListener((status) => {
if (status == "play") {
if (embeddedPlayer.is360) {
document.getElementById("unmuteButton").style.display = "block";
}
}
else if (status == "ended") {
document.getElementById("unmuteButton").style.display = "none";
}
});
</script>
</body>
</html>In the play.html code, you need to find the following div section:
<div id="video_info">
Your live stream will play automatically as soon as it's available. <br />Get ready to be part of the action!
<!--
<div>
<img id="logo" src="images/logo.png" />
</div>
-->
</div>RECOMMENDED READING: SOLVED: Your live stream will play automatically as soon as it’s available
