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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: ウェブサイトのカラースキーム ウェブサイトに適した色の選択
目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...
序文昨日、小さなプロジェクトを書いていたときに、txt ドキュメントのデータを mysql データベ...
導入yum (Yellow dog Updater, Modified) は、Fedora、RedH...
Ubuntu 18のインストール中に、USBディスクからUbuntuのインストールを開始すると、mm...
Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...
方法1: npm経由でプラグインをインストールする1. npm install vue-print-...
序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...
HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...
1. クラスター化インデックステーブル データはインデックスの順序で保存されます。つまり、インデック...
目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...
コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...
Kubernetes は面白そうだったので(ギリシャ人なら名前に問題があると思うでしょうが)、ずっと...
Array の filter、find、some、reduce メソッドの違いを区別し、使用シナリオ...
この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...
目次01 問題の説明02 ソリューション1. 他のスレーブライブラリを見つけてすぐに置き換える2. ...