roypur/stream-api
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

override RemotePlayer

Browse Source
This commit is contained in:
Roy Olav Purser 2021-05-20 17:02:45 +02:00
parent af036abf0d
commit f201d8e803
Signed by: roypur
GPG Key ID: E14D26A036F21656
2 changed files with 61 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/index.html
View File

@ -2,8 +2,9 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">{% for item in meta %} <meta name="viewport" content="width=device-width, initial-scale=1">{% for item in meta %}
{% block item %}<meta property="{{ item[0] }}" content="{{ item[1] }}" />{% end %}{% end %} {% block item %}<meta property="{{ item[0] }}" content="{{ item[1] }}" />{% end %}{% end %}
<script async src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
<script async src="https://www.gstatic.com/cast/sdk/libs/sender/1.0/cast_framework.js"></script>
<script async src="{{ data["script"] }}"></script> <script async src="{{ data["script"] }}"></script>
<script async src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/video.js/{{ data["videojs_version"] }}/video.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/video.js/{{ data["videojs_version"] }}/video.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@silvermine/videojs-chromecast@{{ data["chromecast_version"] }}/dist/silvermine-videojs-chromecast.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/@silvermine/videojs-chromecast@{{ data["chromecast_version"] }}/dist/silvermine-videojs-chromecast.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ data["font_awesome_version"] }}/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ data["font_awesome_version"] }}/css/all.min.css">

113
frontend/script.js
View File

@ -1,67 +1,72 @@
(() => { (() => {
let upstream = "{{ stream }}"; const setRemotePlayer = () => {
let xhr = new XMLHttpRequest(); class NewRemotePlayer extends cast.framework.RemotePlayer {
constructor() {
super();
this.canControlVolume = false;
}
}
cast.framework.RemotePlayer = NewRemotePlayer;
}
const upstream = "{{ stream }}";
const xhr = new XMLHttpRequest();
xhr.open("HEAD", upstream, true); xhr.open("HEAD", upstream, true);
xhr.send(); xhr.send();
let count = 2; let count = 2;
let handleCount = () => { const handleCount = () => {
if(--count === 0) { if(--count === 0) {
handle(); handle();
} }
} }
let handle = () => { const handleLoaded = () => {
let bodies = document.getElementsByTagName("body"); setRemotePlayer();
if(bodies.length === 1) { handleCount();
let body = bodies[0];
let video = document.createElement("video");
video.className = "video-js vjs-big-play-centered";
body.appendChild(video);
let ctype = xhr.getResponseHeader("Content-Type");
console.log(ctype);
let options = {};
options.controls = true;
options.liveui = true;
options.responsive = true;
options.fill = true;
options.techOrder = ["chromecast", "html5"];
options.plugins = {};
options.plugins.chromecast = {};
options.plugins.chromecast.requestTitleFn = (src) => {
return "{% raw title %}";
}
let player = videojs(video, options);
let source = {};
source.type = ctype;
source.src = upstream;
player.src(source);
let Button = videojs.getComponent("Button");
let cbutton = {};
cbutton.clickHandler = (ev) => {
try {
player.chromecastSessionManager.remotePlayer.canControlVolume = false;
} catch(error) {
console.log(error);
}
player.trigger("chromecastRequested");
}
let button = new Button(player, cbutton);
button.addClass("fab");
button.addClass("fa-chromecast");
button.addClass("vjs-control");
button.addClass("vjs-button");
button.addClass("vjs-big-chromecast");
//player.one("chromecastDevicesAvailable", () => {
player.addChild(button);
player.one("play", () => {
player.removeChild(button);
});
//});
}
} }
document.addEventListener("DOMContentLoaded", handleCount);
const handle = () => {
const [body] = document.getElementsByTagName("body");
const video = document.createElement("video");
video.className = "video-js vjs-big-play-centered";
body.appendChild(video);
const ctype = xhr.getResponseHeader("Content-Type");
console.log(ctype);
const options = {};
options.controls = true;
options.liveui = true;
options.responsive = true;
options.fill = true;
options.techOrder = ["chromecast", "html5"];
options.plugins = {};
options.plugins.chromecast = {};
options.plugins.chromecast.requestTitleFn = (src) => {
return "{% raw title %}";
}
const player = videojs(video, options);
const source = {};
source.type = ctype;
source.src = upstream;
player.src(source);
const Button = videojs.getComponent("Button");
const cbutton = {};
cbutton.clickHandler = (ev) => {
player.trigger("chromecastRequested");
}
const button = new Button(player, cbutton);
button.addClass("fab");
button.addClass("fa-chromecast");
button.addClass("vjs-control");
button.addClass("vjs-button");
button.addClass("vjs-big-chromecast");
player.addChild(button);
player.one("play", () => {
player.removeChild(button);
});
}
document.addEventListener("DOMContentLoaded", handleLoaded);
xhr.addEventListener("load", handleCount); xhr.addEventListener("load", handleCount);
})(); })();