@koush/ring-client-api
Version:
Unofficial API for Ring doorbells, cameras, security alarm system and smart lighting
63 lines (57 loc) • 2.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no, user-scalable=no"
/>
<title>Ring Stream</title>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 10px;
height: 100vh;
width: 100vw;
overflow: hidden;
}
video {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<!--<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" controls></video>
<script>
const LIVE_STREAM_URL = 'output/stream.m3u8',
video = document.getElementById('video')
if (Hls.isSupported()) {
const config = { liveDurationInfinity: true },
hls = new Hls(config)
hls.loadSource(LIVE_STREAM_URL)
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 = LIVE_STREAM_URL
video.addEventListener('loadedmetadata', function() {
video.play()
})
}
</script>
</body>
</html>