RTC Engine
  • Overview
  • Web
    • Demo のクイックスタート
    • SDK クイックスタート
    • 基本機能
      • 画面共有
      • ライブブロードキャスト
      • メディアデバイス
      • 音量
      • エンコーディング構成ファイルの設定
      • ネットワーク品質の検出
      • 検出能力
    • 高度な機能
      • AI ノイズ低減の有効化
      • ミキシングを有効にします
      • ウォーターマークを有効にします
      • Enable Virtual Background
      • 美顔とエフェクトの有効化
      • データメッセージ
      • キャプチャーとレンタリングのカスタマイズ
    • インターフェースリスト
    • リリース説明
    • 対応するプラットホーム
    • Web に関するよくあるご質問
      • 複数人でのビデオ通話を最適化
      • 制限付き自動再生の処理
      • ファイアウォール制限への対応
      • その他
  • Android
    • Run Sample Code
    • インテグレーション
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • ネットワーク品質のテスト
    • キャプチャーとレンタリングのカスタマイズ
    • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • エラーコード
    • ソリューション
      • リアルタイムコーラス (TUIKaraoke)
        • クイックインテグレーション
        • 実施ステップ
        • 曲の同期
        • 歌詞の同期
        • 音声同期
        • ミクスストリーミングソリューション
        • TRTCKaraoke 関連インターフェース
        • よくあるご質問
    • リリース説明
  • iOS
    • Run Sample Code
    • インテグレーション
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • ネットワーク品質のテスト
    • キャプチャーとレンタリングのカスタマイズ
    • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • ErrorCode
    • ソリューション
      • クイックインテグレーション
      • 実施ステップ
      • 曲の同期
      • 歌詞の同期
      • 音声同期
      • ミクスストリーミングソリューション
      • TRTCKaraoke 関連インターフェース
      • よくあるご質問
    • リリース説明
  • macOS
    • Run Sample Code
    • インテグレーション
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • ハードウェアデバイスのテスト
    • ネットワーク品質のテスト
    • キャプチャーとレンタリングのカスタマイズ
    • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • ErrorCode
      • リリース説明
    • リリース説明
  • Windows
    • Run Sample Code
    • インテグレーション
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. ビデオ品質の設定
      • 10. ビデオの回転
    • ハードウェアデバイスのテスト
    • ネットワーク品質のテスト
    • キャプチャーとレンタリングのカスタマイズ
    • オーディオキャプチャーと再生のカスタマイズ
    • 顧客インターフェース
      • Overview
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • タイプ定義
      • 廃棄インタフェース
      • エラーコード
    • リリース説明
  • Electron
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • 顧客インターフェース
      • Overview
      • エラーコード
  • Flutter
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
      • 3. ルームに入る
      • 4. オーディオ・ビデオストリームのサブスクリプション
      • 5. オーディオ・ビデオストリームのリリース
      • 6. ルームからの退出
      • 7. ネットワーク品質の検出
      • 8. 画面共有の有効化
      • 9. パソコンサウンドの共有
      • 10. ビデオ品質の設定
      • 11. ビデオの回転
    • 顧客インターフェース
      • Overview
      • エラーコード
  • Unity
    • インテグレーション
      • 1. インターフェースの例
      • 2. SDK のインポート
    • 顧客インターフェース
      • Overview
      • エラーコード
  • QT
    • インテグレーション
      • 1. SDK のインポート
  • Overview
    • Overview
  • 概念
  • Features
  • 性能統計
  • 価格
    • 無料時間
    • RTC-Engine パッケージ
    • サブスクリプションパッケージ期間の課金説明
    • 従量課金
      • 音声・ビデオ時間の課金説明
      • クラウド録画の課金説明
      • ミックストランスコーディングとCDNへのリレーの課金説明
  • よくあるご質問
    • 初心者のよくあるご質問
    • マイグレーションガイド
      • Twilio Video から TRTC への移行
      • 課金
      • Features
      • UserSig
      • ファイアウォール制限
      • インストールパッケージを削減する方法
      • TRTCCalling Web 関連
      • オーディオ・ビデオの品質
      • その他
RTC Engine

Demo のクイックスタート

ここでは、主にTencent Cloud TRTC Web SDK Demoを素早く実行する方法をご紹介します。

準備作業

TRTC Web SDK Demoを実行する前に理解すべきの事項。

サポートするプラットフォーム

