Preview of multimedia staged content using IMiS/Storage Connector Services REST

Product:	IMiS/StorageConnector Services REST
Release:	9.8.2110
Date:	12/22/2021

Case:

Web applications can utilize IMiS/Storage Connector Services REST's ability to read partial requests using ranges (RFC 7233)

Description:

This example demonstrates operations which displays preview of audio or video of staged object content on the IMiS/ARChive Server.

Below is a description of source code with comments for the object preview in HTML and JavaScript.

Example of multimedia preview with source code

Session identifier must be acquired using session lifecycle API described in related article.

On window.load object is opened and object handle is stored, then object object metadata is read to determine which type of player will be initialized, then object content stream preview with source url is initialized.

Video or Audio elements, in all major modern browsers, support reading entity object content in ranges.

On window.close opened object is closed.

Source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Player</title>
<style>
body {
margin: 0;
padding: 0;
}

.player audio {
padding-top: 10px;
display: none;
margin: 0 auto;
min-width: 50%;
}

.player video {
max-width: 100%;
height: 100%;
display: none;
margin: 0 auto;
height: 100vh;
}
</style>
</head>
<body>
<div class="player">
<audio id="audio" controls preload="metadata">
<source id="audioSource" />
</audio>
<video id="video" controls>
<source id="videoSource" />
</video>
</div>
<script>
var _serviceUrl = "https://apps01.imis.si/api/archives/iarc/"; // REST service url with archive id
var _sessionId = "NzhkMzI0ZjQtY2IyZi00MGRmLTgwNDYtOTRiNWY3YjE5MjQ1I2lhcmM"; // Session identifier
var _objectId = "SsrV-VC0VD3NpfNfO84ZbnpsH-4wW0I9"; // Object identifier
var _objectHandle = null; // Object handle

// Sends http GET request
function httpGet(options) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
if (options.success) {
if (this.responseText)
options.success(JSON.parse(this.responseText));
else
options.success();
}
}
};
xhttp.open("GET", options.url, true);
xhttp.send();
}

// Load object preview on window load
window.onload = function (e) {
// Open object and save handle
httpGet({
url: _serviceUrl + "objects/" + _objectId + "/handle/open.json?token=" + _sessionId,
success: function (res) {
_objectHandle = res.handle;

// Get object metadata
httpGet({
url: _serviceUrl + "objects/H:" + _objectHandle + ".json?token=" + _sessionId,
success: function (res) {
var contentType = res.object.content_type;

// Check object content type
if (contentType === "audio/wav" || contentType === "audio/ogg" || contentType === "audio/mpeg"
|| contentType === "audio/webm" || contentType === "audio/mp3") {
// Initialize audio element
var src = _serviceUrl + "objects/H:" + _objectHandle + "/stream?token=" + _sessionId;
var audio = document.getElementById("audio");
document.getElementById("audioSource").src = src;
document.getElementById("audioSource").type = contentType;
audio.style.display = "block";
audio.pause();
audio.load();
}
else if (contentType === "video/mp4" || contentType === "video/webm" || contentType === "video/ogg") {
// Initialize video element
var src = _serviceUrl + "objects/H:" + _objectHandle + "/stream?token=" + _sessionId;
var video = document.getElementById("video");
document.getElementById("videoSource").src = src;
document.getElementById("videoSource").type = contentType;
video.style.display = "block";
video.pause();
video.load();
}
}
});
}
});
}

// Close object handle on window close
window.onbeforeunload = function () {
if (_objectHandle) {
httpGet({
url: _serviceUrl + "objects/" + _objectHandle + "/handle/close.json?token=" + _sessionId,
success: function () {
console.log("Object closed");
}
});
}
return;
}
</script>
</body>
</html>

Audio preview

Example of object audio preview.

Video preview

Example of object video preview.

Related Documents:

Database 'IMiS Knowledge database', View 'By Product', Document 'IMiS/Storage Connector Services REST - Session'

IMiS/Storage Connector Services REST - Session

| Back | Main view