ウェブサイトをChromecastに対応させるにはどうすればよいですか？

Question

このarticleは「Chromecastの対応のサイト」のメリットを説明しています

• 高品質： Chromecastの対応サイトは、テレビでの表示に最適です高品質 コンテンツを提供することができます。これは多くの場合、あなたが フル1080p高品位画像を取得することを意味します。一部のコンテンツでは、 も5.1サラウンドサウンドを取得できます（テレビまたはレシーバーでサポートされている場合）。 タブをキャストするとき、最大720pに制限されます（コンピュータで がサポートされている場合）。
• バッテリの寿命とコンピュータの負荷： Chromecast対応サイトはChromecastデバイスで直接再生され、 はコンピュータに負荷がかかりません。タブをキャストするには多くのコンピュータが必要です（すべてのパソコンでサポートされているわけではありません）。
• 独立して再生： Chromecast対応サイトから再生する場合は、 を使用してコンピュータをシャットダウンするか、フタを閉じることができます。タブ の投影では、キャストを通してコンピュータをオンにする必要があります。

しかし、それはがウェブサイト上でChromecastingを有効にする方法を説明していません。

ウェブサイトでChromecastingを有効にするにはどうすればよいですか？

コンピュータを電源に接続することなく、リアルタイムのニュースフィードなど、私がキャストできるビデオか、サービスすることができますか？

Answer 1

以下は私のために働いたものです。

1. GoogleのChromecastのJavascriptのクライアントが自動的にそれは魔法の力だ、このボタンを与える

ページに

<button is='google-cast-button'></button> 

をChromecastのボタンを追加します。 はである必要があります。<ボタン>タグ<div>または<スパン>はありません。

2.以下のコードのChromecast onloadハンドラに

を定義するには、それだけで、鋳造時に、単一のmp3を果たし、最小限の実装です。完全な文書はhttps://developers.google.com/cast/docsにあります。

window.__onGCastApiAvailable = function(isAvailable){ 
    if(! isAvailable){ 
     return false; 
    } 

    var castContext = cast.framework.CastContext.getInstance(); 

    castContext.setOptions({ 
     autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED, 
     receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID 
    }); 

    var stateChanged = cast.framework.CastContextEventType.CAST_STATE_CHANGED; 
    castContext.addEventListener(stateChanged, function(event){ 
     var castSession = castContext.getCurrentSession(); 
     var media = new chrome.cast.media.MediaInfo('https://www.example.com/my-song.mp3', 'audio/mp3'); 
     var request = new chrome.cast.media.LoadRequest(media); 

     castSession && castSession 
      .loadMedia(request) 
      .then(function(){ 
       console.log('Success'); 
      }) 
      .catch(function(error){ 
       console.log('Error: ' + error); 
      }); 
    }); 
}; 

3. GoogleのChromecastのJavaScriptクライアントライブラリのロード時に

を含め、このJavascriptのクライアントは、ステップ＃2で定義されたハンドラを呼び出します。

<script src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'></script> 

注：chrome.castとcast.framework APIは、このクライアントライブラリから来ていませんが、Google Chromeの自体から...フレームワークには、Google Chromeブラウザに組み込まれています。

注：この例では、「デフォルトのメディアレシーバ」をChromecastデバイスにレンダリングする方法を示します。 Chromecastingする端末に表示される体験をさらにカスタマイズするには、Googleに登録して5ドルを支払う必要があります。