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
Beispiel für das Hinzufügen und Löschen von Bereichspartitionen in MySQL 5.5
einführen Die RANGE-Partitionierung basiert auf e...
Detaillierte Erklärung des Vue-Slots
1. Funktion : Ermöglicht der übergeordneten Kompo...
Sollte ich beim Erstellen einer Website die Kodierung UTF-8 oder GB2312 verwenden?
Beim Öffnen ausländischer Websites werden häufig ...
Grundlegende Ideen und Codes zur Implementierung von Videoplayern in Browsern
Inhaltsverzeichnis Vorwort Zusammenfassung der Au...
Eine kurze Analyse des Ereignisdelegierungsmechanismus und des tiefen und flachen Kopierens in JavaScript
Inhaltsverzeichnis 1. Veranstaltungsdelegation Er...
Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)
Schauen wir uns zunächst einige einfache Daten an:...
30 kostenlose hochwertige englische Ribbon-Schriftarten
30 kostenlose englische Ribbon-Schriftarten in hoh...
Fehlerbehebung bei hohem Speicherverbrauch von NodeJs, tatsächlicher Kampfrekord
Vorwort Dies ist eine Untersuchung, die durch die...
So ändern Sie den MySQL-Zeichensatz utf8 in utf8mb4
Wenn für MySQL 5.5 der Zeichensatz nicht festgele...
Benutzerdefinierte Vue-Komponenten verwenden Ereignismodifikatoren, um auf den Pit-Rekord zu treten
Vorwort Als ich heute eine selbstgeschriebene Kom...
Linux verwendet Bond, um zwei Netzwerkkarten zu implementieren und einen einzelnen IP-Beispielcode zu binden
Um eine hohe Verfügbarkeit des Netzwerks zu gewäh...
Viewport-Parameter für mobile Browser (Web-Frontend-Design)
Mobile Browser platzieren Webseiten in einem virtu...
MySQL-Beispiel-Tutorial: Ergebnisse auswählen, um ein Update durchzuführen
1. Einzelne Tabellenabfrage -> Update UPDATE T...
Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL
Als ich MySQL konfiguriert habe, habe ich die Sta...
Installationsprozess von MySQL5.7.22 auf dem Mac
1. Verwenden Sie das Installationspaket, um MySQL...