Skip to content

Commit

Permalink
Merge pull request #338 from ant-media/srt-rtmp-samples
Browse files Browse the repository at this point in the history
Add SRT and RTMP Samples pages
  • Loading branch information
mekya committed Feb 18, 2023
2 parents 4582c25 + 3506fa2 commit d139d63
Show file tree
Hide file tree
Showing 6 changed files with 203 additions and 3 deletions.
7 changes: 6 additions & 1 deletion src/main/webapp/css/samples.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
video {
video{
width: 100%;
max-width: 640px;
}
.embedded-player {
width: 100%;
max-width: 640px;
height: 480px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header, .marketing, .footer {
Expand Down
21 changes: 20 additions & 1 deletion src/main/webapp/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div class="container">
<div class="header clearfix">
<div class="row">
<h3 class="col text-muted"><a href="samples.html">WebRTC Samples</a> > Publish</h3>
<h3 class="col text-muted" id="title"><a href="samples.html">WebRTC Samples</a> > WebRTC Publish & </h3>
</div>
</div>

Expand Down Expand Up @@ -44,8 +44,27 @@ <h3 class="col text-muted"><a href="samples.html">WebRTC Samples</a> > Publish</
// It should be true
url_string += getQueryParameter("rtmpForward");

url_string += getQueryParameter("play");

console.log(url_string);
myIframe.src = url_string;

var playType = getUrlParameter("play");
var playTitle = "WebRTC";
if (playType == "webrtc") {
playTitle = "WebRTC";
}
else if (playType == "hls") {
playTitle = "HLS";
}
else if (playType == "dash") {
playTitle = "Dash";
}

let title = document.getElementById("title");
title.innerHTML += playTitle + " Play";


</script>

</body>
Expand Down
11 changes: 11 additions & 0 deletions src/main/webapp/js/utility.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,17 @@ export function getWebSocketURL(location, rtmpForward) {
return websocketURL;
}

export function getSrtURL(location, id, port) {
var appName = location.pathname.substring(1, location.pathname.indexOf("/", 1) + 1);
return "srt://" + location.hostname + ":" + port + "?streamid="+ appName + id;

}

export function getRtmpUrl(location, id) {
var appName = location.pathname.substring(1, location.pathname.indexOf("/", 1) + 1);
return "rtmp://" + location.hostname + "/" + appName + id;
}

export function getQueryParameter(paramName) {
var value = getUrlParameter(paramName);
if (typeof value != "undefined") {
Expand Down
65 changes: 65 additions & 0 deletions src/main/webapp/rtmp_srt_publish_and_play.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>

<head>
<title>WebRTC Samples > Publish & Play</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/external/bootstrap4/bootstrap.min.css">
<link rel="stylesheet" href="css/samples.css" />
</head>

<body>
<div class="container">
<div class="header clearfix">
<div class="row">
<h3 class="col text-muted" id="title"><a href="samples.html">WebRTC Samples</a> > </h3>
</div>
</div>

<iframe class="embed-frame" id="sample-frame"></iframe>

</div>
<script type="module">
import {getUrlParameter} from "./js/fetch.stream.js"
import {getQueryParameter} from "./js/utility.js"

let myIframe = document.getElementById("sample-frame");
let url_string = "samples/rtmp_srt_publish_and_play_sample.html";

var publishType = getUrlParameter("publish");
var playType = getUrlParameter("play");

url_string += "?publish=" + publishType;
url_string += "&play=" + playType;
url_string += getQueryParameter("id");

console.log(url_string);
myIframe.src = url_string;


var publishTitle;
if (publishType == "srt") {
publishTitle = "SRT";
}
else {
publishTitle = "RTMP";
}

var playTitle = "WebRTC";
if (playType == "webrtc") {
playTitle = "WebRTC";
}
else if (playType == "hls") {
playTitle = "HLS";
}
else if (playType == "dash") {
playTitle = "Dash";
}

let title = document.getElementById("title");
title.innerHTML += publishTitle + " Publish & " + playTitle + " Play";
</script>

</body>
</html>
15 changes: 14 additions & 1 deletion src/main/webapp/samples/publish_webrtc.html
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,18 @@
var subscriberCode = getUrlParameter("subscriberCode");
var streamName = getUrlParameter("streamName");
var mainTrack = getUrlParameter("mainTrack");
var playType = getUrlParameter("play");
var playTitle;
if (playType == "hls") {
playTitle = "HLS";
}
else if (playType == "dash") {
playTitle = "Dash";
}
else {
playTitle = "WebRTC";
playType = "webrtc";
}

//TODO: Migrate these methods to Jquery
var start_publish_button = document.getElementById("start_publish_button");
Expand Down Expand Up @@ -439,7 +451,8 @@
function startAnimation() {
$("#offlineInfo").hide();
$("#broadcastingInfo").show();
$("#playlink").attr("href", "../play.html?id=" + streamId)
$("#playlink").attr("href", "../play.html?id=" + streamId+"&playOrder="+playType);
$("#playlink").text("Play with " + playTitle);
$("#playlink").show();

setTimeout(function () {
Expand Down
87 changes: 87 additions & 0 deletions src/main/webapp/samples/rtmp_srt_publish_and_play_sample.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<html>
<head>
<title>WebRTC Samples > Audio Play</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/external/bootstrap4/bootstrap.min.css">
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/samples.css" />
<script src="../js/external/adapter-latest.js"></script>

</head>
<body>
<div>
<div class="jumbotron">
<div class="alert alert-primary text-center enterprise-feature" role="alert" style="margin-top:-2em">
WebRTC Playback is an Enterprise Edition. <br/>
<a href="https://antmedia.io">Try Enterprise Edition for free at antmedia.io</a> <br/><br/>
</div>
<div class="form-group col-sm-12 text-center">
<iframe id="embedded-player" class="embedded-player" ></iframe>
</div>
<div class="form-group col-sm-12 text-center">
<div class="form-group col-sm-12 text-center">
Publish Stream to <div id="urlToPublish"></div>
</div>
<div class="form-group text-center" style="margin-bottom: 8px;font-size:1em;">
<a id="documentLink" target="_blank" data-toggle="tooltip" title="" data-original-title="Opens in New Tab">Learn How to Publish</a>
</div>
</div>
</div>
<footer class="footer text-left">
<div class="row">
<div class="col-sm-6 text-left"><a target="_parent" href="https://github.com/ant-media/StreamApp/tree/master/src/main/webapp/samples/rtmp_srt_publish_and_play_sample.html">View Source on Github</a></div>
<div class="col-sm-6 text-right">
<a href="http://antmedia.io" target="_parent">antmedia.io</a>
</div>
</div>
</footer>
</div>
<script src="../js/external/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="../js/external/popper.min.js" crossorigin="anonymous"></script>
<script src="../js/external/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
<script type="module">
import {WebRTCAdaptor} from "../js/webrtc_adaptor.js"
import {getUrlParameter} from "../js/fetch.stream.js"
import { generateRandomString, getSrtURL, getRtmpUrl } from "../js/utility.js"

var id = getUrlParameter("id");

var streamId = "stream1";
if (typeof id != "undefined") {
streamId = id;
}
else {
streamId = "streamId_" + generateRandomString(9);
}

var publishType = getUrlParameter("publish");
var playType = getUrlParameter("play");

var url;
var documentLink;
if (publishType == "srt") {
url = getSrtURL(location, streamId, 4200);
documentLink = "https://antmedia.io/docs/category/srt/";
}
else {
url = getRtmpUrl(location, streamId);
documentLink = "https://antmedia.io/docs/category/rtmp/";
}

if (playType != "webrtc" && playType != "hls" && playType != "dash") {
playType = "webrtc";
}

let embeddedPlayer = document.getElementById("embedded-player");
embeddedPlayer.src = "../play.html?id=" + streamId + "&playOrder="+playType;

let publishingURL = document.getElementById("urlToPublish");
publishingURL.innerText = url;

let documentLinkTag = document.getElementById("documentLink");
documentLinkTag.href = documentLink

</script>
</html>

0 comments on commit d139d63

Please sign in to comment.