Chromecast：使用 IS_CONNECTED_CHANGED 检测接收器连接答案

【问题标题】：Chromecast: using IS_CONNECTED_CHANGED to detect receiver connectionChromecast：使用 IS_CONNECTED_CHANGED 检测接收器连接
【发布时间】：2020-03-11 03:07:02
【问题描述】：

我正在尝试将 Chromecast 功能添加到现有应用程序中，使用 Google 的 CastVideos-chrome 示例应用程序作为指南。我的问题是关于发送方如何检测到它连接到接收方。

我期望/希望发生的事情

示例应用包括以下内容，我在我的实现中基本上复制了这些内容（CastVideos.js，第 165-198 行）：

CastPlayer.prototype.initializeCastPlayer = function() {
  // ...
  this.remotePlayerController.addEventListener(
    cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
    function(e) {
      this.switchPlayer(e.value);
    }.bind(this)
  );
};

在 CastVideos-chrome 应用中，setupRemotePlayer() 仅在 switchPlayer() 中调用，switchPlayer() 仅在上述 sn-p 中的 IS_CONNECTED_CHANGED 侦听器中调用。因此，每当我的应用程序连接到接收器时，我应该会看到一个 IS_CONNECTED_CHANGED 事件，以便设置远程播放器。

我的代码

初始化发送者时，我为IS_CONNECTED_CHANGED 事件添加了一个监听器。下面是我的代码（在 kotlin-js 中）和对 javascript 的翻译。

remotePlayerController = js("new cast.framework.RemotePlayerController(new cast.framework.RemotePlayer())")
remotePlayerController.addEventListener(Util.RemotePlayerEventType.IS_CONNECTED_CHANGED) {
    js("function() {" +
         "console.log(\"Remote Player event: IS_CONNECTED_CHANGED\");" +
         "return switchPlayers();" +
    "}")
}

等效的js代码是：

this.remotePlayerController = new cast.framework.RemotePlayerController(new cast.framework.RemotePlayer())
remotePlayerController.addEventListener(cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED) {
    function() {
         console.log(\"Remote Player event: IS_CONNECTED_CHANGED\");
         return switchPlayers();
    }
}

这是我的接收器代码，它与Cast Receiver codelab 的第 7 步完全对应，并且与 codelab 的 sample sender 正确工作：

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Cast CAF Receiver</title>
    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/mediaplayer/1.0.0/media_player.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/shaka-player/2.5.5/shaka-player.compiled.js"></script>
</head>
<body>
    <cast-media-player></cast-media-player>
    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
    <script>
        const context = cast.framework.CastReceiverContext.getInstance();
        const playerManager = context.getPlayerManager(); // the PlayerManager handles playback and provides hooks to plug-in custom logic

        context.start(); // initialize sdk
    </script>  
</body>
</html>

怎么了

根据我添加的控制台日志，我知道正在添加事件侦听器。然后，我单击发件人页面上的投射按钮，我的接收器应用程序就会出现在我的电视上。此时，在发送者控制台中输入cast.framework.CastContext.getInstance().getCastState() 会返回"CONNECTED"，并且当前会话（cast.framework.CastContext.getInstance().getCurrentSession()）不为空。但是，IS_CONNECTED_CHANGED 事件监听器永远不会被触发。发送者和接收者（Chrome Remote Debugger 控制台）都不会打印错误或有关此的日志。

我已尝试监听 ANY_CHANGE 和 IS_CONNECTED_CHANGED，但没有一个监听器被调用。

我的问题

触发远程播放器设置的合适方法是什么？我收听IS_CONNECTED_CHANGED 事件的方式有问题吗？或者我应该完全听别的东西吗？

【问题讨论】：

标签： chromecast

【解决方案1】：

实际上，我的问题是发送方从未连接到接收方！它从未检测到连接，因为从来没有。据我所知，侦听IS_CONNECTED_CHANGED 是检测连接（如果发生）的一种非常合适的方法。

我怎么知道的：发件人确实使我的电视加载了接收器应用程序，但后来在发件人身上，cast.framework.CastContext.getInstance().getCurrentSession() 为空（其中“会话”指的是与接收器的连接），更明显的是，@ 987654323@ 返回"NOT_CONNECTED"。据我所知，要么从未连接过投射状态，要么连接状态持续不到一秒，即使接收器继续运行。

【讨论】：

【解决方案2】：

带有使用 Chromecast 框架 API 的 Cast 按钮的 HTML 页面示例。将 html 代码上传到 webserver 并作为网页查看，因为 CAST API 无法从本地文件 HTML 正确加载。

example code screenshot

【讨论】：

嗨莫查马德！欢迎来到 StackOverflow！这段代码看起来不错，但您的答案需要更多解释。代码的作用是什么，它是如何解决问题的？另外，如果您从某个地方（例如 Google 示例项目）复制代码，请说明在哪里！