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

Detailed explanation of the usage of MySQL data type DECIMAL

MySQL DECIMAL data type is used to store exact nu...

CSS sets the box container (div) height to always be 100%

Preface Sometimes you need to keep the height of ...

Detailed explanation of using top command to analyze Linux system performance

Introduction to Linux top command The top command...

Causes and solutions for MySQL too many connections error

Table of contents Brief summary At noon today, th...

js addition, subtraction, multiplication and division precise calculation method example code

Preface Because computer numbers are floating poi...

5 things to note when writing React components using hooks

Table of contents 01. Use useState when render is...

MySQL sorting feature details

Table of contents 1. Problem scenario 2. Cause An...

Ways to improve MongoDB performance

MongoDB is a high-performance database, but in th...

Causes and solutions for cross-domain issues in Ajax requests

Table of contents 1. How is cross-domain formed? ...

iframe multi-layer nesting, unlimited nesting, highly adaptive solution

There are three pages A, B, and C. Page A contains...

js to realize web music player

This article shares simple HTML and music player ...

How to use explain to query SQL execution plan in MySql

The explain command is the primary way to see how...

How to use custom images in Html to display checkboxes

If you need to use an image to implement the use ...

Analysis of the process of configuring a simple network environment based on Tcl language

1. Tcl script file circle.tcl code comments #Set ...

Commonly used English fonts for web page creation

Arial Arial is a sans-serif TrueType font distribu...