Vue+webrtc (Tencent Cloud) practice of implementing live broadcast function

Vue+webrtc (Tencent Cloud) practice of implementing live broadcast function

1. Live broadcast effect

1. PC side

Too ugly, no face

2. Mobile

insert image description here

2. Steps to start live streaming

2.1 Introducing Tencent web (fast live) script

The script must be introduced in the body of index.html

 <body style="padding:0;margin:0">
    //Tencent Live Streaming Script<script src="https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.2.min.js" charset="utf-8"></script>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

2.2 Add a video container to the interface where live broadcast is needed (after starting live broadcast, the location of the video will be displayed)

You can use it directly in the .vue file. You can adjust the style of the container yourself, but the id cannot be discarded (you can also use name)

<div id="id_local_video" style="margin:0 auto;width:80%;display:flex;align-items:center;justify-content:center;"></div>

2.3 Create a live broadcast object and start live broadcast

Click the start live button and write the method in the corresponding method. Note: The protocol header rtmp in the push stream address must be changed to webrtc, and Chinese must not appear in the push stream address, otherwise an error will be reported even if the push stream is successful.

      //Create the video object livePusher variable. I wrote it in data and no longer copied it. You can also declare the variable directly in methods this.livePusher = new TXLivePusher()
      this.livePusher.setRenderView('id_local_video');
      // Set the audio and video stream this.livePusher.setVideoQuality('720p');
      // Set the audio quality this.livePusher.setAudioQuality('standard');
      // Customize the frame rate this.livePusher.setProperty('setVideoFPS', 25);   
        
      // Start live broadcast // Open the camera this.livePusher.startCamera();
      // Turn on the microphone this.livePusher.startMicrophone();    
      //Here I delayed 4 seconds for streaming. The streaming address needs to be received from the backend.
       setTimeout(() => { this.livePusher.startPush(streaming address);
       }, 4000);

Streaming success

2.4 Close Live Broadcast

Just use it in the corresponding method. Note that when closing the live broadcast, the video container must be destroyed.

      // 1. Stop pushing stream this.livePusher.stopPush();
      // 2. Close the camera this.livePusher.stopCamera();
      // 3. Turn off the microphone this.livePusher.stopMicrophone();      
      // 4. Destroy the container object this.livePusher.destroy();

This concludes this article about the practice of implementing the live broadcast function with vue+webrtc (Tencent Cloud). For more relevant vue+webrtc Tencent Cloud live broadcast content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of Vue's live broadcast function
  • How to use vue-video-player to achieve live broadcast
  • vue-video-player implements real-time video playback (monitoring equipment-rtmp stream)
  • Sample code for implementing a Vue real-time live broadcast system in 2 minutes
  • Vue loads the video stream and implements the live broadcast function

<<:  DIV background semi-transparent text non-translucent style

>>:  Website Color Schemes Choosing the Right Colors for Your Website

Recommend

MySQL date and time addition and subtraction sample code

Table of contents 1.MySQL adds or subtracts a tim...

MySQL Full-text Indexing Guide

Full-text indexing requires special query syntax....

Detailed explanation of how to efficiently import multiple .sql files into MySQL

MySQL has multiple ways to import multiple .sql f...

Analysis of the Neglected DOCTYPE Description

doctype is one of them: <!DOCTYPE HTML PUBLIC &...

Detailed explanation of three relationship examples of MySQL foreign keys

This article uses examples to describe the three ...

15-minute parallel artifact GNU Parallel Getting Started Guide

GNU Parallel is a shell tool for executing comput...

Draw an iPhone based on CSS3

Result:Implementation Code html <div class=...

Seven Principles of a Skilled Designer (1): Font Design

Well, you may be a design guru, or maybe that'...

Understanding of web design layout

<br />A contradiction arises. In small works...

MySQL series 9 MySQL query cache and index

Table of contents Tutorial Series 1. MySQL Archit...

WeChat applet realizes the effect of swiping left to delete list items

This article shares the specific code for WeChat ...

Implementing a simple Gobang game with native JavaScript

This article shares the specific code for impleme...

Hide div in HTML Hide table TABLE or DIV content css style

I solved a problem tonight that has been botherin...

MySQL decimal unsigned update negative numbers converted to 0

Today, when verifying the concurrency problem of ...

Solve the problem of MySQL 8.0 still prompting Access denied even though the input is correct

I started learning MySQL recently. The installati...