Vue + webrtc (Tencent Cloud) Praxis der Implementierung der Live-Broadcast-Funktion

Vue + webrtc (Tencent Cloud) Praxis der Implementierung der Live-Broadcast-Funktion

1. Live-Übertragungseffekt

1. PC-Seite

Zu hässlich, kein Gesicht

2. Handy, Mobiltelefon

Bildbeschreibung hier einfügen

2. Schritte zum Starten des Live-Streamings

2.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-Übertragung

Klicken 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);

Streaming-Erfolg

2.4 Live-Übertragung beenden

Verwenden 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:
  • Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue
  • So verwenden Sie den Vue-Video-Player für eine Live-Übertragung
  • vue-video-player implementiert Echtzeit-Videowiedergabe (Überwachungsgerät-RTMP-Stream)
  • Beispielcode zur Implementierung eines Vue-Echtzeit-Liveübertragungssystems in 2 Minuten
  • Vue lädt den Videostream und implementiert die Live-Übertragungsfunktion

<<:  DIV-Hintergrund, halbtransparenter Text, nicht durchscheinender Stil

>>:  Farbschemata für Websites Die richtigen Farben für Ihre Website auswählen

Artikel empfehlen

Einige Datenverarbeitungsmethoden, die häufig in JS verwendet werden können

Inhaltsverzeichnis DOM-Verarbeitung Arrays Verfah...

Tutorial zur Installation von MySQL 5.6 mit RPM in CentOS

Alle vorherigen Projekte wurden in der Windows-Sy...

Importieren von CSS-Dateien unter Verwendung von Beurteilungsbedingungen

Lösung 1: Verwenden Sie bedingten Import im HTML-...

15 Vim-Kurzreferenztabellen, die Ihnen helfen, Ihre Effizienz um das N-fache zu steigern

Ich habe im ersten Halbjahr des letzten Jahres an...

So kompilieren Sie den Linux-Kernel

1. Laden Sie die erforderliche Kernel-Version her...

Detaillierte Erklärung des VueRouter-Routings

Inhaltsverzeichnis Vue-Router 1. Verstehen Sie da...

So ersetzen Sie alle Tags im HTML-Text

(?i) bedeutet, dass die Groß-/Kleinschreibung nich...

Implementierungsbeispiel für die Message Board-Funktion von Node.js+Express

Inhaltsverzeichnis Nachrichtenbrett Erforderliche...

Ein Beispiel für die Ausführungsreihenfolge zwischen dem href-Sprung und dem onclick des HTML-Hyperlinks a-Tag

Die Ausführungsbeziehung zwischen dem href-Sprung...

Detaillierte Erklärung der JQuery-Datagrid-Abfrage

Inhaltsverzeichnis Fügen Sie dem Tree-Element Cod...

37 Tipps für ein gutes User Interface Design (mit Bildern)

1. Versuchen Sie, ein einspaltiges statt eines meh...

Reiner CSS-Beispielcode für Meteorschauer-Hintergrund

GitHub-Adresse, Sie können es mit einem Stern mar...

So ändern Sie das Anfangskennwort eines Benutzers in mysql5.7

Wenn Benutzer MySQL-Datenbanken zum ersten Mal in...

Lösung für das Problem, dass der Bridge-Modus der virtuellen Maschine von VMware15 nicht auf das Internet zugreifen kann

Beschreibung Lösung Der Bridge-Modus der virtuell...

Vue realisiert Click-Flip-Effekt

Verwenden Sie Vue, um einfach einen Click-Flip-Ef...