diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/mediastore/enhancements/live-reactions.md b/i18n/ja/docusaurus-plugin-content-docs/current/mediastore/enhancements/live-reactions.md index c0efff055e..803dff84bf 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/mediastore/enhancements/live-reactions.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/mediastore/enhancements/live-reactions.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 2 sidebar_label: Live reactions title: Live reactions description: Learn how to overlay live reactions on your content with Momento MediaStore @@ -17,3 +17,290 @@ keywords: - overlay - reactions --- + +# ビデオストリームにリアルタイムの絵文字リアクションを追加する + +視聴者の体験において、インタラクティブ性は重要な役割を果たしています。リアクションを送ったり、他の視聴者と感情を共有したりすることで、メディアストリーミングだけでは得られないコミュニティ感やエンゲージメントが生まれます。このチュートリアルでは、動画プレーヤにリアルタイムの絵文字オーバーレイを設定します。Momento Topics** を使用すると、ユーザーとのインタラクションに応じて絵文字のリアクションが即座に表示されるため、生き生きとした魅力的な視聴体験が可能になります。 + +:::info +完全な[GitHubの例](https://github.com/momentohq/demo-video-streaming)に飛ぶこともできますし、以下のチュートリアルに沿って簡単な実装を自分で作ることもできます。 +::: + +## How it works + +```mermaid +sequenceDiagram + participant Browser + participant Server + participant Momento + Browser->>+Server: Request auth token + Server->>+Momento: Create auth token + Momento-->>-Server: Return auth token + Server-->>-Browser: Send auth token + Browser->>+Momento: Publish reaction to Topics + Momento-->>-Browser: Broadcast reaction to all viewers +``` + +まず、ブラウザは*token vending machine*と呼ばれるサーバーコンポーネントに認証トークンを要求します。このサーバーコンポーネントは、短命でスコープが限定された[session tokens](/cache/develop/authentication/tokens)の作成と配布を担当します。このトークンは短期間有効で、リアクションの送受信に必要なリソースへのアクセスのみを許可します。 + + +トークンを受け取ったプレイヤーは、どの絵文字が押されたかを示すメッセージを[Momento Topics](/topics)に公開します。Topicsは、リアクションを購読しているすべてのビデオプレーヤーに絵文字をブロードキャストします。 + +Momento Topicsによって呼び出されたブラウザのイベントハンドラは、画面上に絵文字をレンダリングし、すべてのユーザーにリアルタイムのリアクションを提供します。 + +## 前提条件 + +* [Momento API key](/cache/develop/authentication/api-keys) + +## Step 1: トークン発行機の作成 + +動画プレーヤが絵文字を公開および受信するには、Momento トピックへのアクセスが必要です。アクセスを許可するには、セッション トークンを生成して呼び出し元に返す必要があります。これを行うには、`POST /tokens` エンドポイントを持つ単純な [Express サーバ](https://expressjs.com/) を作成します。 + +```javascript +import express from 'express'; +import { AuthClient, ExpiresIn } from '@gomomento/sdk' + +const authClient = new AuthClient(); +const app = express(); +app.use(express.json()); + +app.post('/tokens', (req, res) => { + const { playerId, streamId} = req.body; + const scope = { + permissions: [{ + role: 'publishsubscribe', + cache: 'video', + topic: streamId + }] + }, + + const tokenResponse = await authClient.generateDisposableToken(scope, ExpiresIn.minutes(30), { tokenId: playerId }); + res.status(201).json({ token: tokenResponse.authToken }); +}); +``` + +ここで作成したエンドポイントは、`playerId` と `streamId` プロパティを含むリクエストボディを受け付けます。streamId` は、視聴する動画ストリームの一意な識別子です。これは、リアクションのスコープをリクエストされた動画*に限定するために使用されます。`playerId` は呼び出し元の識別子です。Momento のベストプラクティスでは、*常にセッション トークンに発信者の識別子を含めるように*言われています。私たちは `playerId` を直接埋め込んだトークンを作成しており、このトークンはユーザーが公開するすべてのメッセージに適用されます。 + +:::tip +Momento AuthClient を正しく初期化するには、Momento API キーを環境変数 `MOMENTO_API_KEY` に設定するか、コンストラクタの `credentialProvider` プロパティに直接渡す必要があります。 +::: + +トークンで付与されたパーミッションは、呼び出し元が視聴しているビデオストリーム専用のトピックへの*publish*と*subscribe*の両方を許可する。このトピックは `video` という名前の [cache](/cache) に存在します。 + +成功すると、このエンドポイントは `201 Created` ステータスコードと生成されたトークンを返します。 + +## Step 2: ビデオプレーヤーと絵文字オーバーレイの作成 + +視聴者によって互いに送信される絵文字は、実際には埋め込みビデオプレーヤー自体の一部ではありません。実際には、絵文字は動画プレーヤーを囲む `div` 内にオーバーレイされています。絵文字は *絶対* 位置決めで配置され、CSS のキーフレームでアニメーション化されます。 + +```html + + +
+ +