tencent cloud

内容紹介

ビデオ通話の前に、ブラウザ環境の確認およびカメラとマイクなどのデバイスのテストを先に行うことをお勧めします。テストしない場合、ユーザーが実際に通話を行うときにデバイスの問題を見つけることが難しくなります。

ブラウザ環境の確認

SDKの通信機能を呼び出す前に、まず{@link TRTC.checkSystemRequirements checkSystemRequirements()}インターフェイスを使用して、SDKが現在のWebページをサポートしているかどうかを確認することをお勧めします。SDKが現在のブラウザをサポートしていない場合、ユーザーのデバイスタイプに応じて、SDKでサポートされているブラウザを使用するようにユーザーに提案してください。

TRTC.checkSystemRequirements().then(checkResult => {
if (checkResult.result) {
  // 入室をサポートします
  if (checkResult.isH264DecodeSupported) {
      // プルをサポートします
  }
  if (checkResult.isH264EncodeSupported) {
      // プッシュをサポートします
  }
}
})

ユーザーがSDKでサポートされているブラウザを使用し、TRTC.checkSystemRequirementsによって返される検出結果がfalseの場合、次の理由が考えられます：

ケース1：リンクが次の3つの条件のいずれかを満たしているかどうかを確認してください

• localhostドメイン（Firefoxブラウザはlocalhostとローカルipアクセスをサポートします）
• HTTPSがオンになっているドメイン
• file:///プロトコルで開いたローカルファイル

ケース2：Firefoxブラウザをインストールした後、H264コーデックを動的にロードする必要があるため、検出結果はしばらくの間falseになります。しばらく待ってから再試行するか、先に別の推奨ブラウザを使用してリンクを開いてください。

既知のブラウザの使用制限の説明

Firefox

• Firefoxは30fpsのビデオフレームレートのみをサポートします。フレームレートを設定する必要がある場合は、SDKでサポートされている他のブラウザを使用してください。

QQブラウザ

• カメラとマイクが通常に動作する一部のWindowsデバイスは、localhost環境でlocalStream.initialize()を呼び出すとき、NotFoundErrorエラーをスローします。

オーディオビデオデバイスのテスト

ユーザーがTRTC-SDKを使用する過程でより良いユーザーエクスペリエンスを確実に得られるために、ユーザーがTRTCルームに参加する前に、ユーザーのデバイスとネットワーク状態を確認し、提案とガイダンスを提供することをお勧めします。

デバイス検出機能とネットワーク確認機能を迅速に統合できるために、参照するための以下の方法を提供します：

• rtc-detectのJSライブラリ
• デバイスを検出するReactコンポーネント
• TRTC機能検出ページ

rtc-detectライブラリ

rtc-detectを使用してTRTC SDKに対する現在の環境のサポートおよび現在の環境の詳細を確認できます。

インストール

npm install rtc-detect

使用方法

import RTCDetect from 'rtc-detect';
// 監視モジュールを初期化します
const detect = new RTCDetect();
// 現在の環境の検視結果を取得します
const result = await detect.getReportAsync();
// resultは、現在の環境システムの情報、APIサポート、コーデックサポートおよびデバイス関連情報が含まれています
console.log('result is: ' + result);

API

(async) isTRTCSupported()

現在の環境がTRTCをサポートしているかどうかを判断します。

const detect = new RTCDetect();
const data = await detect.isTRTCSupported();
if (data.result) {
console.log('current browser supports TRTC.')
}else{
console.log(`current browser does not support TRTC, reason: ${data.reason}.`)
}

getSystem()

現在のシステム環境パラメータを取得します。

Item	Type	Description
UA	string	ブラウザのua
OS	string	現在のデバイスのシステムモデル
browser	object	現在のブラウザ情報{ name, version }
displayResolution	object	現在の解像度{ width, height }
getHardwareConcurrency	number	デバイスのCPUコアの現在の数

const detect = new RTCDetect();
const result = detect.getSystem();

getAPISupported()

現在の環境APIサポートを取得します。

Item	Type	Description
isUserMediaSupported	boolean	ユーザーメディアデータストリームの取得をサポートするかどうか
isWebRTCSupported	boolean	WebRTCをサポートするかどうか
isWebSocketSupported	boolean	WebSocketをサポートするかどうか
isWebAudioSupported	boolean	WebAudioをサポートするかどうか
isScreenCaptureAPISupported	boolean	画面のストリームの取得をサポートするかどうか
isCanvasCapturingSupported	boolean	canvasからのデータストリームの取得をサポートするかどうか
isVideoCapturingSupported	boolean	videoからのデータストリームの取得をサポートするかどうか
isRTPSenderReplaceTracksSupported	boolean	trackを置き換えるときにpeerConnectionと再ネゴシエーションを行わないことをサポートするかどうか
isApplyConstraintsSupported	boolean	getUserMediaを再度呼び出さずにカメラの解像度の変更をサポートするかどうか

