tencent cloud

TRTCCallingの概要

TRTCCallingコンポーネントは、Tencent CloudのTencent Real-Time Communication（TRTC）とInstant Messaging（IM）サービスの組み合わせにより構成されており、1v1および複数人でのビデオ/音声通話をサポートしています。具体的な実装プロセスについては、リアルタイム音声通話（Web）をご参照ください。

• TRTC SDK：TRTC SDKを低遅延のオーディオビデオ通話コンポーネントとして使用します。
• IM SDK： IM SDKをシグナリング情報の送信と処理に使用します。

Demoのダウンロード

クリックしてTUICallingに進み、実際のサービスのニーズに応じてDemoソースコードをダウンロードします。

環境要件

最新バージョンのChromeブラウザをご使用ください。現在、デスクトップのChromeブラウザはTRTC Web SDKをサポートしており、関連機能は比較的整っていますので、Chromeブラウザを使用して体験することをお勧めします。具体的な内容については 環境要件をご参照ください。

URLドメイン名プロトコルの制限

TRTCCalling API

イベントサブスクリプション/サブスクリプションのキャンセルに関するインターフェース関数

このコンポーネントはイベントのディスパッチに基づいて管理します。アプリケーション層は、コンポーネントからディスパッチされるイベントにインタラクティブに応じて変更することができます。

SDK 基本関数

通話操作に関連するインターフェース関数

ビデオ制御に関連するインターフェース関数

TRTCCallingの詳細

TRTCCallingコンポーネントのインスタンスの作成

まず、Tencent Real-Time Communicationコンソールでアプリケーションを作成し、SDKAppIDを取得する必要があります。
その後、new TRTCCalling()メソッドを使ってTRTCCalling コンポーネントのインスタンスを取得することができます。

npm i trtc-js-sdk --save
npm i tim-js-sdk --save
npm i tsignaling --save
npm i trtc-calling-js --save
// nodeを通じてダウンロードする依存関係の場合は、importによって次をインポートします
import TRTCCalling from 'trtc-calling-js';
 // スクリプト方式によってtrtc-calling-jsを使用する場合は、順序どおりに
// trtc.jsを手動でインポートします
<script src="./trtc.js"></script>
// 続いて、tim-js.jsを手動でインポートします。
<script src="./tim-js.js"></script>
// 次に、tsignaling.jsを手動でインポートします。
<script src="./tsignaling.js"></script>
// 最後に、trtc-calling-js.jsを手動でインポートします。
<script src="./trtc-calling-js.js"></script>
let options = {
SDKAppID: 0, // アクセスするときは、0をお客様のIMアプリケーションのSDKAppIDに置き換える必要があります
// v0.10.2から、timパラメータを追加します
// timパラメータはサービス内にすでに存在するTIMインスタンスに使用され、TIMインスタンスの一意性を保証します。
tim: tim
};
let trtcCalling = new TRTCCalling(options);

イベントのサブスクリプション/サブスクリプションキャンセルに関するインターフェース関数

on(eventName, callback, context)

コンポーネントからディスパッチされたイベントを監視するために使用します。詳細については、イベントリストをご参照ください。

let handleInvite = function ({inviteID, sponsor, inviteData}) {
    console.log(`inviteID: ${inviteID}, sponsor: ${sponsor}, inviteData: ${JSON.stringify(inviteData)}`);
};
trtcCalling.on('onInvited', handleInvite, this);

off(eventName, callback, context)

イベント監視をキャンセルするために使用します。

let handleInvite = function ({inviteID, sponsor, inviteData}) {
    console.log(`inviteID: ${inviteID}, sponsor: ${sponsor}, inviteData: ${JSON.stringify(inviteData)}`);
};
trtcCalling.off('onInvited', handleInvite, this);

SDK基本関数

login({userID, userSig})

インターフェースにログインします。

trtcCalling.login({userID, userSig})

パラメータは下表に示すとおりです。

logout()

インターフェースからログアウトします。

trtcCalling.logout()

通話操作に関連するインターフェース関数

call({userID, type, offlinePushInfo})

1v1通話招待、そのうちtypeは通話タイプ、1は音声通話、2はビデオ通話です。

説明：

• v1.0.0以降のバージョンで、timeoutパラメータを取り消しました
• v1.0.0以降のバージョンに、offlinePushInfoパラメータを新規追加しました（オフラインプッシュはAndroidまたはiOS端末にのみ適用されます。WebおよびWeChat Mini Programはサポートしていません）。

// v1.0.0以前
trtcCalling.call({userID, type, timeout});

// v1.0.0以降のバージョン
const offlinePushInfo = {
  title: '',
  description: '通話リクエストが1件あります',
}
trtcCalling.call({userID, type, offlinePushInfo})

