Thank you so much for taking your time and reply. Lets say I have to play live stream with the following requirements; How can I make a working Player for a browser?
Manifest URL = "https://live-stream-manifest.mpd"
Manifest URL require special headers which are;
HeaderName = "manName1" HeaderValue = "manValue1"
HeaderName = "manName2" HeaderValue = "manValue2"
Widevine License URL = "https://widevine-license.com"
Widevine License require special headers which are;
HeaderName = "licName1" HeaderValue = "licValue1"
HeaderName = "licName2" HeaderValue = "licValue2"
With the above info I made the following player but I don't know where to put the headers for manifest which are required when request is made.
<head>
<!-- Shaka Player ui compiled library: -->
<!-- <script src='dist/shaka-player.ui.js'></script> -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.0.7/shaka-player.ui.min.js' integrity='sha512-KpD7UW8aOliftdEvclj0KBnwh6vKS708SS41xCNr11yjCSAcYxb4+tlaQTfK+GDw2VCv2DxiM2Zu1d3+WqXw+g==' crossorigin='anonymous'></script>
<!-- Shaka Player ui compiled library default CSS: -->
<!-- <link rel='stylesheet' type='text/css' href='dist/controls.css'> -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.0.7/controls.min.css' integrity='sha512-XLwXArwaPbtdmlcbaeNgSF3cBB4Q7T7ptfhEfpkDIc/gkvKk8S413yzTByJ7X9dgOZR/T7NxrQI0HE4hlc+2GQ==' crossorigin='anonymous' />
<!-- Chromecast SDK (if you want Chromecast support for your app): -->
<script defer src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js'></script>
<!-- Your application source: -->
</head>
<body>
<!-- The data-shaka-player-container tag will make the UI library place the controls in this div.
The data-shaka-player-cast-receiver-id tag allows you to provide a Cast Application ID that
the cast button will cast to; the value provided here is the sample cast receiver. -->
<div data-shaka-player-container style='max-width:40em'
data-shaka-player-cast-receiver-id='930DEB06'>
<!-- The data-shaka-player tag will make the UI library use this video element.
If no video is provided, the UI will automatically make one inside the container div. -->
<video autoplay data-shaka-player id='video' style='width:100%;height:100%'></video>
</div>
</body>
<script>
const manifestUri = 'https://live-stream-manifest.mpd';
const licenseServer = 'https://widevine-license.com';
async functi
on init() {
// When using the UI, the player is made automatically by the UI object.
const video = document.getElementById('video');
const ui = video['ui'];
const controls = ui.getControls();
const player = controls.getPlayer();
player.configure({drm:{servers:{'com.widevine.alpha':licenseServer}}});
// Attach player and ui to the window to make it easy to access in the JS console.
window.player = player;
window.ui = ui;
// Listen for error events.
player.addEventListener('error', onPlayerErrorEvent);
controls.addEventListener('error', onUIErrorEvent);
player.getNetworkingEngine().registerRequestFilter(function(type, request) {
// Only add headers to license requests:
if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
// This is the specific header name and value the server wants:
request.headers['licName1'] = 'licValue1';
request.headers['licName2'] = 'licValue2';
}
});
// 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 (error) {
onPlayerError(error);
}
}
function onPlayerErrorEvent(errorEvent) {
// Extract the shaka.util.Error object from the event.
onPlayerError(event.detail);
}
function onPlayerError(error) {
// Handle player error
console.error('Error code', error.code, 'object', error);
}
function onUIErrorEvent(errorEvent) {
// Extract the shaka.util.Error object from the event.
onPlayerError(event.detail);
}
function initFailed(errorEvent) {
// Handle the failure to load; errorEvent.detail.reasonCode has a
// shaka.ui.FailReasonCode describing why.
console.error('Unable to load the UI library!');
}
// Listen to the custom shaka-ui-loaded event, to wait until the UI is loaded.
document.addEventListener('shaka-ui-loaded', init);
// Listen to the custom shaka-ui-load-failed event, in case Shaka Player fails
// to load (e.g. due to lack of browser support).
document.addEventListener('shaka-ui-load-failed', initFailed);
</script>
Since I have little programming skills, can you reply with the appropriate player code including manifest headers, it will be so helpful and thank you in advance for your precious time.
Thank you all for your assistance but i was able to figure out how to implement this with the following code.
player.getNetworkingEngine().registerRequestFilter(function(type, request) {
// This are headers to license requests:
if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
// This is the specific header name and value the server wants:
request.headers['licName1'] = 'licValue1';
request.headers['licName2'] = 'licValue2';
}
// This function filters manifest request and add custom headers:
if (type == shaka.net.NetworkingEngine.RequestType.MANIFEST) {
// This are headers to manifest requests:
request.headers['manName1'] = 'manValue1';
request.headers['manName2'] = 'manValue2';
}
});
NetworkingEngine function referrer: https://shaka-player-demo.appspot.com/docs/api/shaka.net.NetworkingEngine.html
Some headers are forbidden you can't send them referrer: https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name
Workaround to forbidden headers use browser extensions to apply custom headers e.g. https://modheader.com/