Shulou(Shulou.com)06/02 Report--

Editor to share with you how to achieve live streaming function of vue+webrtc, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's learn about it!

1. Live broadcast effect

1.pc end

two。 Mobile terminal

two。 Start LVB step 2.1 introduce Tencent webside (Fast LVB) script

The script must be introduced into the body of index.heml

/ / Tencent Fast LVB script We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue. 2.2 add a video container to the interface where you need to use LVB (after LVB is enabled, the location of the video is displayed)

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

2.3 create an LVB object and enable LVB

Click the method corresponding to the enable LVB button to write down the method.

Note: the protocol header rtmp in the push address must be replaced with webrtc, and Chinese must not appear in the push address, otherwise an error will be reported even if the push is successful.

/ / create the livePusher variable of the video object I wrote in data and no longer copy it, or directly declare the variable this.livePusher=new TXLivePusher () this.livePusher.setRenderView ('id_local_video') in methods; / / set the audio / video stream this.livePusher.setVideoQuality (' 720p'); / / set the audio quality this.livePusher.setAudioQuality ('standard') / / Custom set frame rate this.livePusher.setProperty ('setVideoFPS', 25); / / enable LVB / / enable camera this.livePusher.startCamera (); / / enable microphone this.livePusher.startMicrophone (); / / here I delay 4 seconds for the push URL to be received from the backend. SetTimeout (() = > {this.livePusher.startPush (push address);}, 4000)

2.4 disable LVB

Just use it directly in the corresponding method.

Note that when you close LVB, you must destroy the video container.

/ / 1. Stop pushing this.livePusher.stopPush (); / / 2. Turn off the camera this.livePusher.stopCamera (); / / 3. Turn off the microphone this.livePusher.stopMicrophone (); / / 4. Destroy the container object this.livePusher.destroy (); the above is all the contents of the article "how to achieve live streaming in vue+webrtc". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.