Alibaba Cloud ARTC Web SDK のクイックスタート - ApsaraVideo Live

Alibaba Cloud ARTC Web SDK は、Web ベースのリアルタイムコミュニケーションのための開発キットです。開発者は、高品質の音声・映像通話、リアルタイムメッセージング、その他のインタラクティブな機能を Web アプリケーションに迅速に追加できます。このトピックでは、最初の ARTC アプリケーションを構築する方法について説明します。

ステップ 1：アプリケーションの作成

ApsaraVideo Live コンソールにログインします。
左側のナビゲーションウィンドウで、ライブストリーム + > リアルタイムオーディオビデオ > アプリケーション をクリックします。
アプリケーションの作成 をクリックします。
カスタムの インスタンス名 を入力し、[利用規約] チェックボックスをオンにして、[今すぐ購入] をクリックします。
成功メッセージが表示されたら、アプリケーション管理 ページを更新して、新しい ApsaraVideo Real-time Communication アプリケーションを表示します。
説明
アプリケーションの作成は無料です。実際の使用量に基づいて従量課金で課金されます。詳細については、「ApsaraVideo Real-time Communication の課金」をご参照ください。

ステップ 2：App ID と AppKey の取得

アプリケーションを作成した後、アプリケーションリストで対象のアプリケーションを見つけます。操作列で管理をクリックして、基本情報 ページに移動します。このページで、アプリケーション ID と AppKey を確認できます。

ステップ 3：SDK の統合

SDK を統合します。
script タグを使用した統合
HTML ページで、SDK スクリプトをインポートします。
```
<script src="https://g.alicdn.com/apsara-media-box/imp-web-rtc/7.1.9/aliyun-rtc-sdk.js"></script>
```
npm を使用した統合
プロジェクトで、npm を使用して SDK をインストールします。
```
npm install aliyun-rtc-sdk --save
```

エンジンを初期化します。

// 以下の 2 つのインポート方法のいずれかを選択します。
// npm パッケージを使用している場合は、このインポート文を使用します。
import AliRtcEngine from 'aliyun-rtc-sdk';
// script タグを使用している場合は、このインポート文を使用します。
const AliRtcEngine = window.AliRtcEngine;

// 環境を確認します。
const checkResult = await AliRtcEngine.isSupported();
if (!checkResult.support) {
  // 現在の環境はサポートされていません。ユーザーにブラウザの切り替えまたはアップグレードを促します。
}

// エンジンインスタンスを作成します。グローバル変数として保存できます。
const aliRtcEngine = AliRtcEngine.getInstance();

AliRtcEngine インスタンスを作成した後、関連するイベントをリッスンして処理します。

// 現在のユーザーがチャンネルから退出します。
aliRtcEngine.on('bye', (code) => {
  // code パラメーターは理由を示します。詳細については、API リファレンスをご参照ください。
  console.log(`bye, code=${code}`);
  // ここに、通話ページを終了するなどのビジネスロジックを追加します。
});

// リモートユーザーのオンラインをリッスンします。
aliRtcEngine.on('remoteUserOnLineNotify', (userId, elapsed) => {
  console.log(`User ${userId} joined the channel in ${elapsed} seconds`);
  // ここに、このユーザーのモジュールを表示するなどのビジネスロジックを追加します。
});

// リモートユーザーのオフラインをリッスンします。
aliRtcEngine.on('remoteUserOffLineNotify', (userId, reason) => {
  // reason パラメーターは理由を示します。詳細については、API リファレンスをご参照ください。
  console.log(`User ${userId} left the channel. Reason code: ${reason}`);
  // ここに、このユーザーのモジュールを破棄するなどのビジネスロジックを追加します。
});

// リモートストリームのサブスクリプションの変更をリッスンします。
aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
  // oldState および newState パラメーターは AliRtcSubscribeState 型です。有効値：0 (Init)、1 (Unsubscribed)、2 (Subscribing)、3 (Subscribed)。
  // interval パラメーターは、2 つの状態間の時間間隔 (ミリ秒) を示します。
  console.log(`The subscription state of remote user ${userId} in channel ${channelId} changed from ${oldState} to ${newState}`);
  // ここにリモートストリームを監視するロジックを追加します。
  // newState が 3 になったら、setRemoteViewConfig を呼び出してリモートストリームを再生できます。
  // newState が 1 になったら、再生を停止できます。
});

