Содержание статьи:
В данной статье мы рассмотрим, как встроить на сайт “open source” плеер Shaka Player, который совместим с такими DRM-системами как Widevine, Playready и Fairplay.
Сайт: https://shaka-player-demo.appspot.com/, https://github.com/shaka-project/shaka-player
Поддерживаемые форматы: HLS, MPEG-DASH.
Также здесь представлены ссылки на примеры интеграции Shaka Player с популярными JS-фреймворками (ReactJS, Vue.js, Angular и др.)
Ниже мы приведем пример html-страницы для инициализации плеера:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.3.4/shaka-player.compiled.js" integrity="sha512-l3s0NInvNWKw21k0HPxxa6lBdZi7OrfxvJnQW2tzKCS0w0A4LId1GnKe639KO5ucwZVGF+BZN3pEGehbStPtpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./myapp.js"></script>
</head>
<body>
<video id="video"
width="640"
controls autoplay></video>
</body>
</html>
Пример скрипта myapp.js, подключаемого на странице:
const manifestUri =
'https://myhost.tld/some/folder/index.mpd';
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
async function initPlayer() {
// Create a Player instance.
const video = document.getElementById('video');
const player = new shaka.Player(video);
player.configure({
drm: {
servers: {
'com.widevine.alpha': 'https://[project].nowdrm.co/v2/widevine',
'com.microsoft.playready': 'https://[project].nowdrm.co/v2/playready'
}
}
});
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
try {
await player.load(manifestUri);
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
} catch (e) {
// onError is executed if the asynchronous load fails.
onError(e);
}
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error('Error code', error.code, 'object', error);
}
document.addEventListener('DOMContentLoaded', initApp);
Здесь в скрипте указываем ссылку на dash-плейлист в константе manifestUri, например,
https://myhost.tld/some/folder/index.mpd. HTTPS-доступ к
файлу обязателен.
А в блоке ниже
drm: {
servers: {
'com.widevine.alpha': 'https://[project].nowdrm.co/v2/widevine',
'com.microsoft.playready': 'https://[project].nowdrm.co/v2/playready'
}задаются ссылки до серверов проверки лицензий Widevine и Playready, где [project] — название вашего проекта в личном кабинете cdnnow!
Ниже мы приведем пример html-страницы для инициализации плеера:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.3.4/shaka-player.compiled.js" integrity="sha512-l3s0NInvNWKw21k0HPxxa6lBdZi7OrfxvJnQW2tzKCS0w0A4LId1GnKe639KO5ucwZVGF+BZN3pEGehbStPtpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./myapp.js"></script>
</head>
<body>
<video id="video"
width="640"
controls autoplay></video>
</body>
</html>
Скрипт myapp.js приведен в сокращении. Потребуется реализовать функции получения идентификатора контента (content id), «обертки» запроса лицензии в JSON (registerRequestFilter) и обработки ответа (registerResponseFilter). Примеры доступны здесь.
// ADAPT: add function to get content id.
const manifestUri =
'https://myhost.tld/some/folder/master.m3u8';
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
async function initPlayer() {
// Create a Player instance.
const video = document.getElementById('video');
const player = new shaka.Player(video);
const req = await fetch('https://myhost.tld/certificate.der');
const cert = await req.arrayBuffer();
player.configure({
drm: {
servers: {
'com.apple.fps.1_0': 'https://[project].nowdrm.co/fairplay'
},
advanced: {
"com.apple.fps.1_0": {
serverCertificate: new Uint8Array(cert)
}
}
}});
player.getNetworkingEngine().registerRequestFilter((type, request) => {
if (type != shaka.net.NetworkingEngine.RequestType.LICENSE) {
return;
}
// ADAPT: perform payload wrapping here.
// Get example here: https://shaka-player-demo.appspot.com/docs/api/tutorial-fairplay.html
});
player.getNetworkingEngine().registerResponseFilter((type, response) => {
if (type != shaka.net.NetworkingEngine.RequestType.LICENSE) {
return;
}
// ADAPT: perform response parsing here.
// Get example here: https://shaka-player-demo.appspot.com/docs/api/tutorial-fairplay.html
});
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
try {
await player.load(manifestUri);
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
} catch (e) {
// onError is executed if the asynchronous load fails.
onError(e);
}
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error('Error code', error.code, 'object', error);
}
document.addEventListener('DOMContentLoaded', initApp);
Здесь в скрипте указываем ссылку на hls-плейлист в константе manifestUri, например,
https://myhost.tld/some/folder/master.m3u8. HTTPS-доступ к
файлу обязателен.
В блоке
drm: {
servers: {
'com.apple.fps.1_0': 'https://[project].nowdrm.co/fairplay'
}указывается ссылка на сервер проверки лицензий Fairplay, где [project] — название вашего проекта в личном кабинете cdnnow!
Здесь
const req = await fetch('https://myhost.tld/certificate.der');указывается ссылка к *.der-сертификату вида https://myhost.tld/certificate.der.
HTTPS-доступ к файлу обязателен.
Для тестирования Вы можете воспользоваться нашим сертификатом, для этого напишите вашему менеджеру
drmnow!. Позже вам потребуется получить собственные ключи и сертификат для Fairplay у Apple.