如何解决Chrome 投射自定义接收器“投射失败请重试” index.html
我正在尝试构建一个 chrome cast 自定义接收器，按照 https://codelabs.developers.google.com/codelabs/cast-receiver#0 上的教程我无法让它工作，也不知道如何开始找出问题所在。我已经注册了我的投射应用程序，并且正在尝试使用 https://casttool.appspot.com/cactool/ 来测试接收器。该测试适用于 cactools "CC1AD845" 的示例 ID，它投射得很好。我还注册了我的设备进行测试，并重新启动了我认为有效的设备，因为在我这样做之前，cactools 不会显示我的自定义应用程序 ID 的 chromecast 按钮，但现在它确实显示了。问题是当我点击它时，chrome 只显示消息：
“投射失败，请重试”
我的接收器与 http-server 和 ngrok 一起运行，就像代码实验室所指示的那样。我将 ngrok 服务器的正确路径复制到 Cast 开发者控制台上的应用 URL。
当我从浏览器运行 ngrok url 时，devtools 控制台显示以下错误：
Uncaught TypeError: Cannot read property 'is_device_registered' of null
at new V (caf_receiver_logger.js:18)
at Function.V.getInstance (caf_receiver_logger.js:28)
at receiver.js:13
但我相信这是因为我从浏览器打开时没有设备，而在 Chromecast 上运行时不应该发生这种情况。
我复制了 codelab 提供的整个文件夹，这应该是自定义接收器的工作示例。但即使使用他们的确切代码，它也不起作用。代码是：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8">
<title>Cast CAF Receiver</title>
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<!-- Cast Debug Logger -->
<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<footer>
<script src="js/receiver.js"></script>
</footer>
</body>
</html>
receiver.js
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
//Media Sample API Values
const SAMPLE_URL = "https://storage.googleapis.com/cpe-sample-media/content.json";
const StreamType = {
DASH: 'application/dash+xml',HLS: 'application/x-mpegurl'
}
const TEST_STREAM_TYPE = StreamType.DASH
// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
castDebugLogger.setEnabled(true);
// Show debug overlay
// castDebugLogger.showDebugLogs(true);
// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}
// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
LOG_TAG: cast.framework.LoggerLevel.DEBUG,};
function makeRequest (method,url) {
return new Promise(function (resolve,reject) {
let xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(JSON.parse(xhr.response));
} else {
reject({
status: this.status,statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,statusText: xhr.statusText
});
};
xhr.send();
});
}
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD,request => {
castDebugLogger.info(LOG_TAG,'Intercepting LOAD request');
// Map contentId to entity
if (request.media && request.media.entity) {
request.media.contentId = request.media.entity;
}
return new Promise((resolve,reject) => {
// Fetch repository Metadata
makeRequest('GET',SAMPLE_URL)
.then(function (data) {
// Obtain resources by contentId from downloaded repository Metadata.
let item = data[request.media.contentId];
if(!item) {
// Content Could not be found in repository
castDebugLogger.error(LOG_TAG,'Content not found');
reject();
} else {
// Adjusting request to make requested content playable
request.media.contentType = TEST_STREAM_TYPE;
// Configure player to parse DASH content
if(TEST_STREAM_TYPE == StreamType.DASH) {
request.media.contentUrl = item.stream.dash;
}
// Configure player to parse HLS content
else if(TEST_STREAM_TYPE == StreamType.HLS) {
request.media.contentUrl = item.stream.hls
request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
}
castDebugLogger.warn(LOG_TAG,'Playable URL:',request.media.contentUrl);
// Add Metadata
let Metadata = new cast.framework.messages.GenericmediaMetadata();
Metadata.title = item.title;
Metadata.subtitle = item.author;
request.media.Metadata = Metadata;
// Resolve request
resolve(request);
}
});
});
});
// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
let browseItems = getbrowseItems();
function getbrowseItems() {
let browseItems = [];
makeRequest('GET',SAMPLE_URL)
.then(function (data) {
for (let key in data) {
let item = new cast.framework.ui.browseItem();
item.entity = key;
item.title = data[key].title;
item.subtitle = data[key].description;
item.image = new cast.framework.messages.Image(data[key].poster);
item.imageType = cast.framework.ui.browseImageType.MOVIE;
browseItems.push(item);
}
});
return browseItems;
}
let browseContent = new cast.framework.ui.browseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio =
cast.framework.ui.browseImageAspectRatio.LANDSCAPE_16_TO_9;
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,(e) => {
if (!e.value) return;
// Media browse
touchControls.setbrowseContent(browseContent);
// Clear default buttons and re-assign
touchControls.clearDefaultSlotAssignments();
touchControls.assignButton(
cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
);
});
context.start();
提前致谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
