You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
4.6 KiB
154 lines
4.6 KiB
<head> |
|
<meta charset="UTF-8" /> |
|
<title>Live stream test</title> |
|
|
|
<link |
|
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" |
|
rel="stylesheet" |
|
/> |
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> |
|
|
|
<script src="vendor/jquery-2.1.4.min.js"></script> |
|
<script src="vendor/knockout-3.4.0.js"></script> |
|
<script src="vendor/jquery.json-2.5.1.min.js"></script> |
|
<script data-main="js/main" src="vendor/require.js"></script> |
|
</head> |
|
|
|
<div> |
|
<div class="flex"> |
|
<div class="w-4/6"> |
|
<video id="video" controls style="width: 100%;"></video> |
|
<div id="app"> |
|
{{ streamStatus }} |
|
</div> |
|
</div> |
|
|
|
<div class="w-2/6"> |
|
<div |
|
id="messages-container" |
|
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" |
|
style="height: 60vh; overflow-y: scroll;" |
|
> |
|
<div data-bind="foreach: messages"> |
|
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"> |
|
<div class="flex items-center"> |
|
<img |
|
data-bind="attr:{src: image}" |
|
class="w-10 h-10 rounded-full mr-4 border-black-500" |
|
style="padding: 5px; background-color: #ececec;" |
|
/> |
|
|
|
<div class="text-sm"> |
|
<p class="text-700" data-bind="text:author"></p> |
|
<p class="text-gray-600" data-bind="text:body"></p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<form |
|
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" |
|
data-bind="with: editingMessage" |
|
> |
|
<!-- Author --> |
|
<label class="control-label" for="inputAuthor">Author</label> |
|
<input |
|
id="inputAuthor" |
|
type="text" |
|
data-bind="value: author" |
|
class="appearance-none bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" |
|
placeholder="Name" |
|
/> |
|
|
|
<!-- Body --> |
|
<div> |
|
<label class="control-label" for="inputBody">Message</label> |
|
<div class="controls"> |
|
<textarea |
|
id="inputBody" |
|
data-bind="value: body" |
|
placeholder="Message" |
|
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" |
|
> |
|
</textarea> |
|
</div> |
|
</div> |
|
|
|
<div class="control-group"> |
|
<div class="controls"> |
|
<a |
|
href="#" |
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" |
|
data-bind="click: $parent.send.bind($parent)" |
|
>Send</a |
|
> |
|
</div> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
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(); |
|
}); |
|
} |
|
</script> |
|
|
|
<script> |
|
var app = new Vue({ |
|
el: "#app", |
|
data: { |
|
streamStatus: "Hello Vue!", |
|
}, |
|
}); |
|
</script> |
|
|
|
<script> |
|
setInterval(getStatus, 5000); |
|
|
|
async function getStatus() { |
|
let url = "/status"; |
|
try { |
|
let response = await fetch(url); |
|
let status = await response.json(); // read response body and parse as JSON |
|
app.streamStatus = status.online |
|
? "Stream is online." |
|
: "Stream is offline."; |
|
|
|
} catch(e) { |
|
app.streamStatus = "Stream server is offline." |
|
} |
|
|
|
} |
|
|
|
getStatus(); |
|
</script>
|
|
|