すべてのプロダクト
Search

このプロダクト

    ApsaraVideo Live:ARTC Web SDK のはじめに

    ドキュメントセンター

    ApsaraVideo Live:ARTC Web SDK のはじめに

    最終更新日:Jun 22, 2026

    ApsaraVideo Real-time Communication (ARTC) Web SDK は、Alibaba Cloud が提供する Web ベースのリアルタイムコミュニケーションアプリケーションを開発するためのツールキットです。この SDK を使用すると、音声/ビデオ通話やリアルタイムメッセージングなどの高品質な機能を Web アプリケーションに迅速に統合できます。このガイドでは、初めての ARTC アプリケーションを迅速に構築する方法を説明します。

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

    1. ApsaraVideo Live コンソールにログインします。

    2. 左側のナビゲーションペインで、ライブストリーム + > リアルタイムオーディオビデオ > アプリケーション を選択します。

    3. アプリケーションの作成 をクリックします。

    4. 任意の [インスタンス名] を入力し、[利用規約] チェックボックスにチェックを入れてから、[今すぐ購入] をクリックします。

    5. 成功メッセージが表示されたら、[Applications] ページを更新して、新しい ApsaraVideo Real-time Communication アプリケーションを表示します。

      説明

      アプリケーションの作成は無料です。実際の使用量に基づいて従量課金制で請求されます。詳細については、「音声/ビデオ通話の課金」をご参照ください。

    ステップ 2：アプリケーション ID と AppKey の取得

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

    ステップ 3：SDK の統合

    1. 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

      プロジェクトで、次のコマンドを実行して SDK をインストールします。

      npm install aliyun-rtc-sdk --save

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

      // 次の 2 つのインポート方法のいずれかを選択します。
// npm パッケージからインポートする場合に使用します。
import AliRtcEngine from 'aliyun-rtc-sdk';
// script タグで SDK をインクルードする場合に使用します。
const AliRtcEngine = window.AliRtcEngine;
// ブラウザの互換性をチェックします。
const checkResult = await AliRtcEngine.isSupported();
if (!checkResult.support) {
  // 現在の環境はサポートされていません。ユーザーにブラウザの切り替えまたはアップグレードを促します。
}
// エンジンインスタンスを作成します。グローバル変数として保存できます。
const aliRtcEngine = AliRtcEngine.getInstance();

    3. 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.`);
  // ここで、このユーザーの UI モジュールを表示するなどのビジネスロジックを処理します。
});
// リモートユーザーがオフラインになったときに呼び出されます。
aliRtcEngine.on('remoteUserOffLineNotify', (userId, reason) => {
  // `reason` は理由コードです。詳細については、API リファレンスをご参照ください。
  console.log(`User ${userId} left the channel. Reason code: ${reason}`);
  // ここで、このユーザーの UI モジュールを破棄するなどのビジネスロジックを処理します。
});
// リモートストリームのサブスクリプション状態が変更されたときに呼び出されます。
aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
  // 'oldState' と 'newState' は AliRtcSubscribeState の値です。
  // 値：0 (初期化済み)、1 (サブスクライブ解除済み)、2 (サブスクライブ中)、3 (サブスクライブ済み)。
  // `interval` は状態変更間の時間 (ミリ秒) です。
  console.log(`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 秒前に呼び出されます。認証情報を速やかに更新する必要があります。
  // セッションを維持するには、新しいトークンと他のデータを取得し、refreshAuthInfo メソッドを呼び出して認証データを更新します。
});

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

      // チャンネルモードを設定します。有効な値：「communication」 (通信モード)、「interactive_live」 (インタラクティブモード)。
aliRtcEngine.setChannelProfile('interactive_live');
// ユーザーロールを設定します。このメソッドはインタラクティブモードでのみ有効です。
// 有効な値：「interactive」 (ストリーマー、ストリームのパブリッシュとサブスクライブが可能)、「live」 (視聴者、ストリームのサブスクライブのみ可能)。
aliRtcEngine.setClientRole('interactive');

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

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

        const userName = 'テストユーザー1'; // ユーザー名に変更できます。
