Video content is gaining lot of popularity these days and so does streaming. However, streaming video content is not new to web. But the way people are consuming it all around the world, it is becoming an issue for the content creator and content creation companies to control the spread of their content to unauthorized users or simple saying - unsubscribed users.
That's why Digital Rights Management (DRM) was developed to protect the video from piracy and to make it very hard (yet not impossible) to download the original video on client device.
So what it does is when client requests the video from the cloud, it returns the content which is split up in many small chunks. For example, in video, the original video is converted into different qualities and having different bitrate. The more the video resolution/quality and bitrate, the bandwidth it will consume.
Depending on the client internet speed and display size, a suitable quality video is being requested. The whole video is in a small parts - each part encrypted. The DRM such as Google Widewine then decrypts it based on the key provided and that's how the browser is able to show us the chunked pieces of content as complete video.
This becomes very difficult for client part to fetch the small piece of content in .mpd file (file containing list of all the video and audio segments) - then decrypt it using correct key - then merge the video chunks into complete video.
That's a separate part as there are many libraries and framework that can do this work for us. One such is dash.js in JavaScript for browsers. So if you have a clearkey and .mpd file url, you can stream the video in the browser.
First make sure you add dash.js to <head> of your document.
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/3.1.3/dash.all.min.js"></script>
Then you need to initialize player and then set the clearkeys using method setProtectionData() on player.
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"),
"https://path.to/file.mpd",
true);
const protData = {"server": {"clearkeys": {"Key": "Kid"}}};
player.setProtectionData(protData);
In above code, the #videoPlayer is the <video> element having 'videoPlayer' as its ID. Also replace the path with your actual mpd file path. The important thing here is if your mpd file is hosted on different domain, then you might come across a CORS error like below.
Access to XMLHttpRequest at 'https://path.example.com/3c6125bd-497c-48a9-8c08-4c27d21557fa/master.mpd' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
So make sure that you have 'Access-Control-Allow-Origin' header present for your domain from external host. The full example is given below -
<!DOCTYPE html>
<html>
<head>
<title>DashJS MPD Streaming</title>
<style>
.input-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
input {
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
video{
width: 80%;
}
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/3.1.3/dash.all.min.js"></script>
<body>
<div class="input-container">
<input id="url" type="text" placeholder="Enter URL">
<input id="k1" type="text" placeholder="Enter Key1">
<input id="k2" type="text" placeholder="Enter Key2">
<button onclick="play()" type="submit">Submit</button>
</div>
<div class="input-container">
<video id="videoPlayer" controls></video>
</div>
<script>
function play() {
var urlinput = document.getElementById("url").value;
var k1 = document.getElementById("k1").value;
var k2 = document.getElementById("k2").value;
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), urlinput, true);
const protData = {
"org.w3.clearkey": {
"clearkeys": {
"${k1}": "${k2}"
}
}
};
player.setProtectionData(protData);
}
</script>
</body>
</html>
Find DEMO of the above code and have a good day!
0 Please Share a Your Opinion.:
Comment something useful and creative :)