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

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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueのライブ放送機能の詳しい説明
  • vue-video-player を使用してライブ放送を実現する方法
  • vue-video-player はリアルタイムのビデオ再生を実装します (監視機器 - rtmp ストリーム)
  • 2 分で Vue リアルタイム ライブ ブロードキャスト システムを実装するためのサンプル コード
  • Vueはビデオストリームを読み込み、ライブブロードキャスト機能を実装します

<<:  DIV 背景半透明テキスト非半透明スタイル

>>:  ウェブサイトのカラースキーム ウェブサイトに適した色の選択

推薦する

Docker で MySQL をインストールし、リモート接続を実装するチュートリアル

画像をプルする docker プル mysql完成した画像を見る Docker イメージイメージを介...

HTML における DOM 要素のスクロールバースクロール制御の詳細な説明

dom要素に新しい子要素を追加し、新しく追加された新しい要素がコンテナーのスコープを超えた場合は、次...

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...

alpineをベースにdockerfileで作成したクローラーScrapyイメージの実装

1.アルパインイメージをダウンロードする [root@DockerBrian ~]# docker ...

MySQL の準同期レプリケーションについての簡単な説明

導入MySQL はレプリケーションを通じてストレージ システムの高可用性を実現します。現在、MySQ...

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

この記事では、Vue 3.0 レスポンシブの使い方を説明します。

目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...

Docker可視化管理ツールであるDocker UIの使用

1. DockerUIの紹介DockerUI は Docker API をベースとしており、Dock...

MySQLに絵文字表現を保存する詳細な手順

原因: java.sql.SQLException: 列の文字列値が正しくありません: '\...

MySQLトリガーの詳細な説明と簡単な例

MySQLトリガーの簡単な例文法CREATE TRIGGER <トリガー名> -- トリ...

CentOS 8 に Postfix メール サーバーをインストールして設定する方法

Postfix は、Linux システム上で電子メールをルーティングまたは配信するために使用される無...

Viteは仮想ファイルの実装を導入します

目次背景仮想ファイルのインポート例書類タイプスクリプトのサポート要約する背景新しいプロジェクトで v...

デスクトップ仮想化を実現するために Hyper-V を展開する手順 (グラフィック チュートリアル)

Hyper-V を展開するためのハードウェア要件は次のとおりです。 64 ビット プロセッサ、具体...

NodeJSとブラウザにおけるこのキーワードの違い

序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...