Navy.gif/owncast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support local development of index.html

Browse Source
This commit is contained in:
Gabe Kangas 2020-06-02 18:37:05 -07:00
parent ad959b130b
commit a29852f404
2 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webroot/index.html
View File

@ -11,7 +11,7 @@
<!-- Used for animating the scrolling of the chat div. Can that be done other ways? -->
<script src="vendor/jquery-2.1.4.min.js"></script>
<script src="vendor/autolink.js"></script>
</head>
@ -24,6 +24,7 @@
autoplay
controls
style="width: 100%;"
src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
></video>
<div id="app">
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.

67
webroot/js/app.js
View File

@ -26,7 +26,7 @@ function setupApp() {
el: "#chatForm",
data: {
message: {
author: localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1),
author: "",//localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1),
body: ""
}
},
@ -47,7 +47,7 @@ function setupApp() {
async function getStatus() {
let url = "/status";
let url = "https://util.real-ity.com:8042/status";
try {
let response = await fetch(url);
@ -67,7 +67,7 @@ async function getStatus() {
function setupWebsocket() {
const protocol = location.protocol == "https:" ? "wss" : "ws"
var ws = new WebSocket(protocol + "://" + location.host + "/entry")
var ws = new WebSocket("wss://util.real-ity.com:8042/entry")
ws.onmessage = (e) => {
var model = JSON.parse(e.data)
@ -99,37 +99,40 @@ function setupWebsocket() {
setupApp()
getStatus()
setupWebsocket()
setInterval(getStatus, 5000)
// setInterval(getStatus, 5000)
// HLS Video setup
var video = document.getElementById("video")
var videoSrc = "hls/stream.m3u8"
if (Hls.isSupported()) {
var hls = new Hls()
hls.loadSource(videoSrc)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play()
});
}
// hls.js is not supported on platforms that do not have Media Source
// Extensions (MSE) enabled.
//
// When the browser has built-in HLS support (check using `canPlayType`),
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// element through the `src` property. This is using the built-in support
// of the plain video element, without using hls.js.
//
// Note: it would be more normal to wait on the 'canplay' event below however
// on Safari (where you are most likely to find built-in HLS support) the
// video.src URL must be on the user-driven white-list before a 'canplay'
// event will be emitted; the last video event that can be reliably
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = videoSrc
video.addEventListener("loadedmetadata", function () {
video.play()
});
function setupVideo() {
var video = document.getElementById("video")
var videoSrc = "hls/stream.m3u8"
if (Hls.isSupported()) {
var hls = new Hls()
hls.loadSource(videoSrc)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play()
});
}
// hls.js is not supported on platforms that do not have Media Source
// Extensions (MSE) enabled.
//
// When the browser has built-in HLS support (check using `canPlayType`),
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// element through the `src` property. This is using the built-in support
// of the plain video element, without using hls.js.
//
// Note: it would be more normal to wait on the 'canplay' event below however
// on Safari (where you are most likely to find built-in HLS support) the
// video.src URL must be on the user-driven white-list before a 'canplay'
// event will be emitted; the last video event that can be reliably
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = videoSrc
video.addEventListener("loadedmetadata", function () {
video.play()
});
}
}
function scrollSmoothToBottom(id) {