// 認証情報の有効期限切れをリッスンします。
aliRtcEngine.on('authInfoExpired', () => {
  // このコールバックは、認証情報の有効期限が切れたときにトリガーされます。
  // 新しいトークンとその他のデータを取得し、refreshAuthInfo 操作を呼び出して認証データを更新する必要があります。
  aliRtcEngine.refreshAuthInfo({
    userId,
    token,
    timestamp
  });
});

// ユーザー認証情報がまもなく期限切れになるときをリッスンします。
aliRtcEngine.on('authInfoWillExpire', () => {
  // このコールバックは、認証情報の有効期限が切れる 30 秒前にトリガーされます。このコールバックを受け取ったら、速やかに認証情報を更新してください。
  // セッションを維持したい場合は、新しいトークンとその他のデータを取得し、joinChannel を呼び出してチャンネルに再参加します。
});

(オプション) チャンネルモードを設定します。デフォルトモードは通話モードです。詳細については、「チャンネルモードとユーザーロールの設定」をご参照ください。

// チャンネルモードを設定します。有効な文字列値：communication (通話モード) および interactive_live (インタラクティブモード)。
aliRtcEngine.setChannelProfile('interactive_live');
// ユーザーロールを設定します。この設定はインタラクティブモードでのみ有効です。
// 有効な文字列値：interactive (インタラクティブロール、アップストリーミングとストリームフェッチングが可能) および live (視聴者ロール、ストリームフェッチングのみ可能)。
aliRtcEngine.setClientRole('interactive');

チャンネルに参加します。トークンの計算方法については、「トークンベースの認証」をご参照ください。必要に応じて、単一のパラメーターまたは複数のパラメーターでチャンネルに参加することを選択できます。

単一のパラメーターで参加

const userName = 'TestUser1'; // これを自分のユーザー名に変更できます。日本語の文字もサポートされています。

try {
  // サーバーから Base64Token を取得するために fetchToken を実装する必要があります。
  const base64Token = await fetchToken();
  await aliRtcEngine.joinChannel(base64Token, userName);
  // チャンネルへの参加に成功しました。他の操作を実行できます。
} catch (error) {
  // チャンネルへの参加に失敗しました。
}

複数のパラメーターで参加

// 詳細については、「トークンベースの認証」トピックをご参照ください。サーバーまたはローカルで認証情報を生成します。
// 注：データセキュリティのため、appKey を含むトークン計算ロジックをいかなる状況でもユーザーにリリースしないでください。
const appId = 'yourAppId'; // コンソールから取得します。
const appKey = 'yourAppKey'; // コンソールから取得します。注：本番環境では AppKey を公開しないでください。
const channelId = 'AliRtcDemo'; // これを自分のチャネル ID に変更できます。英数字のみがサポートされています。
const userId = 'test1'; // これを自分のユーザー ID に変更できます。英数字のみがサポートされています。
const userName = 'TestUser1'; // これを自分のユーザー名に変更できます。日本語の文字もサポートされています。
const timestamp = Math.floor(Date.now() / 1000) + 3600; // 1 時間後に期限切れになります。

try {
  const token = await generateToken(appId, appKey, channelId, userId, timestamp);
  // チャンネルに参加します。token や nonce などのパラメーターは通常、サーバーから返されます。
  // 注：この操作を呼び出すときは、channelId、userId、appId、および timestamp パラメーターがトークンの生成に使用されたものと同じであることを確認してください。
  await aliRtcEngine.joinChannel({
    channelId,
    userId,
    appId,
    token,
    timestamp,
  }, userName);
  // チャンネルへの参加に成功しました。他の操作を実行できます。
} catch (error) {
  // チャンネルへの参加に失敗しました。
}

ストリームをプレビューしてプッシュします。デフォルトでは、チャンネルに参加すると、ローカルの音声・映像データが自動的にキャプチャされ、Alibaba Cloud Global Real-time Transport Network (GRTN) にプッシュされます。次のようにローカルビデオフィードをプレビューできます。
1. HTML コードで、id を localPreviewer に設定した VIDEO 要素を追加します。
```
<video
  id="localPreviewer"
  muted
  style="display: block;width: 320px;height: 180px;background-color: black;"
></video>
```
2. setLocalViewConfig メソッドを呼び出し、要素 ID を渡してプレビューを開始します。
```
// 最初のパラメーターは HTMLVideoElement またはその要素 ID です。プレビューを停止するには null を渡します。
// 2 番目のパラメーターは 1 (カメラストリームのプレビュー) または 2 (画面共有ストリームのプレビュー) です。
aliRtcEngine.setLocalViewConfig('localPreviewer', 1);
```

