web-dev-qa-db-ja.com

ウェブサイトをChromecast対応にする方法は？

この 記事 は「Chromecast対応サイト」の利点を説明しています：

  • 高品質：Chromecast対応サイトは、テレビでの視聴に最適な高品質のコンテンツを提供できます。これは多くの場合、フル1080pの高解像度画像を取得することを意味します。一部のコンテンツでは、5.1サラウンドサウンドが得られる場合があります（テレビまたは受信機でサポートされている場合）。タブをキャストする場合、最大720pに制限されます（コンピューターでサポートされている場合）。
  • バッテリー寿命とコンピューターの負荷：Chromecast対応サイトはChromecastデバイスで直接再生され、コンピューターに負荷をかけません。タブをキャストするには多くのコンピューターの能力が必要です。そのため、すべてのコンピューターでタブがサポートされているわけではありません。
  • 独立して再生：Chromecast対応サイトから再生する場合は、コンピューターをシャットダウンするか、ふたを閉じることができます。タブプロジェクションでは、キャスト中ずっとコンピューターをオンにしておく必要があります。

ただし、ウェブサイトでChromecastを有効にする方法方法については説明していません。

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

キャストできるのはビデオだけですか、それとも、たとえば、コンピューターに電力を供給せずにリアルタイムのニュースフィードを提供できますか？

chromecast
8
mpen

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

1。ページにChromecastボタンを追加します

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

GoogleのChromecastJavascriptクライアントは、このボタンに魔法の力を自動的に与えます。 must <button>タグであるようですが、<div>または<span>では機能しません。

2。 Chromecastオンロードハンドラーを定義します

以下のコードは最小限の実装であり、キャスト時に1つの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のChromecastJavascriptクライアントライブラリを含める

ロードすると、この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デバイスに「デフォルトのメディアレシーバー」をレンダリングする方法を示しています。 Chromecastを使用しているデバイスで表示されるエクスペリエンスをさらにカスタマイズしたい場合は、Googleに登録し、5ドルを支払い、さらに多くの作業を行う必要があります。

9
Aaron Cicali