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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: ウェブサイトのカラースキーム ウェブサイトに適した色の選択
画像をプルする docker プル mysql完成した画像を見る Docker イメージイメージを介...
dom要素に新しい子要素を追加し、新しく追加された新しい要素がコンテナーのスコープを超えた場合は、次...
HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...
1.アルパインイメージをダウンロードする [root@DockerBrian ~]# docker ...
導入MySQL はレプリケーションを通じてストレージ システムの高可用性を実現します。現在、MySQ...
目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...
1. DockerUIの紹介DockerUI は Docker API をベースとしており、Dock...
原因: java.sql.SQLException: 列の文字列値が正しくありません: '\...
MySQLトリガーの簡単な例文法CREATE TRIGGER <トリガー名> -- トリ...
Postfix は、Linux システム上で電子メールをルーティングまたは配信するために使用される無...
目次背景仮想ファイルのインポート例書類タイプスクリプトのサポート要約する背景新しいプロジェクトで v...
Hyper-V を展開するためのハードウェア要件は次のとおりです。 64 ビット プロセッサ、具体...
序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...