0

カスタム レシーバーにメディア プレーヤー機能を実装したいと考えています。Google 開発者の Web サイトで、送信者とスタイル付きのメディア受信者アプリケーションを実装するための説明を見つけました。

このサンプルを実行しましたが、正常に動作します。Google ドライブでホストされている MP3 ファイルを Chromecast デバイスにキャストできます。

これで、m3u8 ファイルを参照する URL を再生できるカスタム レシーバー (添付ファイルを参照) を実装しました。このために、Google から提案された Media Player Library を使用しています。

<body>
<div>
<p id='text'> </p>
<video id='vid'> </video>
</div>
<script type="text/javascript" src="https://www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/cast/sdk/libs/mediaplayer/1.0.0/media_player.js"></script>



<script type="text/javascript">
// If you set ?Debug=true in the URL, such as a different App ID in the
// developer console, include debugging information.
if (window.location.href.indexOf('Debug=true') != -1) {
    cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG);
    cast.player.api.setLoggerLevel(cast.player.api.LoggerLevel.DEBUG);
}

console.log("mediaElement set");
var mediaElement = document.getElementById('vid');

// Create the media manager. This will handle all media messages by default.
window.mediaManager = new cast.receiver.MediaManager(mediaElement);

// Remember the default value for the Receiver onLoad, so this sample can Play
// non-adaptive media as well.
window.defaultOnLoad = mediaManager.onLoad;

mediaManager.onLoad = function (event) {
    // The Media Player Library requires that you call player unload between
    // different invocations.
    if (window.player !== null) {
        player.unload();    // Must unload before starting again.
        window.player = null;
    }
    // This trivial parser is by no means best practice, it shows how to access
    // event data, and uses the a string search of the suffix, rather than looking
    // at the MIME type which would be better.  In practice, you will know what
    // content you are serving while writing your player.


    if (event.data['media'] && event.data['media']['contentId']) {
    console.log('Starting media application');


    var t = document.getElementById('text');
    t.innerHTML = event.data['media'];
    console.log("EventData: "+event.data);
    console.log("EventData-Media: "+event.data['media']);
    console.log("EventData-ContendID: "+event.data['media']['contentId']);

    var url = event.data['media']['contentId'];
    console.log("URL: "+url);

    // Create the Host - much of your interaction with the library uses the Host and
    // methods you provide to it.
    window.host = new cast.player.api.Host(
        {'mediaElement':mediaElement, 'url':url});
    var ext = url.substring(url.lastIndexOf('.'), url.length);
    var initStart = event.data['media']['currentTime'] || 0;
    var autoplay = event.data['autoplay'] || true;
    var protocol = null;
    mediaElement.autoplay = autoplay;  // Make sure autoplay get's set

    protocol = cast.player.api.CreateHlsStreamingProtocol(host);

    host.onError = function(errorCode) {
      console.log("Fatal Error - "+errorCode);
      if (window.player) {
        window.player.unload();
        window.player = null;
      }
    };
    // If you need cookies, then set withCredentials = true also set any header
    // information you need.  If you don't need them, there can be some unexpected
    // effects by setting this value.
    //      host.updateSegmentRequestInfo = function(requestInfo) {
    //        requestInfo.withCredentials = true;
    //      };
    console.log("we have protocol "+ext);
    if (protocol !== null) {
      console.log("Starting Media Player Library");
      window.player = new cast.player.api.Player(host);
      window.player.load(protocol, initStart);
    }
    else {
      window.defaultOnLoad(event);    // do the default process
    }
  }   
}

window.player = null;
console.log('Application is ready, starting system');
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
castReceiverManager.start();
</script>
</body>

Media Player Library を使用して .m3u8、.ism、および .mpd ファイルをキャストすることだけが可能であることがわかりました。そこで、次のように m3u8 ファイルを作成し、Google ドライブにホストして、カスタム レシーバーにキャストしようとしました。

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=173952
https://www.googledrive.com/host/0B1x31lLRAxTMRndtNkhSWVdGLVE

しかし、うまくいきません。Goolge Cast Developer Console を使用して、カスタム レシーバーをデバッグしました。を実行することで、

window.player.load(protocol, initStart);

コマンドを実行すると、コンソールに FATAL ERROR が表示されます。

問題はカスタム レシーバー コードにあると思います。これは、Google ドキュメントのセンダー アプリケーションがスタイル付きメディア レシーバーで正常に動作するためです。

この問題を知っている人、またはカスタム レシーバー コードに問題がある人はいますか? スタイル付きメディアプレーヤーをデバッグする方法を知っている人はいますか? スタイル付きメディア プレーヤーとどのメッセージが交換されているかを確認できれば、はるかに簡単ですが、デバッグを有効にすると、交換されたメッセージを確認できません。

4

1 に答える 1

0

デバッグをオンにすると、メッセージ交換を確認できます (デバッグ セクションの下のこちらを参照)。私たちの github リポジトリにも本格的な受信機のサンプルプロジェクトがあります。

于 2014-11-13T22:41:27.120 に答える