Vue+webrtc (Tencent Cloud) ライブブロードキャスト機能の実装実践

2.1 Tencent Web（高速ライブ）スクリプトの紹介
2.2 ライブ放送が必要なインターフェースにビデオコンテナを追加します（ライブ放送を開始すると、ビデオの場所が表示されます）
2.3 ライブ放送オブジェクトを作成し、ライブ放送を開始する
2.4 ライブ放送を終了する

1. 生放送効果

1. PC側

醜すぎる、顔がない

2. モバイル

ここに画像の説明を挿入

2. ライブストリーミングを開始する手順

2.1 Tencent Web（高速ライブ）スクリプトの紹介

スクリプトはindex.htmlの本文に導入する必要があります。

 <body style="padding:0;margin:0">
    //Tencent ライブストリーミング スクリプト<script src="https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.2.min.js" charset="utf-8"></script>
    <スクリプトなし>
      <strong>申し訳ありませんが、JavaScript が有効になっていないと <%= htmlWebpackPlugin.options.title %> は正しく動作しません。続行するには JavaScript を有効にしてください。</strong>
    </noscript>
    <div id="アプリ"></div>
    <!-- ビルドされたファイルは自動的に挿入されます -->
  </本文>

2.2 ライブ放送が必要なインターフェースにビデオコンテナを追加します（ライブ放送を開始すると、ビデオの場所が表示されます）

.vue ファイルで直接使用できます。コンテナのスタイルを自分で調整できますが、id は破棄できません (name も使用できます)

<div id="id_local_video" style="margin:0 auto;width:80%;display:flex;align-items:center;justify-content:center;"></div>

2.3 ライブ放送オブジェクトを作成し、ライブ放送を開始する

ライブ開始ボタンをクリックし、対応するメソッドにメソッドを記述します。注: プッシュストリームアドレスのプロトコルヘッダー rtmp を webrtc に変更する必要があり、プッシュストリームアドレスに中国語が表示されてはなりません。そうしないと、プッシュストリームが成功してもエラーが報告されます。

      //ビデオオブジェクトの livePusher 変数を作成します。これをデータに書き込んでコピーしなくなりました。メソッド内で直接変数を宣言することもできます。this.livePusher = new TXLivePusher()
      ライブプッシャーのレンダリングビューを設定します。
      // オーディオとビデオのストリームを設定します this.livePusher.setVideoQuality('720p');
      // オーディオ品質を設定します this.livePusher.setAudioQuality('standard');
      // フレームレートをカスタマイズします this.livePusher.setProperty('setVideoFPS', 25);   
        
      // ライブ放送を開始します // カメラを開きます this.livePusher.startCamera();
      // マイクをオンにします this.livePusher.startMicrophone();    
      //ここではストリーミングを 4 秒遅延させました。ストリーミング アドレスはバックエンドから受信する必要があります。
       setTimeout(() => { this.livePusher.startPush(ストリーミングアドレス);
       }, 4000);

ストリーミングの成功

2.4 ライブ放送を終了する

対応するメソッドで使用するだけです。ライブブロードキャストを終了するときは、ビデオコンテナーを破棄する必要があることに注意してください。

      // 1. ストリームのプッシュを停止します this.livePusher.stopPush();
      // 2. カメラを閉じる this.livePusher.stopCamera();
      // 3. マイクをオフにします this.livePusher.stopMicrophone();      
      // 4. コンテナ オブジェクトを破棄します。this.livePusher.destroy();

これで、vue+webrtc (Tencent Cloud) によるライブブロードキャスト機能の実装の実践に関するこの記事は終了です。より関連性の高い vue+webrtc Tencent Cloud ライブブロードキャストコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: