Live Qiniuyun

Recently, the live broadcasting industry is very hot, all kinds of live broadcasting, sometimes I will go
The panda TVSee PDD’s LOL live broadcast above, while watching the live broadcast and very curious about how he this kind of live broadcast in the end to achieve, so today we will explore it together.

Qiniuyun live broadcast

In the era of the explosion of live video, Qiniu launched the global live streaming service and end-to-end live broadcast scene solution specially created for the live broadcast platform. I choose Qiniu because the documents of Qiniu really make people look comfortable and easy to understand. Before learning Qiniu cloud, it is very necessary for you to look at Qiniu cloud principle document, because this document may be more professional than my explanation.

Application for cloud broadcasting

First of all, you have to open live broadcasting space permissions in the Qiniu console

Generally, the application will be approved within 3 working days.

Creating Live Space

Once approved, you need to create a livestream space

When creating live broadcasting space, the domain name of live broadcasting must be the domain name that has been put on record. It is recommended to use the second-level domain name.

Select the storage space dedicated to the live stream

Here you need to configure the accelerated VOD domain name, configuration is also very simple, to the menu bar fusion CDN to create a new accelerated domain name, type selection VOD platform

The important thing to note here is that it will take a while for the new accelerated domain name to display the value of the CNAME. Once the value is displayed, you can resolve your domain name

Go back to Create Live Space and select the accelerated domain name we created

After the creation is completed, we will go to the main page of live broadcasting space, and we need to configure the name of the live broadcasting channel and the domain name of the live broadcasting. This is as simple as the previous configuration of CDN acceleration. The given domain name and CNAME value will be analyzed in the background of domain name resolution management. The correct configuration is shown in the figure below

After creating the live stream space, we need to go to the live stream manager and create a live stream. After creating the live stream, we will get the push stream address and the play address, which is called the live stream address and the play address

After OBS is installed on the PC side of push stream, the push stream address is filled in, and then the push stream live broadcast can be carried out.

You can also use mobile phones to push streams. The so-called mobile live streaming, please combine this with the SDK configuration and portal given on the official website. The previous Qiniu configuration and live streaming have been completed

Watch the live broadcast

After the above configuration of live stream push is completed, we need to Let users or viewers see the live stream and Let’s go

Under normal circumstances, the process for users to watch live broadcast is as follows: log in the live broadcast website -> to open the live broadcast room -> server to get the broadcast address -> users to watch the live broadcast. Of course, there may be more things behind the process, so we simply simulate the process of logging in the live broadcast website and then watch the live broadcast. So that means we need to create a Laravel project, and then integrate the server SDK of Qiniu Cloud Live. You need to take a look at the instructions and call methods of the server SDK

Once the project and components are in place we create a controller to test live

php artisan make:controller LiveController

Controller content

<? php namespace App\Http\Controllers; use Qiniu\Pili\Client; use function Qiniu\Pili\HDLPlayURL; use Qiniu\Pili\Mac; class LiveController extends Controller { protected $client; /** * LiveController constructor. */ public function __construct() { $this->client = new Client(new Mac('xxx', 'xxx')); } public function index() {$this->client->hub(' Destiny ');} public function index() {$this->client->hub(' Destiny '); // get the address of the HDL live stream. StreamKey = stream name $liveurl = \Qiniu\Pili\HDLPlayURL('pili-live-hdl.live.aabvip.com', 'Destiny ', 'live-stream'); return view('welcome', compact('liveurl')); }}

Here is only one way to get the playback address, there are more ways you can check the SDK’s README, I got the HDL live address here, the common live address is as follows

• RTMP: The bottom layer is based on TCP and relies on Flash on the browser side.
• HTTP-FLV: Transmits FLV based on HTTP streaming IO and relies on the browser to support FLV playback.
• WebSocket-FLV: WebSocket-based FLV transmission, depending on the browser support FLV playback. WebSocket is built over HTTP, and an HTTP connection must be established before a WebSocket connection can be established.
• HLS: HTTP Live Streaming, Apple proposed an HTTP based Streaming media transmission protocol. HTML5 can turn on playback directly.
• RTP: UDP based, 1 second delay, browser does not support.

Common live protocol latency and performance data

It can be seen that HTTP-FLV is a good way to do live streaming in the browser. The performance is better than RTMP + Flash, and the latency can be as good as or better than RTMP + Flash. The following recommended the corresponding protocol playback plug-in

• Videojs-contrib-hls This plugin is used by a lot of websites, and the UI looks very beautiful
• Bilibili-flv.js This is the B station open source FLV playback component, very good

The code after the component CDN is introduced is as follows

<! doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <! - the introduction of CDN -- > < script SRC = "https://cdn.bootcss.com/flv.js/1.3.2/flv.min.js" > < / script > < / head > < body > <! -- Start --> <video id="videoElement"></video> </body> <script> if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: '{{ $liveurl }}' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } </script> <! -- End --> </html>

Here’s what it looks like

Just follow this tutorial and do it so you can understand it better.