Vue + webrtc (Tencent Cloud) Praxis der Implementierung der Live-Broadcast-Funktion
1. Live-Übertragungseffekt1. PC-Seite
2. Handy, Mobiltelefon
2. Schritte zum Starten des Live-Streamings2.1 Einführung des Tencent-Webskripts (Fast Live)Das Skript muss im Hauptteil von index.html eingeführt werden
<body style="padding:0;margin:0">
//Tencent Live-Streaming-Skript<script src="https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.2.min.js" charset="utf-8"></script>
<keinSkript>
<strong>Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %> funktioniert nicht richtig, wenn JavaScript nicht aktiviert ist. Bitte aktivieren Sie es, um fortzufahren.</strong>
</noscript>
<div id="app"></div>
<!-- erstellte Dateien werden automatisch eingefügt -->
</body>
2.2 Fügen Sie der Schnittstelle, in der eine Live-Übertragung erforderlich ist, einen Videocontainer hinzu (nach dem Start der Live-Übertragung wird der Speicherort des Videos angezeigt).Sie können es direkt in der .vue-Datei verwenden. Sie können den Stil des Containers selbst anpassen, aber die ID kann nicht verworfen werden (Sie können auch den Namen verwenden). <div id="id_local_video" style="margin:0 auto;width:80%;display:flex;align-items:center;justify-content:center;"></div> 2.3 Erstellen Sie ein Live-Übertragungsobjekt und starten Sie die Live-ÜbertragungKlicken Sie auf die Schaltfläche „Live starten“ und schreiben Sie die Methode in die entsprechende Methode. Hinweis: Der Protokollheader rtmp in der Push-Stream-Adresse muss in webrtc geändert werden, und Chinesisch darf in der Push-Stream-Adresse nicht erscheinen, da sonst auch bei erfolgreichem Push-Stream ein Fehler gemeldet wird.
//Erstelle die Variable des Videoobjekts livePusher. Ich habe sie in data geschrieben und nicht mehr kopiert. Du kannst die Variable auch direkt in den Methoden this.livePusher = new TXLivePusher() deklarieren.
dies.livePusher.setRenderView('id_local_video');
// Audio- und Videostream einstellen this.livePusher.setVideoQuality('720p');
// Audioqualität festlegen this.livePusher.setAudioQuality('standard');
// Passen Sie die Bildrate an this.livePusher.setProperty('setVideoFPS', 25);
// Liveübertragung starten // Kamera öffnen this.livePusher.startCamera();
// Mikrofon einschalten this.livePusher.startMicrophone();
//Hier habe ich das Streaming um 4 Sekunden verzögert. Die Streaming-Adresse muss vom Backend empfangen werden.
setTimeout(() => { this.livePusher.startPush(Streaming-Adresse);
}, 4000);
2.4 Live-Übertragung beendenVerwenden Sie es einfach in der entsprechenden Methode. Beachten Sie, dass beim Schließen der Live-Übertragung der Videocontainer zerstört werden muss.
// 1. Pushen des Streams stoppen this.livePusher.stopPush();
// 2. Schließen Sie die Kamera this.livePusher.stopCamera();
// 3. Schalten Sie das Mikrofon aus. this.livePusher.stopMicrophone();
// 4. Zerstöre das Containerobjekt this.livePusher.destroy(); Damit ist dieser Artikel über die praktische Umsetzung der Live-Übertragungsfunktion mit vue+webrtc (Tencent Cloud) abgeschlossen. Weitere relevante Inhalte zur Live-Übertragung von vue+webrtc Tencent Cloud finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: DIV-Hintergrund, halbtransparenter Text, nicht durchscheinender Stil
>>: Farbschemata für Websites Die richtigen Farben für Ihre Website auswählen
Artikel empfehlen
Detaillierte Erklärung zum Bereitstellen von H5-Spielen auf einem Nginx-Server
Auf dem Weg zur selbstlernenden Spieleentwicklung...
Detaillierte Erklärung der Javascript-Grundlagenschleife
Inhaltsverzeichnis Zyklus für für-in für-von währ...
MySQL 8.0.21 Installationstutorial mit Bildern und Text
1. Laden Sie den Download-Link herunter Klicken S...
Detaillierte Erklärung des Prinzips und der Funktion des Vue-Listen-Rendering-Schlüssels
Inhaltsverzeichnis Das Prinzip und die Funktion d...
Einführung in die Verwendung von MySQL-Quellbefehlen
Inhaltsverzeichnis Gedanken, die durch eine Onlin...
Detaillierte Erklärung des Grid-Layouts und des Flex-Layouts der Anzeige in CSS3
Das Gitterlayout weist einige Ähnlichkeiten mit d...
So verwenden Sie den Flat Style zum Gestalten von Websites
Das Wesen einer flachen Website-Struktur liegt in...
MySQL Serie 14 MySQL Hochverfügbarkeitsimplementierung
1. MHA Durch die Überwachung des Masterknotens ka...
Node-Skript realisiert automatische Anmelde- und Lotteriefunktion
Inhaltsverzeichnis 1. Einleitung 2. Vorbereitung ...
Ein Artikel zum schnellen Verständnis des Lebenszyklus und der Hook-Funktionen von Angular und Ionic
Inhaltsverzeichnis Eckig erreichen Aufrufreihenfo...
Eine kurze Diskussion über Front-End-Netzwerk, JavaScript-Optimierung und Entwicklungstipps
1. Netzwerkoptimierung YSlow hat 23 Regeln. Diese...
Designtheorie: Lesbarkeit und Verständlichkeit von Texten
<br />Vor nicht allzu langer Zeit habe ich a...
Deaktivieren der AutoVervollständigen-Funktion im Eingabefeld
Jetzt können wir ein Eingabeattribut namens „Autov...
Nach der Installation von Apache kann der Dienst nicht gestartet werden (beim Starten des Dienstes wird der Fehlercode 1 angezeigt).
Inhaltsverzeichnis 1. Fehlermeldung 2. Fehlerursa...
Tutorial zum Bereitstellen mehrerer Server mit WebAPI und Konfigurieren des Nginx-Lastausgleichs
01PARTCoreWebApi Tutorial Lokale Demonstrationsum...