| Back | Main view
Preview of multimedia 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 entity content on the IMiS/ARChive Server.
Below is a description of source code with comments for the entity content 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 entity is opened and entity handle is stored, then entity object metadata is read to determine which type of player will be initialized, then entity object content stream is opened to create preview source url.
Video or Audio elements, in all major modern browsers, support reading entity object content in ranges.
On window.close opened entity 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 _entityId = "71NFjRVi0_nlkwuOlu5gwPGL8HyWCPCa"; // Entity identifier
var _objectIndex = 0; // Entity object index
var _entityHandle = null; // Entity 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 entity object preview on window load
window.onload = function (e) {
// Open entity and save entity handle
httpGet({
url: _serviceUrl + "entities/" + _entityId + "/open.json?token=" + _sessionId,
success: function (res) {
_entityHandle = res.handle;
// Get entity object metadata at index
httpGet({
url: _serviceUrl + "entities/H:" + _entityHandle + "/object.json?index=" + _objectIndex + "&token=" + _sessionId,
success: function (res) {
var contentType = res.object.content_type;
// Open entity object stream
httpGet({
url: _serviceUrl + "entities/H:" + _entityHandle + "/object/stream/open.json?index=" + _objectIndex + "&token=" + _sessionId,
success: function (res) {
var streamHandle = res["handle"];
// Check entity 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 + "entities/H:" + _entityHandle + "/object/stream/" + streamHandle + "?index=" + _objectIndex + "&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 + "entities/H:" + _entityHandle + "/object/stream/" + streamHandle + "?index=" + _objectIndex + "&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 entity handle on window close
window.onbeforeunload = function () {
if (_entityHandle) {
httpGet({
url: _serviceUrl + "entities/" + _entityHandle + "/close.json?token=" + _sessionId,
success: function () {
console.log("Entity closed");
}
});
}
return;
}
</script>
</body>
</html>
Audio preview
Example of entity object audio preview at index 0.
Video preview
Example of entity object video preview at index 0.
Related Documents:
IMiS/Storage Connector Services REST - Session
| Back | Main view