TRTC Web SDKはWebRTCに基づき実現され、現在、デスクトップとモバイル端末の主流ブラウザをサポートしています。詳細なサポートレベルの表については、サポートしているプラットフォームをご参照ください。 お客様のユースケースは対応表に記載されていない場合は、TRTC Web SDK機能テスト画面を開けて、WebViewなど、現在の環境がWebRTCのすべての機能をサポートしているかどうかをチェックすることができます。
お客様のユースケースが主に教育シーンである場合は、教師用端末ではElectronソリューションの使用をお勧めし、大小2チャネル画面、よりフレキシブルな画面共有方法およびより強力な弱ネットワークリカバリー機能をサポートしています。

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

ブラウザセキュリティポリシーの制限により、WebRTC機能を使用したページへのアクセスプロトコルには厳しい要件があります。以下の表を参照してアプリケーションの開発とデプロイを行ってください。
ユースケース
プロトコル
受信(再生)
送信(マイク・オン)
画面共有
備考
本番環境
HTTPSプロトコル
サポートあり
サポートあり
サポートあり
推奨
本番環境
HTTPプロトコル
サポートあり
サポートなし
サポートなし
-
ローカル開発環境
サポートあり
サポートあり
サポートあり
**推奨 **
ローカル開発環境
サポートあり
サポートあり
サポートあり
-
ローカル開発環境
http://[ローカルマシンIP]
サポートあり
サポートなし
サポートなし
-
ローカル開発環境
file:///
サポートあり
サポートあり
サポートあり
-

ファイアウォールの制限

TRTC Web SDKを使用する際、ユーザーはファイアウォールの制限によって正常にオーディオビデオ通話が行えない可能性があります。ファイアウォール制限の対応関連をご参照の上、対応するポートおよびドメイン名をファイアウォールのホワイトリストに追加してください。

前提条件

Tencent Cloudの登録によりアカウントを登録している。

操作手順

手順1:新規アプリケーションの作成

1. TRTCコンソールにログインし、【アプリケーション管理】を選択します。
2. 【アプリケーションの作成】をクリックし、APIExampleなどのアプリケーション名を入力します。すでにアプリケーションを作成している場合は、【既存のアプリケーションを選択】にチェックを入れ、【次のステップ】をクリックします。


ステップ2:サンプルコードのダウンロード

1. UIなしの統合を選択後、ご自身の業務プラットフォームに合わせて、Githubで対応するプラットフォームのサンプルコードをダウンロードします。
2. ダウンロード完了後、【次のステップ】をクリックします。


ステップ3:プロジェクトの設定

1. サンプルプロジェクトのクイックスタート段階で【デバッグ段階】を選択します。その後、ご自身のSDKAppID、Secret keyを記録しておきます。

2. ダウンロードしたサンプルコードを開き、図の指示に従って対応するファイルの場所を探し、ご自身のSDKAppID、Secret keyに変更します。プロジェクトの設定はこれで完了です。【次のステップ】をクリックしてください。
explain
ここで言及したUserSigの作成法は、クライアントコードにSECRETKEYを設定しますが、この手法のSECRETKEYは逆コンパイルによって逆クラッキングされやすく、キーがいったん漏洩すると、攻撃者はTencent Cloudトラフィックを盗用できるようになります。そのためこの手法は、ローカルのTRTC-API-Exampleクイックスタートおよび機能デバッグにのみ適しています
UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供する方法となります。 UserSigが必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。

よくあるご質問

1. クライアントエラーの発生:“RtcError: no valid ice candidate found”にはどう対処すればよいでしょうか。

このエラーの発生は、TRTC Web SDKがSTUNホールパンチングに失敗したことを意味します。ファイアウォール制限の対応関連に基づいてファイアウォール設定をチェックしてください。

2. クライアントエラーの発生:「RtcError: ICE/DTLS Transport connection failed"」または 「RtcError: DTLS Transport connection timeout」にはどう対処すればよいでしょうか。

このエラーの発生は、TRTC Web SDKがメディア伝送チャネルの確立の際に失敗したことを意味します。ファイアウォール制限の対応関連に基づいてファイアウォール設定をチェックしてください。

3. 10006 error が出現したときの対処方法は?

「Join room failed result: 10006 error: service is suspended,if charge is overdue,renew it」が発生した場合は、Tencent Real-Time Communicationアプリケーションのサーバー状態が正常かどうかご確認ください。 TRTCコンソールにログインし、作成したアプリケーションをクリックし、アプリケーション情報をクリックすると、アプリケーション情報パネルでサービスステータスを確認できます。

explain
その他のよくあるご質問については、Web端末に関するご質問をご参照ください。