try {
  // fetchToken を実装して、サーバーから Base64 エンコードされたトークンを取得する必要があります。
  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 = 'テストユーザー1'; // ユーザー名に変更できます。
const timestamp = Math.floor(Date.now() / 1000) + 3600; // 1 時間後に有効期限が切れます。
try {
  const token = await generateToken(appId, appKey, channelId, userId, timestamp);
  // チャンネルに参加します。トークンやタイムスタンプなどのパラメーターは、通常サーバーから返されます。
  // 注：このメソッドを呼び出すときは、channelId、userId、appId、および timestamp パラメーターがトークンの生成に使用されたものと一致することを確認してください。
  await aliRtcEngine.joinChannel({
    channelId,
    userId,
    appId,
    token,
    timestamp,
  }, userName);
  // チャンネルへの参加に成功しました。他の操作に進みます。
} catch (error) {
  // チャンネルへの参加に失敗しました。
}

    6. 次の手順に従って、ローカルビデオをプレビューします。デフォルトでは、チャンネルに参加した後、ローカルの音声およびビデオデータは自動的にキャプチャされ、Global Realtime 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);

    7. リモートの音声およびビデオストリームをサブスクライブします。デフォルトでは、チャンネルに参加した後、SDK は他のストリーマーの音声およびビデオストリームを自動的にサブスクライブします。音声ストリームは自動的に再生されます。カメラストリームまたは画面共有ストリームを表示するには、setRemoteViewConfig メソッドを呼び出します。

      1. HTML コードに、コンテナとして id が remoteVideoContainer の DIV 要素を追加します。

        <div id="remoteVideoContainer"></div>

      2. リモートビデオストリームのサブスクリプションの変更をリッスンします。ストリームがサブスクライブされたら、setRemoteViewConfig メソッドを呼び出して再生します。サブスクライブが解除されたら、video 要素を削除します。

        // 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 (初期化済み)、1 (サブスクライブ解除済み)、2 (サブスクライブ中)、3 (サブスクライブ済み)。
  // `interval` は状態変更間の時間 (ミリ秒) です。
  console.log(`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);
  }
});

    8. セッションを終了し、リソースを解放します。

      // ローカルプレビューを停止します。
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 の 2 つのファイルを含めます。

    - 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">
          <strong class="me-auto">ログインメッセージ</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="loginToastBody"></div>
      </div>
      <div id="onlineToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">ユーザーオンライン</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="onlineToastBody"></div>
      </div>
      <div id="offlineToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">ユーザーオフライン</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="offlineToastBody"></div>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col-6">
        <form id="loginForm">
          <div class="form-group mb-2">
            <label for="channelId" class="form-label">チャンネル ID</label>
            <input class="form-control" id="channelId" />
          </div>
          <div class="form-group mb-2">
            <label for="userId" class="form-label">ユーザー ID</label>
            <input class="form-control" id="userId" />
          </div>
          <button id="joinBtn" type="submit" class="btn btn-primary mb-2">チャンネルに参加</button>
          <button id="leaveBtn" type="button" class="btn btn-secondary mb-2" disabled>チャンネルから退出</button>
        </form>
        <div class="mt-3">
          <h4>ローカルプレビュー</h4>
          <video
            id="localPreviewer"
            muted
            class="video"
          ></video>
        </div>
      </div>
      <div class="col-6">
        <h4>リモートユーザー</h4>
        <div id="remoteVideoContainer"></div>
      </div>
    </div>
    <script src="https://g.alicdn.com/code/lib/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://g.alicdn.com/code/lib/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script src="https://g.alicdn.com/apsara-media-box/imp-web-rtc/7.1.9/aliyun-rtc-sdk.js"></script>
    <script src="./quick.js"></script>
  </body>
</html>

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

    次のコードを quick.js にコピーします。指定された変数に [アプリケーション ID] と [AppKey] を貼り付けて、ファイルを保存します。

    コード例

    function hex(buffer) {
  const hexCodes = [];
  const view = new DataView(buffer);
  for (let i = 0; i < view.byteLength; i += 4) {
    const value = view.getUint32(i);
    const stringValue = value.toString(16);
    const padding = '00000000';
    const paddedValue = (padding + stringValue).slice(-padding.length);
    hexCodes.push(paddedValue);
  }
  return hexCodes.join('');
}
async function generateToken(appId, appKey, channelId, userId, timestamp) {
  const encoder = new TextEncoder();
  const data = encoder.encode(`${appId}${appKey}${channelId}${userId}${timestamp}`);
  const hash = await crypto.subtle.digest('SHA-256', data);
  return hex(hash);
}
function showToast(baseId, message) {
  $(`#${baseId}Body`).text(message);
  const toast = new bootstrap.Toast($(`#${baseId}`));
  toast.show();
}
// アプリケーション ID と AppKey を入力します。
const appId = '';
const appKey = '';
AliRtcEngine.setLogLevel(0);
let aliRtcEngine;
const remoteVideoElMap = {};
const remoteVideoContainer = document.querySelector('#remoteVideoContainer');
function removeRemoteVideo(userId, type = 'camera') {
  const vid = `${type}_${userId}`;
  const el = remoteVideoElMap[vid];
  if (el) {
    aliRtcEngine.setRemoteViewConfig(null, userId, type === 'camera' ? 1: 2);
    el.pause();
    remoteVideoContainer.removeChild(el);
    delete remoteVideoElMap[vid];
  }
}
function listenEvents() {
  if (!aliRtcEngine) {
    return;
  }
  // リモートユーザーがオンラインになったときに呼び出されます。
  aliRtcEngine.on('remoteUserOnLineNotify', (userId, elapsed) => {
    console.log(`User ${userId} joined the channel in ${elapsed} seconds.`);
    // ここで、このユーザーの UI モジュールを表示するなどのビジネスロジックを処理します。
    showToast('onlineToast', `User ${userId} is online.`);
  });
  // リモートユーザーがオフラインになったときに呼び出されます。
  aliRtcEngine.on('remoteUserOffLineNotify', (userId, reason) => {
    // `reason` は理由コードです。詳細については、API リファレンスをご参照ください。
    console.log(`User ${userId} left the channel. Reason code: ${reason}`);
    // ここで、このユーザーの UI モジュールを破棄するなどのビジネスロジックを処理します。
    showToast('offlineToast', `User ${userId} is offline.`);
    removeRemoteVideo(userId, 'camera');
    removeRemoteVideo(userId, 'screen');
  });
  aliRtcEngine.on('bye', code => {
    // `code` は理由コードです。詳細については、API リファレンスをご参照ください。
    console.log(`bye, code=${code}`);
    // ここで、通話ページを終了するなどのビジネスロジックを処理します。
    showToast('loginToast', `You have left the channel. Reason code: ${code}`);
  });
  aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
    // 'oldState' と 'newState' は AliRtcSubscribeState の値です。
    // 値：0 (初期化済み)、1 (サブスクライブ解除済み)、2 (サブスクライブ中)、3 (サブスクライブ済み)。
    // `interval` は状態変更間の時間 (ミリ秒) です。
    console.log(`Subscription state of remote user ${userId} in channel ${channelId} changed from ${oldState} to ${newState}.`);
    const vid = `camera_${userId}`;
    // ハンドラーの例
    if (newState === 3) {
      const video = document.createElement('video');
      video.autoplay = true;
      video.className = 'video';
      remoteVideoElMap[vid] = video;
      remoteVideoContainer.appendChild(video);
      // 最初のパラメーターは HTMLVideoElement です。
      // 2 番目のパラメーターはリモートユーザー ID です。
      // 3 番目のパラメーターはストリームタイプを指定します：1 はカメラストリーム、2 は画面共有ストリームです。
      aliRtcEngine.setRemoteViewConfig(video, userId, 1);
    } else if (newState === 1) {
      removeRemoteVideo(userId, 'camera');
    }
  });
  aliRtcEngine.on('screenShareSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
    // 'oldState' と 'newState' は AliRtcSubscribeState の値です。
    // 値：0 (初期化済み)、1 (サブスクライブ解除済み)、2 (サブスクライブ中)、3 (サブスクライブ済み)。
    // `interval` は状態変更間の時間 (ミリ秒) です。
    console.log(`Screen sharing stream subscription state for user ${userId} in channel ${channelId} changed from ${oldState} to ${newState}.`);
    const vid = `screen_${userId}`;
    // ハンドラーの例
    if (newState === 3) {
      const video = document.createElement('video');
      video.autoplay = true;
      video.className = 'video';
      remoteVideoElMap[vid] = video;
      remoteVideoContainer.appendChild(video);
      // 最初のパラメーターは HTMLVideoElement です。
      // 2 番目のパラメーターはリモートユーザー ID です。
      // 3 番目のパラメーターはストリームタイプを指定します：1 はカメラストリーム、2 は画面共有ストリームです。
      aliRtcEngine.setRemoteViewConfig(video, userId, 2);
    } else if (newState === 1) {
      removeRemoteVideo(userId, 'screen');
    }
  });
}
$('#loginForm').submit(async e => {
  // フォームのデフォルトの送信アクションを防止します。
  e.preventDefault();
  const channelId = $('#channelId').val();
  const userId = $('#userId').val();
  const timestamp = Math.floor(Date.now() / 1000) + 3600;
  if (!channelId || !userId) {
    showToast('loginToast', 'Incomplete information.');
    return;
  }
  aliRtcEngine = AliRtcEngine.getInstance();
  listenEvents();
  try {
    const token = await generateToken(appId, appKey, channelId, userId, timestamp);
    // チャンネルモードを設定します。有効な値：「communication」(通信モード)、「interactive_live」(インタラクティブモード)。
    aliRtcEngine.setChannelProfile('communication');
    // ユーザーロールを設定します。このメソッドはインタラクティブモードでのみ有効です。
    // 有効な値：「interactive」(ストリーマー、ストリームのパブリッシュとサブスクライブが可能)、「live」(視聴者、ストリームのサブスクライブのみ可能)。
    // await aliRtcEngine.setClientRole('interactive');
    // チャンネルに参加します。トークンやタイムスタンプなどのパラメーターは、通常サーバーから返されます。
    await aliRtcEngine.joinChannel(
      {
        channelId,
        userId,
        appId,
        token,
        timestamp,
      },
      userId
    );
    showToast('loginToast', 'Successfully joined the channel.');
    $('#joinBtn').prop('disabled', true);
    $('#leaveBtn').prop('disabled', false);
    // ローカルプレビューを開始します。
    aliRtcEngine.setLocalViewConfig('localPreviewer', 1);
  } catch (error) {
    console.log('Failed to join the channel.', error);
    showToast('loginToast', 'Failed to join the channel.');
  }
});
$('#leaveBtn').click(async () => {
  Object.keys(remoteVideoElMap).forEach(vid => {
    const arr = vid.split('_');
    removeRemoteVideo(arr[1], arr[0]);
  });
  // ローカルプレビューを停止します。
  await aliRtcEngine.stopPreview();
  // チャンネルから退出します。
  await aliRtcEngine.leaveChannel();
  // インスタンスを破棄します。
  aliRtcEngine.destroy();
  aliRtcEngine = undefined;
  $('#joinBtn').prop('disabled', false);
  $('#leaveBtn').prop('disabled', true);
  showToast('loginToast', 'Left the channel.');
});

    ステップ 4：デモの実行

    1. ターミナルで demo フォルダーに移動し、http-server -p 8080 を実行して HTTP サーバーを起動します。

    2. 新しいブラウザータブを開き、localhost:8080/quick.html にアクセスします。[チャンネル ID] と [ユーザー ID] を入力し、[チャンネルに参加] をクリックします。

    3. 2 つ目のブラウザータブを開き、localhost:8080/quick.html にアクセスします。同じチャンネル ID と、異なるユーザー ID を入力し、[チャンネルに参加] をクリックします。

    4. 他のユーザーからのメディアストリームが自動的にサブスクライブされ、ページに表示されることを確認します。