パラメータは下表に示すとおりです。

offlinePushInfoパラメータ（v1.0.0以降のバージョンのみ）

groupCall({userIDList, type, groupID, offlinePushInfo})

groupID パラメータは IM SDKにおけるグループ IDです。このパラメータを設定すると、通話リクエストメッセージがグループメッセージシステムを介してブロードキャストされます。このメッセージブロードキャスト方式は簡単で信頼性の高い方法です。設定しない場合は、TRTCCalling コンポーネントが単発メッセージで1人1人に通知を行います。

説明：

v1.0.0以降のバージョンに、offlinePushInfoパラメータを新規追加しました（オフラインプッシュはAndroidまたはiOS端末にのみ適用されます。WebおよびWeChat Mini Programはサポートしていません）。

// v1.0.0より前
trtcCalling.groupCall({userIDList, type, groupID});

// v1.0.0以降
const offlinePushInfo = {
  title: '',
  description: '通話リクエストが1件あります',
}
trtcCalling.groupCall({userIDList, type, groupID, offlinePushInfo})

パラメータは下表に示すとおりです。

offlinePushInfoパラメータ（v1.0.0以降のバージョンのみ）

accept()

招待を受け取った後、このインターフェースを呼び出すと、現在の招待を受け入れます。

説明：

• 前回のinvitationの処理が未完了の場合、コンポーネントはデフォルトでビジー状態になり、その後のすべての招待はビジーを返します。
• v1.0.0以降のバージョンで、paramsパラメータを取り消しました。

import TRTCCalling from 'trtc-calling-js';
trtcCalling.on(TRTCCalling.EVENT.INVITED, ({inviteID, sponsor, inviteData}) => {
  // ...
  // v1.0.0以前
  const { roomID, callType } = inviteData;
  trtcCalling.accept({inviteID, roomID, callType})
  // v1.0.0以降
  trtcCalling.accept();
})

パラメータは下表に示すとおりです。

reject()

招待を受け取った後、このインターフェースを呼び出すと、現在の招待が拒否されます。

説明：

v1.0.0以降のバージョンで、paramsパラメータを取り消しました。

import TRTCCalling from 'trtc-calling-js';
trtcCalling.on(TRTCCalling.EVENT.INVITED, ({inviteID, sponsor, inviteData}) => {
  // ...
  // v1.0.0より前
  const { callType } = inviteData;
  trtcCalling.reject({inviteID, isBusy, callType})
  // v1.0.0以降
  trtcCalling.reject();
})

パラメータは下表に示すとおりです。

hangup()

1. 通話中にこの関数を呼び出せば、通話を終了することができます。
2. 応答がない状態では、通話をキャンセルするために用いることができます。

trtcCalling.hangup()

ビデオ制御に関連するインターフェース関数

startRemoteView({userID, videoViewDomID})

リモートユーザーのカメラデータを指定されたDOM IDノードにレンダリングします。

trtcCalling.startRemoteView({userID, videoViewDomID})

パラメータは下表に示すとおりです。

stopRemoteView({userID})

リモートユーザーのカメラデータによってレンダリングされたDOMノードを削除します。

説明：

v1.0.0以降のバージョンで、videoViewDomIDパラメータを削除しました。

// v1.0.0以前
trtcCalling.stopRemoteView({userID, videoViewDomID});
// v1.0.0以降
trtcCalling.stopRemoteView({userID});

パラメータは下表に示すとおりです。

startLocalView({userID, videoViewDomID})

ローカルユーザーのカメラデータを指定されたDOM IDノードにレンダリングします。

trtcCalling.startLocalView({userID, videoViewDomID})

パラメータは下表に示すとおりです。

stopLocalView({userID})

ローカルユーザーのカメラデータによってレンダリングされたDOMノードを削除します。

説明：

v1.0.0以降のバージョンで、videoViewDomIDパラメータを削除しました。

// v1.0.0以前
trtcCalling.stopLocalView({userID, videoViewDomID});
// v1.0.0以降
trtcCalling.stopLocalView({userID});

パラメータは下表に示すとおりです。

openCamera()

ローカルカメラをオンにします。

trtcCalling.openCamera()

closeCamera()

カメラをオフにします。

trtcCalling.closeCamera()

setMicMute(isMute)

マイクをオン/オフします。

trtcCalling.setMicMute(true) // マイクオフ

パラメータは下表に示すとおりです。

setVideoQuality(profile)

ビデオの画質を設定します。

説明：

• v0.8.0以降のバージョンは、このメソッドが新規追加されました。
• このメソッドは、call、groupCall、acceptの前に設定する必要があり、その後の設定は有効になりません。

