如何在 Shaka Player 发出的清单请求中包含自定义 headers?
How to include custom headers in manifest request made by Shaka Player?
非常感谢您花时间回复。假设我必须按照以下要求播放直播;我怎样才能为浏览器制作一个可用的播放器?
清单URL = "https://live-stream-manifest.mpd"
清单 URL 需要特殊 headers 是;
HeaderName = "manName1" HeaderValue = "manValue1"
HeaderName = "manName2" HeaderValue = "manValue2"
Widevine 许可证 URL = "https://widevine-license.com"
Widevine 许可证需要特殊的 headers 是;
HeaderName = "licName1" HeaderValue = "licValue1"
HeaderName = "licName2" HeaderValue = "licValue2"
根据以上信息,我制作了以下播放器,但我不知道将 headers 用于发出请求时所需的清单。
<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>
由于我的编程技能不多,能否回复包含清单的适当播放器代码 headers,这将非常有帮助,提前感谢您的宝贵时间。
我 运行 在充满 Shaka(和 Clappr 分机)的 Clappr 上使用以下设置。说明也适用于任何其他基于 Shaka 的视频客户端。参考https://shaka-player-demo.appspot.com/docs/api/tutorial-license-server-auth.html.
就我而言,文档与从 player.getNetworkingEngine().registerRequestFilter
返回的捕获类型的方式之间可能存在不匹配。与文档中不同,我发现 2 个对应于 WV 请求。
playerCfg.shakaConfiguration.drm = {
retryParameters: { maxAttempts: 5 },
servers: {
'com.widevine.alpha': "https://wv-server.com/license"
}
};
playerCfg.shakaOnBeforeLoad = function(player) {
player.getNetworkingEngine().registerRequestFilter(function(type, request) {
if (type == 2) {
request.headers['authorization'] = "eyADjdadosj0cj9a0sc90cj90asca";
}
});
};
有关 Clappr 文档,请参阅:https://github.com/clappr/dash-shaka-playback
感谢大家的帮助,但我能够弄清楚如何使用以下代码实现它。
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
一些 headers 被禁止,您不能向他们发送推荐人:https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name
禁止 headers 的解决方法使用浏览器扩展来应用自定义 headers 例如https://modheader.com/
非常感谢您花时间回复。假设我必须按照以下要求播放直播;我怎样才能为浏览器制作一个可用的播放器?
清单URL = "https://live-stream-manifest.mpd"
清单 URL 需要特殊 headers 是;
HeaderName = "manName1" HeaderValue = "manValue1"
HeaderName = "manName2" HeaderValue = "manValue2"
Widevine 许可证 URL = "https://widevine-license.com"
Widevine 许可证需要特殊的 headers 是;
HeaderName = "licName1" HeaderValue = "licValue1"
HeaderName = "licName2" HeaderValue = "licValue2"
根据以上信息,我制作了以下播放器,但我不知道将 headers 用于发出请求时所需的清单。
<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>
由于我的编程技能不多,能否回复包含清单的适当播放器代码 headers,这将非常有帮助,提前感谢您的宝贵时间。
我 运行 在充满 Shaka(和 Clappr 分机)的 Clappr 上使用以下设置。说明也适用于任何其他基于 Shaka 的视频客户端。参考https://shaka-player-demo.appspot.com/docs/api/tutorial-license-server-auth.html.
就我而言,文档与从 player.getNetworkingEngine().registerRequestFilter
返回的捕获类型的方式之间可能存在不匹配。与文档中不同,我发现 2 个对应于 WV 请求。
playerCfg.shakaConfiguration.drm = {
retryParameters: { maxAttempts: 5 },
servers: {
'com.widevine.alpha': "https://wv-server.com/license"
}
};
playerCfg.shakaOnBeforeLoad = function(player) {
player.getNetworkingEngine().registerRequestFilter(function(type, request) {
if (type == 2) {
request.headers['authorization'] = "eyADjdadosj0cj9a0sc90cj90asca";
}
});
};
有关 Clappr 文档,请参阅:https://github.com/clappr/dash-shaka-playback
感谢大家的帮助,但我能够弄清楚如何使用以下代码实现它。
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
一些 headers 被禁止,您不能向他们发送推荐人:https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name
禁止 headers 的解决方法使用浏览器扩展来应用自定义 headers 例如https://modheader.com/