Group ActivitiesによるSafariでのメディア再生連携

Group ActivitiesによるSafariでのメディア再生連携

Web上やコンパニオンAppで楽しめるSharePlay体験を構築しましょう。Group ActicitiesフレームワークとコンパニオンWebサイトを組み合わせてSharePlayをSafariに導入する方法を紹介します。SharePlayによって、まだApp StoreからAppをダウンロードしていない人であっても、お互いにつながってグループインタラクションを楽しむことが可能になります。

リソース
関連ビデオ

WWDC21
ダウンロード

♪ (Safariでのメディア再生と Group Activitiesの調整) Jerですこんにちは AppleのWebKitと Safariでメディア再生に取り組んでいます人々はお気に入りの番組や映画を見たり音楽を一緒に聴くことが大好きです同じ部屋にいる人も隣にいる人も地球の反対側にいる人も GroupActivitiesを使えばこれまで以上に簡単にユーザーがどこにいても SharePlay体験ができますこのセッションでは 4つのトピックについて説明します Safariでの調整再生の概要 SafariでSharePlayを使う為のiOSアプリを準備方法アプリのウェブページにMedia Session APIを採用する方法また複数のデバイス間で再生を調整するための新しいウェブAPIも追加していますそれでは SharePlayと Safariについて少し話してみましょう前のセッションでは GroupActivitiesを使ってiPhoneやiPad アプリケーションで素晴らしい SharePlay体験を作り出す方法を学びました macOS Montereyでも同じ体験ができます iPhoneやiPadの素晴らしいアプリと一緒に Catalystを使用する Macに変更しますまたアプリにコンパニオン Webサイトがある場合は Mac Safari 15 ユーザーがApp Storeからアプリケーションをダウンロードしなくても同じ素晴らしい SharePlay体験をそれらのユーザーに提供できますこれがこのセッションで行う方法です私は映画の予告編を見られる iPhoneアプリケーションを開発していますアプリには既に GroupActivitiesのサポートが追加されており友達がFaceTimeで一緒に映画の予告編を見ることができますしかし私の映画予告編アプリにはウェブサイトもありますそしてそのWebページに GroupActivitiesのサポートを追加したらどうなるかを示します友人のSamと FaceTime通話をしています Samは映画の予告編を見るのが大好きなのでこの新しい Movie Trailers アプリのテストを手伝ってくれるよう頼んだ通話中にアプリで新しい予告編を再生すると私はその予告編を通知で見るように招待されます Safariでセッションに参加するオプションが表示されますこの通知をクリックすると Safariが起動して共有コンテンツのURLが表示され Samが予告編の再生を開始すると同時にここSafariでも再生されます私はここSafariでビデオを一時停止したり再生したり探したりすることができセッションに参加している他のすべての人は同じコマンドが同時にローカル動画に反映されているのを見られますすごくいいことになりますよ! では映画の予告編サイトに GroupActivitiesのサポートを追加するには何が必要なのでしょうか? Safariの中身を見る前に Safari 15で利用可能になった新しいWeb APIで GroupActivitiesを使ってアプリケーションを Safariで動作させる方法を説明しましょう Safariで GroupActivities セッションに参加するには iPhoneまたはiPadアプリを持っているユーザーが自分の Webを指すfallbackURLを持つ GroupSessionActivityを作成する必要があります fallbackURLは Webサイトだけでなく再生する特定のコンテンツも識別する必要があります Watch Togetherの招待状が iPhoneユーザーから Macユーザーに発行されると Safariが起動され GroupSessionActivityに指定したURLを読み込むように求められます fallbackURLが Safariにロードされるとサイトはいくつか単純だが重要なWeb APIを実装する必要があります 1つはメディアセッションです Media Sessionは標準のWeb APIでサイトがブラウザー Safariにページ内のメディア再生の現在の状態について詳細を通知できるようにしますサイトは現在の再生状態コンテンツの再生時間をブラウザに通知できます現在の再生項目のアートワークを提供できますまた現在のコンテンツがスキップ可能な広告であることをブラウザに通知することもできますブラウザがこのメタデータをすべて使用できるようになるとそのメタデータをオペレーティングシステムの他の部分に提供しブラウザウィンドウの外部にあるユーザーに表示することができますオペレーティングシステムはデータが「再生中」と呼ばれるものの中にあると表示再生中のメディアを素早く見てコントロールするには今すぐ再生するのに最適な方法です iOSではユーザーはコントロールセンターとロック画面から再生中のゲームにアクセスできます macOS Monterey ではメニューバーから直接プレイビューにアクセスできますまた Safariは Media Sessionを通じて提供される情報を使用してコンテンツのタイトル再生時間再生状態アートワークなどを再生中に取り込みます再生中に簡単な再生コントロールのセットを表示することで再生中の曲の再生をコントロールすることもできますユーザーが再生中に操作したときに実行する特定のアクションについてサイトをメディアセッションに登録できますこれによりユーザーが再生中に再生ボタンをタップしたときに Safariがサイト独自のアクションの実行を開始できますメディアセッションではブラウザに公開するメタデータや再生コマンドの実装方法をサイトで完全に制御できます再生を開始する前に何らかの設定やプリフライトを行う必要がありますか? 問題ありません mediaSessionの再生アクション実行を使用すると次の操作を実行できますサイトが以前にメディアセッションを採用していた場合はすでに半分完了していますしかし映画の予告編サイトはまだ Media Sessionを採用していないのでここでそのサポートを追加しようこのサイトでは再生一時停止および seektoのアクションを追加しますそのためにはnavigatorの mediaSession プロパティを使用します最初に再生用のアクション実行を追加します mediaSession. setActionHandler ()を呼び出しストリングplayと video要素に対して play () を呼び出すだけのインライン関数を渡します次に pauseとseektoについても同じ操作を行います再生状態をブラウザに正確に表示するためにビデオ要素にイベントリスナーを追加しその状態が変化したときに mediaSessionを更新しますまず updateMediaSessionState () という関数を追加します再生中か一時停止中かを調べるために動画エレメントを照会します次にビデオ要素の再生状態に応じて mediaSessionの playbackState プロパティを文字列の再生または一時停止に設定します次にビデオエレメントの継続時間再生レートおよび現在の時間を照会します次にこれらの値を使用して mediaSessionの setPositionState () 関数を呼び出しdictionary パラメータに値を入力します次にこれらの値が変更されたことを検出するイベントリスナーを追加し updateMediaSessionState ()を呼び出してこれらの新しい値で mediaSessionを更新します再生一時停止継続時間の変更レートの変更および時間の変更を行うイベントリスナーが必要です最後に映画の予告編のWebにはタイトル文字列とタイトルアートワークのURLの両方があるため Media Sessionの metadataプロパティをこれらの値を含む新しいMediaMetadata オブジェクトに設定できます試してみよう! Safariでページをリロードして再生を開始しシステムメニューの再生中アイコンをクリックします再生中パネルにタイトルとアートワークが表示されます一時停止ボタンをタップすると一時停止アクション実行機能が呼び出され再生が一時停止します Media Sessionは再生の開始または停止をブラウザがページに指示するメカニズムを提供することによって Webページでの Watch Together 体験の構成要素を提供しますこれで Webページにカウティング体験を作成する第2のパートに進む準備ができましたセッション内のすべてのデバイス間で再生を調整しますそのためにメディアセッションに「Coordinator」という新しいプロパティを追加して拡張しましたページは Media Session's Coordinatorを使用してセッション内の他のすべてのユーザーに再生の開始または一時停止メディアのタイムライン内の特定のポイントへのシークまたは再生リスト内の次のアイテムへの移動の意図を通知します Coordinatorはセッション内の他のすべての機器とこれらのインテントを通信し他のすべてのデバイスの再生状態の変更を受信しコンフリクトを解決し全員が再生を開始する準備ができるのを待ちます全員の準備ができたら Coordinatorは先に追加したメディアセッションのアクション実行を使用してセッション内の他のすべてのユーザーとともに再生を開始しますまた別のユーザーが何らかの理由で再生を一時停止した場合 Coordinatorはメディアセッションの一時停止アクション実行機能を呼び出しますとはいえ幾つかの注意点を指摘しておきたい Coordinator UIは実験的なWeb APIです標準化はまだ行われておらずそのプロセスによってこのAPIは改善される可能性が高いですが APIの一部の側面は変更される可能性があります詳細については W3CのMedia Session GitHubページをご参照下さいこのAPIは現在Safariでのみ実装していますが SafariがCoordinatorを実装するために使用する GroupActivities フレームワークは他のMac ブラウザでも採用する可能性がありまた採用されることを期待しています最後にユーザーはSafariの既存のセッションに参加できますが GroupSessionは iPhone iPad macOSアプリケーションから開始しなければなりませんここでCoordinator のサポートを追加します最初にしたいことは利用可能になったらセッションに参加することですそこで coordinatorchange というイベント用のリスナーを mediaSessionに追加します実行機能でmediaSessionに null以外のcoordinator プロパティがある場合そのjoin () 関数を呼び出しますまたコントロールにアイコンを追加してセッションで再生していることを示します実行機能では mediaSessionに coordinator プロパティーがあるかどうかに基づいてアイコンを表示または非表示にしますまた clickイベントリスナーをアイコンに接続してコーディネータの leave () を呼び出します次にカスタムコントロールのイベントハンドラを変更してコーディネータが存在するかどうかを確認します coordinatorが存在する場合は代わりに適切な coordinator関数を呼び出します再生ボタン一時停止ボタンおよびタイムラインスライダ用に 1つ追加します実際の動作を見てみましょう友人のSamからここに招待状をもらったのでそれを受け取るつもりです SamがiPhoneで見ているのと同じコンテンツに私のページがロードされます再生ボタンをクリックすると SamのiPhoneと私のウェブページが同時に再生されますそこに行く方法はアドベンチャーです怖いですそうでなければアドベンチャーにはなりません（音楽）素晴らしかったです予告編が終わったので SamはiPhoneを使って最初に戻ります
iPhone iPad Apple TV またはMacで実行しているSafariなどのアプリケーションでお気に入りのコンテンツを一緒に視聴できることがユーザーはきっと好きになると思いますユーザーがどこにいてもその体験をすべてのユーザーに提供できるようになることを願っています GroupActivities APIの詳細については「Coordinate media playback with Group Activities」および「Design for Group Activities」のセッションを参照してください Safari 15で利用可能になる他の新しいウェブ APIに興味がある人はセッション「Develop advanced web content」をチェックしてほしいですお集まり頂きありがとうございます WWDC 21の続きを楽しんでください ♪

