ライブストリーミングクイックスタート(Electron)

最終更新日:2021-10-12 14:18:08

    適用ケース

    TRTCは、4種類の異なる入室モードをサポートしています。このうち、ビデオ通話(VideoCall)および音声通話(VoiceCall)を総称して通話モードといい、ビデオ・インタラクティブストリーミング(Live)およびボイス・インタラクティブストリーミング(VoiceChatRoom)を総称してライブストリーミングモードといいます。
    ライブストリーミングモードでのTRTCは、1つのルームで最大10万人の同時接続をサポートし、300ms未満のマイク接続遅延、1000ms未満の視聴遅延およびマイクのオン・オフのスムーズな切り替え技術を備えています。低レイテンシーインタラクティブストリーム、10万人のインタラクティブ教室、ビデオ婚活、eラーニング、リモート研修、超大規模ミーティングなどのユースケースに適しています。

    原理解析

    TRTCクラウドサービスは、「インターフェースモジュール」および「プロキシモジュール」という2種類の異なるタイプのサーバーノードから構成されています。

    • インターフェースモジュール
      この種のノードは、最も良質の回線および高性能の機器を採用しており、エンドツーエンドの低遅延マイク接続通話の処理に優れますが、単位時間当たりの費用はやや高くなります
    • プロキシモジュール
      この種のノードは、通常の回線および性能も一般的な機器を採用しており、同時進行性の高いプルストリーミング再生のニーズの処理にすぐれ、単位当たりの費用はやや低くなります。

    通話モードでは、TRTCルームのすべてのユーザーはインターフェースモジュールに割り当てられます。各ユーザーは「キャスター」に相当し、各ユーザーは随時発言でき(同時アップストリームの最大制限は50)、このためオンラインミーティングなどのユースケースに適していますが、1つのルームの人数制限は300人になります。

    サンプルコード

    Githubにログインして、このドキュメントに関連したサンプルコードを取得することができます。

    操作手順

    手順1:公式ウェブサイトのSimpleDemoクイックスタートを試行する

    初めにドキュメントSimpleDemoクイックスタート(Electron)を読み、ドキュメントのガイドに従って、提供されている公式SimpleDemoクイックスタートを実行してください。
    SimpleDemoが順調に動作する場合は、プロジェクトにおいてElectronのインストール方法をお客様が把握していることを意味します。

    • 反対に、SimpleDemoの動作に問題がある場合は、Electronのダウンロード、インストールに問題があったことが考えられます。この場合はElectronの公式サイトのインストールガイドをご参照ください。

    手順2:お客様のプロジェクトにtrtc-electron-sdkを統合する

    [手順1]](#step1) が正常に動作し、予想どおりの効果があった場合は、 Electron環境のインストール方法を把握していることを意味します。

    • 弊社の公式Demoをベースとして二次開発を行うことができ、プロジェクトの初級段階がスムーズに進みます。
    • 次のコマンドを実行して、既存のプロジェクトにtrtc-electron-sdkをインストールすることもできます。
      npm install trtc-electron-sdk --save
      

    手順3:SDKインスタンスを初期化し、イベントコールバックを監視する

    trtc-electron-sdkインスタンスの新規作成:

    import TRTCCloud from 'trtc-electron-sdk';
    let trtcCloud = new TRTCCloud();
    

    onErrorイベントの監視:

    // エラー通知は監視すべきもので、捕捉してユーザーに通知する必要があります
    let onError = function(err) {
    console.error(err);
    }
    trtcCloud.on('onError',onError);
    

    手順4:入室パラメータTRTCParamsを組み立てる

    enterRoom()インターフェースを呼び出すときはキーパラメータTRTCParamsを入力する必要があります。このパラメータに含まれる入力必須フィールドは下表に示すとおりです。

    パラメータ タイプ 説明 サンプル
    sdkAppId 数字 アプリケーションID。コンソール >【アプリケーション管理】>【アプリケーション情報】から見つけることができます。 1400000123
    userId 文字列 アルファベットの大文字、小文字(a-z、A-Z)、数字(0-9)、下線およびハイフンのみを許可。 test_user_001
    userSig 文字列 userIdを基にuserSigを計算できます。計算方法はUserSigの計算方法をご参照ください。 eJyrVareCeYrSy1SslI...
    roomId 数字 デフォルトでは文字列タイプのルームナンバーをサポートしていません。文字列タイプのルームナンバーは入室速度に影響します。文字列タイプのルームナンバーをサポートする必要がある場合は、チケットを提出してご連絡ください。 29834
    import {
    TRTCParams,
    TRTCRoleType
    } from "trtc-electron-sdk/liteav/trtc_define";

    let param = new TRTCParams();
    param.sdkAppId = 1400000123;
    param.roomId = 29834;
    param.userId = 'test_user_001';
    param.userSig = 'eJyrVareCeYrSy1SslI...';
    param.role = TRTCRoleType.TRTCRoleAnchor; // ロールを「キャスター」に設定します
    注意:

    • TRTCは、2つの同じuserIdによる同時入室をサポートしていません。同時に入室した場合、相互に干渉します。
    • 各端末のユースケースappSceneについては、統一する必要があります。統一していない場合、想定外のトラブルが生じる恐れがあります。

    手順5:キャスター端末でのカメラのプレビューとマイク集音を起動する

    1. キャスターはstartLocalPreview()を呼び出してローカルのカメラプレビューを起動することができます。SDKはカメラのアクセス許可をシステムにリクエストします。
    2. キャスター側でsetLocalViewFillMode()を呼び出して、ローカルビデオ画面の表示モードを設定することができます。
      • TRTCVideoFillMode.TRTCVideoFillMode_Fill:塗りつぶしを意味し、画面は同じ比率で拡大およびトリミングできますが、黒い縁取りは付きません。
      • TRTCVideoFillMode.TRTCVideoFillMode_Fit:適応を意味し、画面は同じ比率で縮小してスクリーンにフィットしてそのコンテンツを完全に表示しますが、黒い縁取りが付くことがあります。
    3. キャスターはsetVideoEncoderParam()インターフェースを呼び出してローカルビデオのコーデックパラメータを設定することができます。このパラメータによりルームの他のユーザーが視聴する画面の画質が決定されます。
    4. キャスターはstartLocalAudio()を呼び出してマイクをオンにします。SDKはマイクの使用をシステムにリクエストします。
    //サンプルコード:ローカルのオーディオ・ビデオストリーミングの公開
    trtcCloud.startLocalPreview(view);
    trtcCloud.startLocalAudio();
    trtcCloud.setLocalViewFillMode(TRTCVideoFillMode.TRTCVideoFillMode_Fill);

    //ローカルビデオコーデックパラメータの設定
    let encParam = new TRTCVideoEncParam();
    encParam.videoResolution = TRTCVideoResolution.TRTCVideoResolution_640_360;
    encParam.resMode = TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape;
    encParam.videoFps = 25;
    encParam.videoBitrate = 600;
    encParam.enableAdjustRes = true;
    trtcCloud.setVideoEncoderParam(encParam);

    手順6:キャスター端末により美顔エフェクトを設定する

    1. キャスターはsetBeautyStyle(style, beauty, white, ruddiness)を呼び出して、美顔エフェクトをオンにすることができます
    2. パラメータの説明:
      • style:美顔スタイルで、「スムース」または「ナチュラル」があります。スムースタイプは美肌補正がより強く、華やかなシーンに適しています。
        • TRTCBeautyStyle.TRTCBeautyStyleSmooth: スムース。美女が登場するシーンに適しており、明らかな効果が感じられます。
        • TRTCBeautyStyle.TRTCBeautyStyleNature: ナチュラル。美肌補正のアルゴリズムにより顔の細部の質感が保たれ、より自然な感じに仕上がります。
      • beauty:美顔レベル。数値の範囲は0~9です。0はオフを表し、1~9まで数値が大きくなるほど効果が高くなります。
      • white:美白レベル。数値の範囲は0~9です。0はオフを表し、1~9まで数値が大きくなるほど効果が高くなります。
      • ruddiness:肌色補正レベル。数値の範囲は0~9です。0はオフを表し、1~9までは数値が大きくなるほど効果がはっきりとします。このパラメータは、Windowsプラットフォームでは現在有効になっていません。
    // 美顔エフェクトをオン 
    trtcCloud.setBeautyStyle(TRTCBeautyStyle.TRTCBeautyStyleNature, 5, 5, 5);
    

    手順7:キャスター端末からルームを新規作成し、プッシュを開始する

    1. キャスターはTRTCParamsのフィールドroleTRTCRoleType.TRTCRoleAnchorに設定します。これは現在のユーザーのロールがキャスターであることを示します。
    2. キャスター側でenterRoom()を呼び出すと、TRTCParamsパラメータフィールドroomIdの値がルーム番号となるオーディオ・ビデオルームを作成し、appSceneパラメータを指定することができます。
      • TRTCAppScene.TRTCAppSceneLIVE:ビデオ・インタラクティブストリーミングは、スムーズなマイクのオン・オフをサポートしています。切り替え中に待機の必要がなく、キャスターの遅延は300ミリ秒未満です。10万人規模の視聴者の同時再生をサポートしつつ、再生遅延は1000ミリ秒に抑えます。ここでは、このモードを例として取り上げます。
      • TRTCAppScene.TRTCAppSceneVoiceChatRoom:ボイス・インタラクティブストリーミングは、スムーズなマイクのオン・オフをサポートします。切り替え中に待機の必要がなく、キャスターの遅延は300ミリ秒未満です。10万人規模の視聴者の同時再生をサポートしつつ、再生遅延は1000ミリ秒に抑えます。
      • TRTCAppSceneの詳細については、TRTCAppScene をご参照ください。
    3. ルームの作成が成功したら、キャスター側はオーディオ・ビデオデータのエンコードと伝送フローを開始します。それと同時に、SDKはonEnterRoom(result)イベントをコールバックします。パラメータresultが0より大きいときは入室成功を示し、具体的な数値は入室してからの消費時間になります。単位はミリ秒(ms)です。resultが0より小さいときは入室失敗を示し、具体的な数値は入室失敗のエラーコードになります。
    let onEnterRoom = function (result) {
    if (result > 0) {
    console.log(`onEnterRoom、入室成功、${result}秒を使用`);
    } else {
    console.warn(`onEnterRoom: 入室失敗 ${result}`);
    }
    };

    trtcCloud.on('onEnterRoom', onEnterRoom);

    let param = new TRTCParams();
    param.sdkAppId = 1400000123;
    param.roomId = 29834;
    param.userId = 'test_user_001';
    param.userSig = 'eJyrVareCeYrSy1SslI...';
    param.role = TRTCRoleType.TRTCRoleAnchor;
    trtcCloud.enterRoom(param, TRTCAppScene.TRTCAppSceneLIVE);

    手順8:視聴者が入室しライブストリーミングを視聴する

    1. 視聴者側はTRTCParamsのフィールドroleTRTCRoleType.TRTCRoleAudienceに設定します。これは現在のユーザーロールが視聴者であることを示します。
    2. 視聴者側でenterRoom()を呼び出すと、TRTCParamsパラメータのroomIdが示すオーディオ・ビデオルームに入室し、appSceneパラメータを指定することができます。
      • TRTCAppScene.TRTCAppSceneLIVE:ビデオ・インタラクティブストリーミング。
      • TRTCAppScene.TRTCAppSceneVoiceChatRoom:ボイス・インタラクティブストリーミング。
    3. キャスター画面の視聴:
      • 視聴者側が事前にキャスターのuserIdを知っている場合、ルームに入室成功後に直ちにキャスターのuserIdを使用してstartRemoteView(userId, view)を呼び出し、キャスターの画面を表示することができます。
      • 視聴者がキャスターのuserIdを知らない場合、視聴者は入室成功後にonUserVideoAvailable()イベント通知を受け取り、コールバック中に取得するキャスターのuserIdを使用してstartRemoteView(userId, view)を呼び出すと、キャスターの画面を表示することができます。
    <div id="video-container"></div>
    <script>
    const videoContainer = document.querySelector('#video-container');
    const roomId = 29834;
    // 入室コールバック。このコールバックは、入室に成功したときにトリガーされます。
    let onEnterRoom = function(result) {
    if (result > 0) {
    console.log(`onEnterRoom、入室成功、${result}秒を使用`);
    } else {
    console.warn(`onEnterRoom: 入室失敗 ${result}`);
    }
    };
    // このコールバックは、キャスターがカメラプッシュのオン/オフを切り替えたときにトリガーされます
    let onUserVideoAvailable = function(userId, available) {
    if (available === 1) {
    let id = `${userId}-${roomId}-${TRTCVideoStreamType.TRTCVideoStreamTypeBig}`;
    let view = document.getElementById(id);
    if (!view) {
    view = document.createElement('div');
    view.id = id;
    videoContainer.appendChild(view);
    }
    trtcCloud.startRemoteView(userId, view);
    trtcCloud.setRemoteViewFillMode(userId, TRTCVideoFillMode.TRTCVideoFillMode_Fill);
    } else {
    let id = `${userId}-${roomId}-${TRTCVideoStreamType.TRTCVideoStreamTypeBig}`;
    let view = document.getElementById(id);
    if (view) {
    videoContainer.removeChild(view);
    }
    }
    };

    trtcCloud.on('onEnterRoom', onEnterRoom);
    trtcCloud.on('onUserVideoAvailable', onUserVideoAvailable);

    let param = new TRTCParams();
    param.sdkAppId = 1400000123;
    param.roomId = roomId;
    param.userId = 'test_user_001';
    param.userSig = 'eJyrVareCeYrSy1SslI...';
    param.role = TRTCRoleType.TRTCRoleAudience; // ロールを「視聴者」に設定します
    trtcCloud.enterRoom(param, TRTCAppScene.TRTCAppSceneLIVE);
    </script>

    手順9:視聴者とキャスターとのマイク接続

    1. 視聴者はswitchRole(TRTCRoleType.TRTCRoleAnchor)を呼び出して、ロールをキャスター(TRTCRoleType.TRTCRoleAnchor)に切り替えます。
    2. 視聴者はstartLocalPreview()を呼び出してローカル画面を起動することができます。
    3. 視聴者はstartLocalAudio()を呼び出してマイクの集音をオンにします。
    //サンプルコード:視聴者マイク・オン
    trtcCloud.switchRole(TRTCRoleType.TRTCRoleAnchor);
    trtcCloud.startLocalAudio();
    trtcCloud.startLocalPreview(frontCamera, view);

    //サンプルコード:視聴者マイク・オフ
    trtcCloud.switchRole(TRTCRoleType.TRTCRoleAudience);
    trtcCloud.stopLocalAudio();
    trtcCloud.stopLocalPreview();

    手順10:キャスター間でルーム間マイク接続PKを行う

    TRTCでは、異なるオーディオ・ビデオルームにいる2人のキャスターが当初のライブストリーミングルームを退出しない場合にも、「ルーム間通話」機能によってマイク接続通話機能をプルし、「ルーム間マイク接続PK」を行うことができます。

    1. キャスターAはconnectOtherRoom()インターフェースを呼び出します。インターフェースのパラメータは現在JSONフォーマットを採用し、キャスターBのroomIduserIdの形式に組み立てた{"roomId": 978,"userId": "userB"}のパラメータをインターフェース関数に渡す必要があります。
    2. ルームを跨ぐことに成功した後、キャスターAはonConnectOtherRoom(userId, errCode, errMsg)イベントコールバックを受け取ります。同時に、2つのライブストリーミングルームのすべてのユーザーはいずれもonUserVideoAvailable()およびonUserAudioAvailable()イベント通知を受け取ります。
      例えば、ルーム「001」のキャスターAがルーム「002」のキャスターBとconnectOtherRoom()を介してルーム間通話をする場合、ルーム「001」のユーザーはキャスターBのonUserVideoAvailable(B, true)コールバックとonUserAudioAvailable(B, true)コールバックを受信します。ルーム「002」のユーザーはキャスターAのonUserVideoAvailable(A, true)コールバックとonUserAudioAvailable(A, true)コールバックを受信します。
    3. 2つのルームのユーザーは、startRemoteView(userId, view)を呼び出すことで、もう一方のルームのキャスターの画面を表示することができ、音声が自動的に再生されます。

    キャスターマイク接続のシーケンス図

    //サンプルコード:ルーム間マイク接続PK
    let onConnectOtherRoom = function(userId, errCode, errMsg) {
    if(errCode === 0) {
    console.log(`キャスター${userId}のルームとの接続に成功しました`);
    } else {
    console.warn(`他のキャスターのルームとの接続に失敗しました:${errMsg}`);
    }
    };

    const paramJson = '{"roomId": "978","userId": "userB"}';
    trtcCloud.connectOtherRoom(paramJson);
    trtcCloud.on('onConnectOtherRoom', onConnectOtherRoom);

    手順11:現在のルームから退出する

    exitRoom()メソッドを呼び出してルームを退出します。SDKは退出時にカメラやマイクなどのハードデバイスを停止またはリリースする必要があるため、退出動作は一瞬では完了しません。退出操作を完了するにはonExitRoom()コールバックを受信する必要があります。

    // 退室を呼び出した後は、onExitRoomイベントのコールバックをお待ちください
    let onExitRoom = function (reason) {
    console.log(`onExitRoom, reason: ${reason}`);
    };
    trtcCloud.exitRoom();
    trtcCloud.on('onExitRoom', onExitRoom);
    注意:

    Electronプログラムで複数の音声ビデオSDKを同時に統合した場合は、onExitRoomコールバックを受信してから、その他の音声ビデオSDKを起動してください。そうしない場合、ハード上の占有問題が生じることがあります。