const detect = new RTCDetect();
const result = detect.getAPISupported();

(async) getDevicesAsync()

現在の環境で利用可能なデバイスを取得します。

Item	Type	Description
hasWebCamPermissions	boolean	ユーザーのカメラデータの取得をサポートするかどうか
hasMicrophonePermission	boolean	ユーザーのマイクデータの取得をサポートするかどうか
cameras	array	サポートされているビデオストリームの解像度情報、最大の幅と高さ、および最大フレームレートを含むユーザーのカメラデバイスリスト（最大フレームレートは一部のブラウザではサポートされていません）
microphones	array	ユーザーのマイクデバイスのリスト
speakers	array	ユーザーのスピーカーデバイスのリスト

CameraItem

Item	Type	Description
deviceId	string	デバイスIDは、通常は一意であり、デバイスの収集と識別に使用できます
groupId	string	グループの識別子です。2つのデバイスが同じ物理デバイスに属する場合、それらは同じ識別子を持ちます
kind	string	カメラデバイスのタイプ：'videoinput'
label	string	デバイスを説明するタグ
resolution	object	カメラでサポートされている最大解像度の幅と高さ、フレームレート{maxWidth: 1280, maxHeight: 720, maxFrameRate: 30}

DeviceItem

Item	Type	Description
deviceId	string	デバイスIDは、通常は一意であり、デバイスの収集と識別に使用できます
groupId	string	グループの識別子です。2つのデバイスが同じ物理デバイスに属する場合、それらは同じ識別子を持ちます
kind	string	デバイスのタイプです。例えば：'audioinput', 'audiooutput'
label	string	デバイスを説明するタグ

const detect = new RTCDetect();
const result = await detect.getDevicesAsync();

(async) getCodecAsync()

現在の環境パラメータのコーデックサポートを取得します。

Item	Type	Description
isH264EncodeSupported	boolean	h264エンコーディングをサポートするかどうか
isH264DecodeSupported	boolean	h264デコーディングをサポートするかどうか
isVp8EncodeSupported	boolean	vp8エンコーディングをサポートするかどうか
isVp8DecodeSupported	boolean	vp8デコーディングをサポートするかどうか
エンコーディングのサポートとは、オーディオビデオのリリースをサポートすることを意味し、デコードのサポートとは、オーディオビデオ再生のプルをサポートすることを意味します

const detect = new RTCDetect();
const result = await detect.getCodecAsync();

(async) getReportAsync()

現在の環境モニタリングレポートを取得します。

Item	Type	Description
system	object	getSystem()の戻り値と一致します
APISupported	object	getAPISupported()の戻り値と一致します
codecsSupported	object	getCodecAsync()の戻り値と一致します
devices	object	getDevicesAsync()の戻り値と一致します

const detect = new RTCDetect();
const result = await detect.getReportAsync();

(async) isHardWareAccelerationEnabled()

Chromeブラウザでハードウェアアクセラレーションが有効になっているかどうかを確認します。

注意：

• このインターフェースの実装は、WebRTCネイティブインターフェースに依存します。isTRTCSupportedがサポートを確認した後、このインターフェースを呼び出して検出することをお勧めします。最大検出時間は30sです。テストにより、
  1. ハードウェアアクセラレーションを有効にすると、このインターフェイスはWindowsで約2秒、Macで約10秒かかります。
  2. ハードウェアアクセラレーションを無効にすると、このインターフェイスはWindowsとMacの両方で約30秒かかります。

const detect = new RTCDetect();
const data = await detect.isTRTCSupported();
if (data.result) {
const result = await detect.isHardWareAccelerationEnabled();
console.log(`is hardware acceleration enabled: ${result}`);
}else{
console.log(`current browser does not support TRTC, reason: ${data.reason}.`)
}

デバイス検出用のReactコンポーネント

デバイス検出UIコンポーネントの機能

1. デバイス接続とデバイス検出のロジックを処理します

2. ネットワーク検出のロジックを処理します

3. ネットワーク検出タブはオプションです

4. 中国語と英語の両方をサポートします

デバイス検出UIコンポーネントの関連リンク

コンポーネントnpmパッケージの使用手順については、rtc-device-detector-reactをご参照ください

コンポーネントのソースコードのデバッグについては、github/rtc-device-detectorをご参照ください

コンポーネントの参照例については、WebRTC API Exampleをご参照ください

デバイス検出UIコンポーネントのインターフェース

デバイスとネットワークの検出ロジック

1）デバイス接続