trtcCalling.setVideoQuality('720p') // ビデオの画質を720pに設定します

パラメータは下表に示すとおりです。

switchToAudioCall()

ビデオ通話を音声通話へ切り替えます。

説明：

• v0.10.0以降のバージョンは、このメソッドが新規追加されました。
• 1v1通話中のみ使用をサポートします。
• ERRORイベントの監視に失敗しました。code：60001。

trtcCalling.switchToVideoCall() // ビデオ通話を音声通話へ切り替え

switchToVideoCall()

音声通話をビデオ通話へ切り替えます。

説明：

• v0.10.0以降のバージョンは、このメソッドが新規追加されました。
• 1v1通話中のみ使用をサポートします。
• ERRORイベントの監視に失敗しました。code：60002。

trtcCalling.switchToVideoCall() // 音声通話をビデオ通話へ切り替え

getCameras()

このインターフェースを呼び出すと、カメラデバイスリストを取得することができます。

説明：

v1.0.0以降のバージョンに、このメソッドが新規追加されました。

trtcCalling.getCameras() // カメラリストの取得

getMicrophones()

このインターフェースを呼び出すと、マイクデバイスリストを取得することができます。

説明：

v1.0.0以降のバージョンに、このメソッドが新規追加されました。

trtcCalling.getMicrophones() // マイクリストの取得

switchDevice({deviceType, deviceId})

このインターフェースを呼び出すと、カメラまたはマイクのデバイスを切り替えることができます。

説明：

v1.0.0以降のバージョンに、このメソッドが新規追加されました。

trtcCalling.switchDevice({deviceType: 'audio', deviceId: deviceId}) // デバイスの切り替え

パラメータは下表に示すとおりです。

TRTCCallingイベントリスト

次のコードを参照して、TRTCCalling コンポーネントイベントを監視できます。

import TRTCCalling from 'trtc-calling-js';
// etc
function handleInviteeReject({userID}) {

}
trtcCalling.on(TRTCCalling.EVENT.REJECT, handleInviteeReject)

招待側イベント

一般的なイベントコールバック

SDK_READY

SDKがready状態に入るとこのコールバックを受信します

説明：

v1.0.0以降のバージョンに、このイベントが新規追加されました。

let onSDKReady = function(event) {
  console.log(event)
};
trtcCalling.on(TRTCCalling.EVENT.SDK_READY, onSDKReady);

USER_ENTER

ユーザーが入室しました。
トリッガー：ユーザーが通話に参加する。

let handleUserEnter = function({userID}) {
  console.log(userID)
};
trtcCalling.on(TRTCCalling.EVENT.USER_ENTER, handleUserEnter);

パラメータは下表に示すとおりです。

USER_LEAVE

ユーザーが退室しました。
トリッガー：ユーザーが通話を退出する。

let handleUserLeave = function({userID}) {
  console.log(userID)
};
trtcCalling.on(TRTCCalling.EVENT.USER_LEAVE, handleUserLeave);

パラメータは下表に示すとおりです。

GROUP_CALL_INVITEE_LIST_UPDATE

グループチャットで招待リストを更新するとこのコールバックを受信します

説明：

v1.0.0以降のバージョンに、このイベントが新規追加されました。

let handleGroupInviteeListUpdate = function(event) {
  console.log(event)
};
trtcCalling.on(TRTCCalling.EVENT.GROUP_CALL_INVITEE_LIST_UPDATE, handleGroupInviteeListUpdate);

CALL_END

今回の通話は終了しました。
トリッガー：今回の通話を終了する。

let handleCallingEnd = function(event) {
  console.log(event)
};
trtcCalling.on(TRTCCalling.EVENT.CALL_END, handleCallingEnd);

KICKED_OUT

ログインを繰り返したことにより、強制退室されました。
トリッガー：他のページに繰り返しログインする。

let handleKickedOut = function(event) {
  console.log(event)
};
trtcCalling.on(TRTCCalling.EVENT.KICKED_OUT, handleKickedOut);

USER_VIDEO_AVAILABLE

リモートユーザーがカメラをオン/オフにします。
トリッガー：リモートユーザーがカメラをオン/オフにする。

let handleUserVideoChange = function({userID, isVideoAvailable}) {
  console.log(userID, isVideoAvailable)
};
trtcCalling.on(TRTCCalling.EVENT.USER_VIDEO_AVAILABLE, handleUserVideoChange);

パラメータは下表に示すとおりです。

USER_AUDIO_AVAILABLE

リモートユーザーがマイクをオン/オフにしました。
トリッガー：リモートユーザーがマイクをオン/オフする。

