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 背景半透明テキスト非半透明スタイル

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

推薦する

ECMAScript6 におけるマップマッピングの基本概念と一般的な方法

目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...

Linux で txt を mysql にインポートする方法

序文昨日、小さなプロジェクトを書いていたときに、txt ドキュメントのデータを mysql データベ...

Linux yum パッケージ管理方法

導入yum (Yellow dog Updater, Modified) は、Fedora、RedH...

win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する

Ubuntu 18のインストール中に、USBディスクからUbuntuのインストールを開始すると、mm...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

Vue印刷機能を実装する2つの方法の概要

方法1: npm経由でプラグインをインストールする1. npm install vue-print-...

Linux仮想マシンの静的IPアドレスを構成するための手順を完了します

序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...

HTML ヘッドタグの詳細な紹介

HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...

MySQLのクラスタ化インデックスと非クラスタ化インデックスの詳細な説明

1. クラスター化インデックステーブル データはインデックスの順序で保存されます。つまり、インデック...

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...

メタを使用してトラフィックキャッシュをキャンセルし、ページにアクセスするたびにページを更新して簡単にデバッグできるようにします。

コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...

Kubernetes (k8s) 入門

Kubernetes は面白そうだったので(ギリシャ人なら名前に問題があると思うでしょうが)、ずっと...

js配列のfind、some、filter、reduceの違いの詳細な説明

Array の filter、find、some、reduce メソッドの違いを区別し、使用シナリオ...

Linux環境でのActiveMQ導入方法の詳しい説明

この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...

MySQL マスタースレーブレプリケーション切断の一般的な修復方法

目次01 問題の説明02 ソリューション1. 他のスレーブライブラリを見つけてすぐに置き換える2. ...