リモートの音声・映像ストリームをサブスクライブします。デフォルトでは、チャンネルに参加すると、他のストリーマーの音声・映像ストリームに自動的にサブスクライブされます。音声ストリームは自動的に再生されます。カメラまたは画面ストリームを視聴するには、setRemoteViewConfig 操作を呼び出して有効にする必要があります。

HTML コードで、id を remoteVideoContainer に設定した DIV 要素をコンテナーとして追加します。
```
<div id="remoteVideoContainer"></div>
```

リモートビデオストリームのサブスクリプション変更に関するイベントを受け取ったら、setRemoteViewConfig 操作を呼び出して、サブスクライブされている場合はストリームを再生します。サブスクライブされていない場合は、削除します。

// Video 要素を格納します。
const remoteVideoElMap = {};
// リモートコンテナー要素。
const remoteVideoContainer = document.querySelector('#remoteVideoContainer');

function removeRemoteVideo(userId) {
  const el = remoteVideoElMap[userId];
  if (el) {
    aliRtcEngine.setRemoteViewConfig(null, userId, 1);
    el.pause();
    remoteVideoContainer.removeChild(el);
    delete remoteVideoElMap[userId];
  }
}

// これは、「イベントをリッスンする」ステップの videoSubscribeStateChanged の例と同じです。
aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
  // oldState および newState パラメーターは AliRtcSubscribeState 型です。有効値：0 (Init)、1 (Unsubscribed)、2 (Subscribing)、3 (Subscribed)。
  // interval パラメーターは、2 つの状態間の時間間隔 (ミリ秒) を示します。
  console.log(`The subscription state of remote user ${userId} in channel ${channelId} changed from ${oldState} to ${newState}`);
  // 例
  if (newState === 3) {
    const video = document.createElement('video');
    video.autoplay = true;
    video.setAttribute('style', 'display: block;width: 320px;height: 180px;background-color: black;');
    remoteVideoElMap[userId] = video;
    remoteVideoContainer.appendChild(video);
    // 最初のパラメーターは HTMLVideoElement です。
    // 2 番目のパラメーターはリモートユーザー ID です。
    // 3 番目のパラメーターは 1 (カメラストリームのプレビュー) または 2 (画面共有ストリームのプレビュー) です。
    aliRtcEngine.setRemoteViewConfig(video, userId, 1);
  } else if (newState === 1) {
    removeRemoteVideo(userId);
  }
});

プロセスを終了します。

// ローカルプレビューを停止します。
await aliRtcEngine.stopPreview();
// チャンネルから退出します。
await aliRtcEngine.leaveChannel();
// インスタンスを破棄します。
aliRtcEngine.destroy();

クイックデモ

重要

クイックデモコードの JavaScript 部分には、トークンを計算するための generateToken メソッドが含まれています。セキュリティ上の理由から、このコードまたは AppKey をクライアントサイドの JavaScript ファイルで公開しないでください。情報漏洩やセキュリティの脆弱性につながる可能性があります。サーバーでトークンを生成し、認証された API 呼び出しを行うことでフロントエンドで取得することを推奨します。

前提条件

クイックデモを実行するには、開発環境で HTTP サービスを起動する必要があります。http-server npm パッケージをインストールしていない場合は、npm install --global http-server コマンドを実行してグローバルにインストールします。

ステップ 1：ディレクトリの作成

demo フォルダを作成し、次のディレクトリ構造で quick.html ファイルと quick.js ファイルを作成します。

- demo
  - quick.html
  - quick.js

ステップ 2：quick.html の編集

次のコードを quick.html にコピーしてファイルを保存します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>aliyun-rtc-sdk クイックスタート</title>
    <link rel="stylesheet" href="https://g.alicdn.com/code/lib/bootstrap/5.3.0/css/bootstrap.min.css" />
    <style>
      .video {
        display: inline-block;
        width: 320px;
        height: 180px;
        margin-right: 8px;
        margin-bottom: 8px;
        background-color: black;
      }
    </style>
  </head>
  <body class="container p-2">
    <h1>aliyun-rtc-sdk クイックスタート</h1>

    <div class="toast-container position-fixed top-0 end-0 p-3">
      <div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          ログインメッセージユーザーオンラインユーザーオフライン

ステップ 3：quick.js の編集

次のコードを quick.js にコピーし、[App ID] と [AppKey] をコード内の指定された変数に貼り付けます。その後、ファイルを保存します。