デバイス接続の目的は、ユーザーが使用する機器にカメラ、マイク、またはスピーカーデバイスがあるかどうか、およびインターネットに接続されているかどうかを検出することです。カメラ、マイクデバイスがある場合は、オーディオビデオストリームを取得し、カメラとマイクへのアクセスを許可するようにユーザーに提案します。

• デバイスにカメラ、マイク、スピーカーデバイスがあるかどうかを判断します

  import TRTC from 'trtc-js-sdk';
  const cameraList = await TRTC.getCameras();
  const micList = await TRTC.getMicrophones();
  const speakerList = await TRTC.getSpeakers();
  const hasCameraDevice = cameraList.length > 0;
  const hasMicrophoneDevice = micList.length > 0;
  const hasSpeakerDevice = speakerList.length > 0;
  

• カメラとマイクへのアクセス権限を取得します

  navigator.mediaDevices
  .getUserMedia({ video: hasCameraDevice, audio: hasMicrophoneDevice })
  .then((stream) => {
    // オーディオビデオストリームの取得に成功しました
  // ...
    // カメラとマイクデバイスをリリースします
     stream.getTracks().forEach(track => track.stop());
  })
  .catch((error) => {
  // オーディオビデオストリームの取得に失敗しました
  });
  

• デバイスがインターネットに接続されているかどうかを判断します

  export function isOnline() {
  const url = 'https://web.sdk.qcloud.com/trtc/webrtc/assets/trtc-logo.png';
  return new Promise((resolve) => {
  try {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(true);
    };
    xhr.onerror = function () {
      resolve(false);
    };
    xhr.open('GET', url, true);
    xhr.send();
  } catch (err) {
    // console.log(err);
  }
  });
  }
  const isOnline = await isOnline();
  

2） カメラ検出

​ カメラ検出は、選択したカメラによってキャプチャされたビデオストリームをユーザーにレンダリングし、ユーザーがカメラが正常に使用できるかどうかを確認するのに役立ちます。

• カメラリストを取得します。デフォルトでは、カメラリストの最初のデバイスを使用します

  import TRTC from 'trtc-js-sdk';
  let cameraList = await TRTC.getCameras();
  let cameraId = cameraList[0].deviceId;
  

• ビデオストリームを初期化し、idがcamera-videoのdom要素でストリームを再生します

  const localStream = TRTC.createStream({
  video: true,
  audio: false,
  cameraId,
  });
  await localStream.initialize();
  localStream.play('camera-video');
  

• ユーザーがカメラデバイスを切り替えた後にストリームを更新します

  localStream.switchDevice('video', cameraId);
  

• デバイスの抜き差しを監視します

  navigator.mediaDevices.addEventListener('devicechange', async () => {
  cameraList = await TRTC.getCameras();
  cameraId = cameraList[0].deviceId; 
  localStream.switchDevice('video', cameraId);
  })
  

• 検出が完了したら、カメラの占有をリリースします

  localStream.close();
  

3）マイク検出

​ マイク検出は、選択したマイクによってキャプチャされたオーディオストリームのボリュームをユーザーにレンダリングし、ユーザーがマイクが正常に使用できるかどうかを確認するのに役立ちます。

• マイクリストを取得します。デフォルトでは、マイクリストの最初のデバイスを使用します

  import TRTC from 'trtc-js-sdk';
  let microphoneList = await TRTC.getMicrophones();
  let microphoneId = microphoneList[0].deviceId;
  

• オーディオストリームを初期化し、idがaudio-containerのdom要素でストリームを再生します

  const localStream = TRTC.createStream({
  video: false,
  audio: true,
  microphoneId,
  });
  await localStream.initialize();
  localStream.play('audio-container');
  timer = setInterval(() => {
  const volume = localStream.getAudioLevel();
  }, 100);
  

• ユーザーがマイクデバイスを切り替えた後にストリームを更新します

  // ユーザーが新しく選択したmicrophoneIdを取得します
  localStream.switchDevice('audio', microphoneId);
  

• デバイスの抜き差しを監視します

  navigator.mediaDevices.addEventListener('devicechange', async () => {
  microphoneList = await TRTC.getMicrophones();
  microphoneId = microphoneList[0].deviceId;
  localStream.switchDevice('audio', microphoneId);
  })
  

• 検出が完了したら、マイクの占有をリリースし、ボリュームの監視を停止します

  localStream.close();
  clearInterval(timer);
  

4） スピーカー検出

スピーカー検出はオーディオプレーヤーを提供し、ユーザーはオーディオの再生によって、選択したスピーカーが正常に使用できるかどうかを確認できます。

• mp3プレーヤーを提供し、デバイスの再生ボリュームを上げるようにユーザーに通知し、mp3を再生して、スピーカーデバイスが正常であるかどうかを確認します

  <audio id="audio-player" src="xxxxx" controls></audio>
  

