Skip to content

Commit

Permalink
Merge pull request #256 from ant-media/refactor/improve-stability
Browse files Browse the repository at this point in the history 
Run main method after page is fully loaded
  • Loading branch information
@mekya
mekya authored Feb 1, 2022
2 parents fbcf3c9 + b9fb790 commit 92b3cab
Showing 1 changed file with 64 additions and 68 deletions.
132 changes: 64 additions & 68 deletions src/main/webapp/play.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,70 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ant Media Server WebRTC/HLS/DASH Player</title>

<script src="js/fetch.js"></script>
<script src="js/promise.min.js"></script>
<script src="js/external/adapter-latest.js"></script>

<link href="css/player.css" rel="stylesheet">
</head>

<body>

<div id='video-overlay'>
<img src="images/loading.gif" alt="loading image" />
</div>

<div id="video_info">
Stream will start playing automatically<br />when it is live
</div>

<!-- HLS Player -->
<div id="video_container">
<video id="video-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading
to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports
HTML5 video</a>
</p>
</video>
</div>

<!-- WebRTC Player -->

<video id="remoteVideo" controls playsinline></video>

<!-- 360 player is added dynamically -->


<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 -->
<button onclick="changeVideoMuteStatus()" id="unmuteButton" title="Mute/Unmute Video">
Unmute
</button>


<script type="module">
//This part is implemented to speed up opening the player
import { getUrlParameter } from "./js/fetch.stream.js";
/**
* This page accepts following arguments.
* 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.
*/

import { WebRTCAdaptor } from "./js/webrtc_adaptor.js"
import { getUrlParameter, isMobile, tryToPlay, tryToVODPlay } from "./js/fetch.stream.js";

var playOrder = getUrlParameter("playOrder");
if (playOrder == null) {
playOrder = ["webrtc", "hls"];
Expand All @@ -23,7 +77,6 @@
//make play order global to let the other module access it
window.playOrder = playOrder;


var head = document.getElementsByTagName('head')[0];
if (playOrder.includes("hls") || playOrder.includes("vod")) {
//include videojs -> js
Expand Down Expand Up @@ -58,7 +111,6 @@
var aframeJS = document.createElement("script");
aframeJS.type = "text/javascript";
aframeJS.src = "js/external/aframe.min.js";


aframeJS.onload = function() {
var aScene = document.createElement("a-scene");
Expand All @@ -76,67 +128,8 @@
}

window.is360 = is360;

</script>

</head>

<body>

<div id='video-overlay'>
<img src="images/loading.gif" />
</div>

<div id="video_info">
Stream will start playing automatically<br />when it is live
</div>

<!-- HLS Player -->
<div id="video_container">
<video id="video-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading
to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports
HTML5 video</a>
</p>
</video>
</div>

<!-- WebRTC Player -->

<video id="remoteVideo" controls playsinline></video>

<!-- 360 player is added dynamically -->


<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 -->
<button onclick="changeVideoMuteStatus()" id="unmuteButton" title="Mute/Unmute Video">
Unmute
</button>


<script type="module">
/**
* This page accepts following arguments.
* 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.
*/

import { WebRTCAdaptor } from "./js/webrtc_adaptor.js"
import { getUrlParameter, isMobile, tryToPlay, tryToVODPlay } from "./js/fetch.stream.js";




var streamId = getUrlParameter("id");
Expand Down Expand Up @@ -754,8 +747,11 @@
}
}


main();
window.addEventListener('load', function() {
//run main method after everything is loaded
main();
});

</script>

</body>
Expand Down

0 comments on commit 92b3cab

Please sign in to comment.