Web
ここでは、主にTencent Cloud TRTC Web SDK をプロジェクトに素早く統合する方法を紹介します。
サポートするプラットフォーム
WebRTCのテクノロジーはGoogleが初めて提唱し、Chrome、Edge、Firefox、Safari、Operaなどのブラウザですべてサポートされています。Tencent Cloud TRTC Web SDKはWebRTCパッケージをベースにしたものです。Tencent Cloud TRTC Web SDKのサポートの詳細については、サポートするプラットフォームをご参照ください。
ユーザーのユースケースが主に教育シーンである場合は、教師用端末では安定性がより優れたElectron ソリューションの使用をお勧めし、大小2チャネル画面、よりフレキシブルなスクリーンシェアリング方法およびより強力な弱ネットワークリカバリー能力をサポートしています。
Tencent Cloud TRTC Web SDKの詳細なサポートレベルの表については、サポートしているプラットフォームをご参照ください。
ご注意：
ブラウザでTRTC Web SDK機能テスト画面を開けば、現在のブラウザがWebRTCのすべての機能をサポートしているかどうかチェックすることができます。例:WebViewなどのブラウザ環境。
H.264 の著作権上の制限により、Huawei Chrome 88 より前のバージョンは H264 エンコーディングを使用できません（つまり、ストリームをプッシュできません）。HuaweiデバイスのChromeブラウザで TRTC Web SDK を使用してストリームをプッシュするには、チケットを提出 し、VP8コーデックの有効化を申請してください。
URLドメイン名プロトコルの制限
ユースケース | プロトコル | 受信（再生） | 送信（マイク・オン） | 画面共有 | 備考 |
本番環境 | HTTPSプロトコル | サポートあり | サポートあり | サポートあり | 推奨 |
本番環境 | HTTPプロトコル | サポートあり | サポートなし | サポートなし | |
ローカル開発環境 | サポートあり | サポートあり | サポートあり | 推奨 | |
ローカル開発環境 | サポートあり | サポートあり | サポートあり | | |
ローカル開発環境 | http://[ローカルマシンIP] | サポートあり | サポートなし | サポートなし | |
ローカル開発環境 | file:/// | サポートあり | サポートあり | サポートあり | |
ファイアウォールの制限
TRTC Web SDKを使用する時、ユーザはファイアーフォールの制限でオーディオビデオ通話を利用できない可能性がありますので、ファイアウォール制限への対応 を参照し、関連するポートとドメイン名をファイアウォールのホワイトリストに追加してください。
TRTC Web SDKの統合
NPM統合
1. プロジェクトにSDKパッケージをインストールするには、npmを使用する必要があります。
npm install trtc-js-sdk --save
2. プロジェクトのスクリプトでモジュールを導入します。
import TRTC from 'trtc-js-sdk';
Script統合
下記のコードをWebページに追加するだけで完了です。
<script src="trtc.js"></script>
関連リソース
初期化フローおよびAPIの使用法の詳細については、以下のガイドをご参照ください。
機能 | Sample Codeガイド |
基本的なオーディオビデオ通話 | |
インタラクティブライブストリーミング | |
カメラおよびマイクの切り替え | |
ローカルビデオのプロパティの設定 | |
ローカルオーディオまたはビデオの動的な停止と開始 | |
画面共有 | |
音量計測 | |
ユーザー定義キャプチャとカスタマイズ再生レンダリング | |
ルーム内アップリンクユーザー数の制限 | |
バックグラウンドミュージックと効果音の実装ソリューション | |
通話前の環境およびデバイステスト | |
通話前のネットワーク品質テスト | |
デバイス挿抜動作チェック | |
CDNへのプッシュの実現 | |
ビッグスモールストリームの伝送を有効にする | |
美顔を有効にする | |
ウォーターマークを有効にする | |
ルーム間マイク接続の実現 |
説明：