javascript - 如何在 Shaka Player 发出的清单请求中包含自定义标头?
问题描述
非常感谢您抽出宝贵时间回复。假设我必须按照以下要求播放直播;我怎样才能为浏览器制作一个工作播放器?
清单 URL = "https://live-stream-manifest.mpd"
清单 URL 需要特殊的标头:
HeaderName = "manName1" HeaderValue = "manValue1"
HeaderName = "manName2" HeaderValue = "manValue2"
Widevine 许可证 URL = "https://widevine-license.com"
Widevine 许可证需要特殊的标头:
HeaderName = "licName1" HeaderValue = "licValue1"
HeaderName = "licName2" HeaderValue = "licValue2"
使用上述信息,我制作了以下播放器,但我不知道在哪里放置请求时所需的清单标头。
<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>
由于我的编程技能很少,您能否回复适当的播放器代码,包括清单标头,这将非常有帮助,并提前感谢您的宝贵时间。
解决方案
谢谢大家的帮助,但我能够弄清楚如何使用以下代码实现这一点。
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 函数引用:https ://shaka-player-demo.appspot.com/docs/api/shaka.net.NetworkingEngine.html
有些标题是禁止的,你不能给他们发送推荐人:https ://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name
禁止标头的解决方法使用浏览器扩展来应用自定义标头,例如https://modheader.com/
推荐阅读
- google-sheets - 从 ArrayFormula 中删除重复项
- java - 关于正确实现接口的错误
- angular - 如何以类型安全的方式在 Typescript 3.x 中表达部分函数应用程序?
- amazon-web-services - 避免 MalformedPolicyDocument 错误的 KMS 密钥策略的有效语法是什么?
- javascript - 将下拉列表中的多选值添加到数组
- azure - Azure SNAT 耗尽 - 我如何知道它何时发生?
- javascript - 依赖于其范围之外的变量的函数会导致 Javascript 中的内存泄漏?
- python - 让我的乌龟在遇到另一只乌龟时变大
- c - 以下 strncpy 调用的解释
- javascript - toLocaleString - 如果不是 .00,则仅显示小数