129 lines
3.9 KiB
HTML
129 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>OpenVidu IP cameras demo</title>
|
|
<link rel="styleSheet" href="style.css" type="text/css" media="screen">
|
|
</link>
|
|
<script src="openvidu-browser-2.12.0.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>OpenVidu IP cameras demo</h1>
|
|
<form class="form-group" action="/" method="get">
|
|
<input type="text" name="credentials" placeholder="credentials" required="true" value="PASSWORD"></input>
|
|
<button type="submit">Subscribe to cameras</button>
|
|
</form>
|
|
<button onclick="unsubscribe()">Unsubscribe from cameras</button>
|
|
<div id="cameras"></div>
|
|
</body>
|
|
|
|
<script th:inline="javascript">
|
|
// OpenVidu objects
|
|
var OV
|
|
var session;
|
|
var videosContainer = document.getElementById('cameras');
|
|
|
|
// Get all the attributes from the template in Thymeleaf style
|
|
var error = [[${error}]];
|
|
var token = [[${token}]];
|
|
|
|
if (!!error) {
|
|
alert(error);
|
|
} else if (!!token) {
|
|
// Subscribe to OpenVidu session only when token is available
|
|
subscribe(token);
|
|
}
|
|
|
|
function subscribe() {
|
|
|
|
// Initialize OpenVidu and Session objects
|
|
OV = new OpenVidu();
|
|
session = OV.initSession();
|
|
|
|
// On every new Stream received...
|
|
session.on('streamCreated', event => {
|
|
|
|
// Subscribe to the Stream to receive it
|
|
// HTML video will be appended to a new element created inside <div id='cameras'>
|
|
var videoDiv = document.createElement('div');
|
|
var stream = event.stream;
|
|
videoDiv.classList.add('video-container');
|
|
videoDiv.id = stream.streamId;
|
|
videosContainer.appendChild(videoDiv);
|
|
// Append video inside our brand new <div> element
|
|
var subscriber = session.subscribe(stream, videoDiv);
|
|
|
|
// When the HTML video has been appended to DOM...
|
|
subscriber.on('videoElementCreated', ev => {
|
|
// ...append camera name on top of video
|
|
var cameraName = document.createElement('div');
|
|
cameraName.innerText = stream.connection.data;
|
|
cameraName.classList.add('camera-name');
|
|
ev.element.parentNode.insertBefore(cameraName, ev.element);
|
|
// ...start loader
|
|
var loader = document.createElement('div');
|
|
loader.classList.add('loader');
|
|
ev.element.parentNode.insertBefore(loader, ev.element.nextSibling);
|
|
});
|
|
|
|
// When the HTML video starts playing...
|
|
subscriber.on('streamPlaying', ev => {
|
|
// ...remove loader
|
|
var cameraVideoElement = subscriber.videos[0].video;
|
|
cameraVideoElement.parentNode.removeChild(cameraVideoElement.nextSibling);
|
|
// ... mute video if browser blocked autoplay
|
|
autoplayMutedVideoIfBlocked(cameraVideoElement);
|
|
});
|
|
|
|
// When the HTML video has been removed from DOM...
|
|
subscriber.on('videoElementDestroyed', ev => {
|
|
// ...remove the HTML elements related to the destroyed video
|
|
var videoContainer = document.getElementById(stream.streamId);
|
|
videoContainer.parentNode.removeChild(videoContainer);
|
|
});
|
|
});
|
|
|
|
// Connect to session. We will receive all necessary events when success
|
|
session.connect(token)
|
|
.catch(error => {
|
|
var msg = 'There was an error connecting to the session. Code: ' + error.code + '. Message: ' + error
|
|
.message;
|
|
console.error(msg);
|
|
alert(msg);
|
|
});
|
|
}
|
|
|
|
function unsubscribe() {
|
|
if (!!session) {
|
|
// Leave OpenVidu Session
|
|
session.disconnect();
|
|
}
|
|
}
|
|
|
|
function autoplayMutedVideoIfBlocked(video) {
|
|
// Browser can block video playback if it is auto played without user interaction
|
|
// One solution is to mute the video and let the user know
|
|
video.controls = true;
|
|
var promise = video.play();
|
|
if (promise !== undefined) {
|
|
promise.then(() => {
|
|
// Autoplay started
|
|
}).catch(error => {
|
|
// The video must play muted until user hits play button
|
|
video.muted = true;
|
|
video.play();
|
|
});
|
|
}
|
|
}
|
|
|
|
// Unsubscribe from OpenVidu session when leaving the page
|
|
window.addEventListener("beforeunload", () => {
|
|
unsubscribe();
|
|
});
|
|
</script>
|
|
|
|
</html>
|