let handleUserAudioChange = function({userID, isAudioAvailable}) {
  console.log(userID, isAudioAvailable)
};
trtcCalling.on(TRTCCalling.EVENT.USER_AUDIO_AVAILABLE, handleUserAudioChange);

パラメータは下表に示すとおりです。

招待側イベントコールバック

REJECT

ユーザーが通話を拒否しました。
トリッガー：被招待者が通話を拒否し、発信者がREJECTイベントコールバックを受け取る。

let handleInviteeReject = function({userID}) {
  console.log(userID)
};
trtcCalling.on(TRTCCalling.EVENT.REJECT, handleInviteeReject);

パラメータは下表に示すとおりです。

NO_RESP

招待されたユーザーは応答しませんでした。
トリッガー：call/groupCallにtimeoutを設定し、被招待者がtimeout内に応答しなかった場合、発信者がNO_RESPイベントコールバックを受け取る。

let handleNoResponse = function({userID, userIDList}) {
  console.log(userID, userIDList)
};
trtcCalling.on(TRTCCalling.EVENT.NO_RESP, handleNoResponse);

パラメータは下表に示すとおりです。

LINE_BUSY

被招待側は通話中で、ビジー状態です。
トリッガー：被招待者が通話中である場合、発信者がLINE_BUSYイベントコールバックを受け取る。

let handleLineBusy = function({userID}) {
  console.log(userID)
};
trtcCalling.on(TRTCCalling.EVENT.LINE_BUSY, handleLineBusy);

パラメータは下表に示すとおりです。

被招待側イベントコールバック

INVITED

招待通知を受領しました。
トリッガー：招待通知があった場合、被招待者がINVITEDイベントコールバックを受け取る。

let handleNewInvitationReceived = function({
    sponsor, userIDList, isFromGroup, inviteData, inviteID
}) {
  console.log(sponsor, userIDList, isFromGroup, inviteData, inviteID)
};
trtcCalling.on(TRTCCalling.EVENT.INVITED, handleNewInvitationReceived);

パラメータは下表に示すとおりです。

CALLING_CANCEL

今回の通話はキャンセルされました。
トリッガー：発信者がコール中に通話をキャンセルし、被招待者がCALLING_CANCELイベントコールバックを受け取る。

let handleCallingCancel = function(event) {
  console.log(event)
};
trtcCalling.on(TRTCCalling.EVENT.CALLING_CANCEL, handleCallingCancel);

CALLING_TIMEOUT

今回の通話はタイムアウトで、応答はありませんでした。
トリッガー：call/groupCallにtimeoutを設定し、被招待者がtimeout内に応答しなかった場合、被招待者がCALLING_TIMEOUTイベントコールバックを受け取る

let handleCallingTimeout = function(event) {
  console.log(event)
};
trtcCalling.on(TRTCCalling.EVENT.CALLING_TIMEOUT, handleCallingTimeout);

TRTCCalling エラーコードリスト

EVENTのERRORフィールドを監視することによって、コンポーネントからスローされたエラーを処理することができます。サンプルコードは次のとおりです。

import TRTCCalling from 'trtc-calling-js';
let onError = function(error) {
  console.log(error)
};
trtcCalling.on(TRTCCalling.EVENT.ERROR, onError);

Error code

アップグレードガイド

• **TRTCCallingバージョンを>= 1.0.2にアップグレードします **
  • 注意：TSignalingバージョンを>= 0.9.0にアップグレードする必要があります
  • 原因：ログの更新
• 1.0.2にアップグレード >TRTCCallingバージョン>=1.0.0
  • 注意：TSignalingバージョンを>= 0.8.0にアップグレードする必要があります
  • 原因：ログの更新

よくあるご質問

通話がつながらなかったり、強制オフラインになったりするのはなぜですか。

コンポーネントは現在、マルチインスタンスのログインやオフラインプッシュのシグナリング機能をサポートしていません。現在のログインアカウントの一意性をご確認ください。

説明：

• マルチインスタンス：1つのUserIDで繰り返しログインしたり、異なるターミナルからログインしたりすると、シグナリングの混乱が生じます。
• オフラインプッシュ：インスタンスはオンラインの場合にのみメッセージを受信できます。インスタンスがオフラインのときに受信したシグナリングは、オンラインになった後は再度プッシュされません。
  その他よくあるご質問については、TRTCCalling Webに関するご質問をご参照ください。

技術的なお問い合わせ

詳細については、お問い合わせにご連絡をいただくか、colleenyu@tencent.comにメールでご連絡ください。

参考ドキュメント

• TRTCCalling web公式サイトで体験
• TRTCCalling npm
• TRTCCalling web demoソースコード
• TRTCCalling web API
• TRTCCalling webに関するご質問