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

Linux implements automatic and scheduled backup of MySQL database every day

Overview Backup is the basis of disaster recovery...

Example of how to embed H5 in WeChat applet webView

Preface WeChat Mini Programs provide new open cap...

Introduction to MIME encoding (integrated from online information and practical experience)

1. MIME: Multipurpose Internet Mail Extensions Th...

MySQL data type details

Table of contents 1. Numeric Type 1.1 Classificat...

Detailed explanation and extension of ref and reactive in Vue3

Table of contents 1. Ref and reactive 1. reactive...

How to find out uncommitted transaction information in MySQL

A while ago, I wrote a blog post titled "Can...

Vue element implements table adding, deleting and modifying data

This article shares the specific code of vue elem...

Summary of how to modify the root password in MySQL 5.7 and MySQL 8.0

MySQL 5.7 version: Method 1: Use the SET PASSWORD...

Encapsulation implementation of the data format returned by nestjs to the front end

Generally, during the development process, the su...

How to use MySQL group by and order by together

Suppose there is a table: reward (reward table), ...

Super detailed steps to install zabbix3.0 on centos7

Preface Recently, part of the company's busin...

HTML version declaration DOCTYPE tag

When we open the source code of a regular website...

Zen HTML Elements Friends who use zen coding can collect it

html ¶ <html></html> html:xml ¶ <h...

Use the njs module to introduce js scripts in nginx configuration

Table of contents Preface 1. Install NJS module M...

Div can input content without using input as an input box to block the automatic input style

Today I designed a dynamic window style for publis...