struct WatchTogether: GroupActivity {

    var contentIdentifier: String

    func metadata() async -> GroupActivityMetadata {
        var metadata = ActivityMetadata()
        metadata.fallbackURL = URL(string: "https://example.com/title/\(contentIdentifier)")
        return metadata
    }
}

5:29 - Adopting Media Session

if (navigator.mediaSession) {
    navigator.mediaSession.setActionHandler('play', () => video.play() );
    navigator.mediaSession.setActionHandler('pause', () => video.pause() );
    navigator.mediaSession.setActionHandler('seekto', details => {
        video.currentTime = details.seekTime;
    });
}

let updateMediaSessionState = function() {
    if (!navigator.mediaSession)
        return;
    let playbackState = video.paused ? 'paused' : 'playing';
    navigator.mediaSession.playbackState = playbackState;

    let positionState = { video.duration, video.playbackRate, video.currentTime };
    navigator.mediaSession.setPositionState(positionState);
};

for (var event of ['playing', 'pause', 'durationchange', 'ratechange', 'timechange'])
    video.addEventListener(event, updateMediaSessionState);

navigator.mediaSession.metadata = new MediaMetadata({
    title: myPlayer.titleString,
    artwork: [{ src: myPlayer.artworkURL }]
});

9:32 - Adopting Coordinator

navigator.mediaSession.addEventListener('coordinatorchange', coordinator => {
    if (coordinator)
        coordinator.join();
    controls.inSessionIcon.style.hidden = !coordinator;
});

controls.inSessionIcon.addEventListener('click', event => {
    let coordinator = navigator.mediaSession.coordinator;
    if (coordinator && coordinator.state == 'joined')
        navigator.mediaSession.coordinator.leave();
});

controls.playButton.addEventHandler('click', event => {
    if (navigator.mediaSession.coordinator)
        navigator.mediaSession.coordinator.play();
    else
        video.play();
});
controls.pauseButton.addEventHandler('click', event => {
    if (navigator.mediaSession.coordinator)
        navigator.mediaSession.coordinator.pause();
    else
        video.pause();
});
controls.timeline.addEventHandler('onchange', event => {
    if (navigator.mediaSession.coordinator)
        navigator.mediaSession.coordinator.seekTo(event.target.value);
    else
        video.currentTime = event.target.value;
});

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC21