【New Knowledge Lab TRTC&IM】リアルタイムインタラクティブ教室のベストプラクティス

1. Xinzhi Lab-TRTC Tencent クラウド オーディオおよびビデオ製品エクスペリエンス オフィサー プログラム

活動紹介

アクティビティ リンク: https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d
アクティビティ リンク: https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d
アクティビティ リンク: https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d

オンラインとオフラインの統合、および仮想現実の統合が加速する傾向の下で、オーディオとビデオは基本的な機能に進化し、社会の相互作用の方法を大きく変えました。将来、オーディオとビデオは、真のインターネット時代の重要な礎石として、インターネットと物理産業のデジタル革新とアップグレードを促進し続けるでしょう。
Tencent Cloud リアルタイム オーディオおよびビデオ TRTC は、Tencent のオーディオおよびビデオ技術における 20 年間の詳細な蓄積に基づいており、低遅延のインタラクティブなライブ放送と複数人のオーディオおよびビデオの 2 つのソリューションに重点を置いています。ビデオインタラクティブソリューション。
ここに画像の説明を挿入



2. 製品紹介

TRTC

TRTC (Tencent Real-Time Communication) の正式名称は、Tencent のリアルタイム オーディオおよびビデオ サービスです. そのポジショニングは、リアルタイム コミュニケーションを解決するクラウド サービスです. その主な機能はインターネットに基づいています. ライブ ブロードキャストなどのシナリオとビデオ会議、ライブ ブロードキャストに関するいくつかのシンプルな IM 機能の提供、さまざまな端末への迅速なアクセスを容易にするデモと使いやすい SDK の提供、ユーザーによるコレクションおよびレンダリング データ ソースのカスタマイズの許可。

わたしは

Instant Messaging (IM) は、QQ の基本的な IM 機能に基づいて開発されており、SDK を埋め込むだけで、チャット、会話、グループ、およびデータ管理機能を簡単に統合でき、テキスト、画像、短い音声、および短いメッセージなどのリッチ メディアを実現するのに役立ちます。ビデオ メッセージを送受信し、コミュニケーションのニーズを完全に満たします。



3. ベスト プラクティス

3.1 公式クイックスタート TRTC (Quick Running Through)

Tencent Cloud Audio and Video は公式にクイック スタート ケースを提供しています. ここでは、Web プロジェクトを使用してデモを行います.(我在前端方面也是个小白)

3.1.1 Tencent Cloud アカウントの登録

最初にTencent Cloudのアカウントを登録すると、新しいユーザーがそれを持っています好礼相赠!
登録リンク: Tencent Cloud
登録リンク: Tencent Cloud
登録リンク: Tencent Cloud

3.1.2 リアルタイムのオーディオとビデオを使用する (最初に開く必要があります)

ここに画像の説明を挿入

3.1.3 アプリケーションの作成

ここに画像の説明を挿入

ここに画像の説明を挿入

3.1.4 プロジェクトの表示(ビューキーとクイックスタート操作)

ここに画像の説明を挿入
ここに画像の説明を挿入

3.1.5 クイック スタート プロジェクトの実行 (静的ページ)

ここに画像の説明を挿入
フォルダー内の Index.html ファイルを開きます
ここに画像の説明を挿入
ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここまでで、TRTC の Web クイック スタート プロジェクトを正常に実行できました。同時に、パラメーターを設定して、テスト用に OSS ストレージ バケットにホストすることもできます。







3.2 TRTC&IM を使用してリアルタイムのインタラクティブな教室を構築する

流行により、全国のほとんどの教師と生徒がオンライン授業を勉強しています. 同時に、しばらく前 (2022 年 11 月 9 日) に、オンライン授業への侵入という非常に悪い事件があったので、ここで、 TRTC&IM を使用して、教師と生徒のためのオンラインでリアルタイムのインタラクティブな教室を構築するプロジェクト。Tencent インスタント メッセージング IMチームから提供された

3.2.1 プロジェクト紹介 (trtc-education-electron)

TRTC Real-time Interactive Classroom は、1 人の教師が複数の生徒にオンライン クラスを教えることをサポートするオープンソースのオンライン教室ソフトウェアであり、クラスは同時に最大 300 のオンライン リアルタイム インタラクションをサポートします。バイパス ライブ ブロードキャストと CDN ストリーミング サービスを有効にすると、数万人がオンラインで視聴できるようになります。このソフトウェアは、Tencent Real-Time Communication (TRTC)、Tencent Instant Message (TIM)、Electron、React、および Webpack に基づいて構築されています。

プロジェクトの公式アドレス: https://github.com/TencentCloud/trtc-education-electron

GitCode プロジェクトのアドレス (TIMService.ts は修正済み) バグ: https://gitcode.net/fly1574/trtc-education-electron-fixed



3.2.2 IM の Web 側での同時オンライン ユーザー数の設定

IM コンソール: https://console.cloud.tencent.com/im
ここに画像の説明を挿入
ここに画像の説明を挿入


3.2.3 プロジェクトのビルド (クラウドサーバーを使用)

ここではクラウド サーバーが使用されます (カメラ、マイクなし)。読者はローカルの win コンピューターを使用して、自分の状況に応じて直接開発することもできます。

3.2.3.1 ビルド環境

ソフトウェア バージョン
NodeJS v16.13.1
ギット 2.25.1
1.22.15
vscode 1.73.1

3.2.3.2 クローンコード

git clone https://github.com/TencentCloud/trtc-education-electron.git

ここに画像の説明を挿入


3.2.3.3 AppID と SK の設定 (忘れずに保存してください)

修改项目中的配置文件
src/main/config/generateUserSig.js

ここに画像の説明を挿入

3.2.3.4公式のバグを修正

このデモを実行すると、まだ小さなバグがありました.2 つ見つけたので、Tencent のオンライン サポートにもフィードバックを送りました.彼らはコードを更新すると言いましたが、ブログ投稿が公開されたとき、github のコード バグはまだ残っていました.修正されていないため、手動で追加する必要があります.toString()

# 修改文件 
# trtc-education-electron\src\renderer\core\room-core\TIMService.ts
修改该文件的186238行左右,如下

$ 修改前
    this.groupID = groupID;
    const realGroupID = groupID;
$ 修改后
    this.groupID = groupID.toString();
    const realGroupID = groupID.toString();

ここに画像の説明を挿入
ここに画像の説明を挿入

3.2.3.5 インストールの依存関係

$ cd trtc-education-electron/
# 安装yarn
$ corepack enable
# 查看yarn版本
$ yarn --version
# 指定 npm 国内镜像
$ npm config set registry=https://registry.npm.taobao.org/
# 指定 Electron 的国内镜像地址
$ npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ 
# 安装依赖
$ yarn

ここに画像の説明を挿入

3.2.3.6 テストとパッケージング

クラウド サーバーにはカメラとマイクがないため、ここでのテストでは失敗、直接パッケージ化してから、生成された .exe ファイルをテスト用にローカル コンピューターに直接インストールします。

# 如果需要先测试
$ yarn start

# 直接打包
$ yarn package

ここに画像の説明を挿入

3.2.4 オンライン教室運営

プログラムが実行されているホスト コンピューターのカメラとマイクのアクセス許可を最初に有効にする必要があります。

教師がクラスを作成する
ここに画像の説明を挿入

ここに画像の説明を挿入

学生がプログラムをインストールしたら、クラスに参加します
ここに画像の説明を挿入



4.まとめ

TRTC を使用したことがない初心者でも、公式のデモ ケースをすばやく実行するのは非常に簡単です。後者の TRTC&IM プロジェクトではtrtc-education-electron リアルタイムオンライン教室、それは非常に単純ですが、公式が2つの小さなバグを発見するのを助けることはまだ非常に予想外です.


全体として、TRTC を使い始めるのはまだ非常に速く、拡張性も非常に高く、もう 1 つのポイントは、Tencent Cloud Audio and Video のオンライン テクニカル サポート チームの対応が非常に速いことです。優れた製品は、優れた技術サポートと切り離すことはできません!

おすすめ

転載: blog.csdn.net/fly1574/article/details/127987608