• 検出が終了したら、再生を停止します

  const audioPlayer = document.getElementById('audio-player');
  if (!audioPlayer.paused) {
  audioPlayer.pause();
  }
  audioPlayer.currentTime = 0;
  

5） ネットワーク検出

• TRTC.createClientを呼び出して、それぞれuplinkClientおよびdownlinkClientという2つのClientを作成します。

• この2つのClientは、同じルームに入ります。

• uplinkClientを使用してプッシュし、NETWORK_QUALITYイベントを監視してアップリンクのネットワーク品質を確認します。

• downlinkClientを使用してプルし、NETWORK_QUALITYイベントを監視してダウンリンクのネットワーク品質を確認します。

• プロセス全体は約15秒間続く可能性があり、最後に平均ネットワーク品質を使用して、アップリンクとダウンリンクのネットワーク状態を大まかに判断します。

注意：

検出プロセスには少額の基本サービス料金が発生します。プッシュ解像度が指定されていない場合、デフォルトで640*480の解像度でプッシュします。

let uplinkClient = null; // アップリンクネットワーク品質の確認に使用されます
let downlinkClient = null; //ダウンリンクネットワーク品質の確認に使用されます
let localStream = null; // テストされるストリームに使用されます
let testResult = {
// アップリンクネットワーク品質のデータを記録します
uplinkNetworkQualities: [],
// ダウンリンクネットワーク品質のデータを記録します
downlinkNetworkQualities: [],
average: {
  uplinkNetworkQuality: 0,
  downlinkNetworkQuality: 0
}
}
// 1. アップリンクネットワーク品質を確認します
async function testUplinkNetworkQuality() {
uplinkClient = TRTC.createClient({
  sdkAppId: 0, // sdkAppIdを記入します
  userId: 'user_uplink_test',
  userSig: '', // uplink_testのuserSig
  mode: 'rtc'
});
 localStream = TRTC.createStream({ audio: true, video: true });
// 実際のサービスシーンに応じてvideo profileを設定します
localStream.setVideoProfile('480p'); 
await localStream.initialize();
 uplinkClient.on('network-quality', event => {
  const { uplinkNetworkQuality } = event;
  testResult.uplinkNetworkQualities.push(uplinkNetworkQuality);
});
 // テスト用ルームを追加します。競合を避けるためにルーム番号はランダムである必要があります
await uplinkClient.join({ roomId: 8080 }); 
await uplinkClient.publish(localStream);
}
// 2. ダウンリンクネットワーク品質を確認します
async function testDownlinkNetworkQuality() {
downlinkClient = TRTC.createClient({
  sdkAppId: 0, // sdkAppIdを記入します
  userId: 'user_downlink_test',
  userSig: '', // userSig
  mode: 'rtc'
});
 downlinkClient.on('stream-added', async event => {
  await downlinkClient.subscribe(event.stream, { audio: true, video: true });
// サブスクリプションに成功した後、ネットワーク品質イベントの監視を開始します
  downlinkClient.on('network-quality', event => {
    const { downlinkNetworkQuality } = event;
    testResult.downlinkNetworkQualities.push(downlinkNetworkQuality);
  });
})
// テスト用ルームを追加します。競合を避けるためにルーム番号はランダムである必要があります
await downlinkClient.join({ roomId: 8080 });
}
// 3. 確認を開始します
testUplinkNetworkQuality();
testDownlinkNetworkQuality();
// 4. 15秒後に確認を停止し、平均ネットワーク品質を計算します
setTimeout(() => {
// アップリンクの平均ネットワーク品質を計算します
if (testResult.uplinkNetworkQualities.length > 0) {
  testResult.average.uplinkNetworkQuality = Math.ceil(
    testResult.uplinkNetworkQualities.reduce((value, current) => value + current, 0) / testResult.uplinkNetworkQualities.length
  );
}
 if (testResult.downlinkNetworkQualities.length > 0) {
  // ダウンリンクの平均ネットワーク品質を計算します
  testResult.average.downlinkNetworkQuality = Math.ceil(
    testResult.downlinkNetworkQualities.reduce((value, current) => value + current, 0) / testResult.downlinkNetworkQualities.length
  );
}
  
// 確認が終了し、関連する状態がクリアされます。
uplinkClient.leave();
downlinkClient.leave();
localStream.close();
}, 15 * 1000);

TRTC機能検出ページ

現在環境の検出のために、現在、TRTCSDKを使用している場合にTRTC検出ページを使用できます。また、環境検出またはトラブルシューティングのために、レポート生成ボタンをクリックして、現在の環境のレポートを取得できます。