tencent cloud

Tencent Real-Time Communication

お知らせ・リリースノート
製品アップデート情報
Tencent Cloudオーディオビデオ端末SDKの再生アップグレードおよび承認チェック追加に関するお知らせ
TRTCアプリケーションのサブスクリプションパッケージサービスのリリースに関する説明について
製品の説明
製品概要
基礎概念
製品の機能
製品の強み
ユースケース
性能データ
購入ガイド
Billing Overview
無料時間の説明
Monthly subscription
Pay-as-you-go
TRTC Overdue and Suspension Policy
課金に関するよくあるご質問
Refund Instructions
初心者ガイド
Demo体験
Call
コンポーネントの説明(TUICallKit)
Activate the Service
Run Demo
クイック導入
オフライン通知
Conversational Chat
クラウドレコーディング(TUICallKit)
AI Noise Reduction
インターフェースのカスタマイズ
Calls integration to Chat
Additional Features
No UI Integration
Server APIs
Client APIs
Solution
ErrorCode
公開ログ
よくある質問
ライブ配信
Billing of Video Live Component
Overview
Activating the Service (TUILiveKit)
Demo のクイックスタート
No UI Integration
UI Customization
Live Broadcast Monitoring
Video Live Streaming
Voice Chat Room
Advanced Features
Client APIs
Server APIs
Error Codes
Release Notes
FAQs
RTC Engine
Activate Service
SDKのダウンロード
APIコードサンプル
Usage Guidelines
クライアント側 API
高度な機能
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
コンソールガイド
アプリケーション管理
使用統計
監視ダッシュボード
開発支援
Solution
Real-Time Chorus
よくあるご質問
課金関連問題
機能関連
UserSig関連
ファイアウォールの制限の対応関連
インストールパッケージの圧縮に関するご質問
AndriodおよびiOS関連
Web端末関連
Flutter関連
Electron関連
TRTCCalling Web関連
オーディオビデオ品質関連
その他のご質問
旧バージョンのドキュメント
TUIRoom(Web)の統合
TUIRoom (Android)の統合
TUIRoom (iOS)の統合
TUIRoom (Flutter)の統合
TUIRoom (Electron)の統合
TUIRoom APIのクエリー
クラウドレコーディングと再生の実現(旧)
Protocols and Policies
セキュリティコンプライアンス認証
セキュリティホワイトペーパー
情報セキュリティの説明
Service Level Agreement
Apple Privacy Policy: PrivacyInfo.xcprivacy
TRTC ポリシー
プライバシーポリシー
データ処理とセキュリティ契約
用語集

Web

PDF
フォーカスモード
フォントサイズ
最終更新日: 2024-07-19 15:29:07

内容紹介

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

ブラウザ環境の確認

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ライブラリ

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

(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です。テストにより、
ハードウェアアクセラレーションを有効にすると、このインターフェイスはWindowsで約2秒、Macで約10秒かかります。
ハードウェアアクセラレーションを無効にすると、このインターフェイスは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検出ページを使用できます。また、環境検出またはトラブルシューティングのために、レポート生成ボタンをクリックして、現在の環境のレポートを取得できます。

ヘルプとサポート

この記事はお役に立ちましたか?

フィードバック