Introduction: I have recently studied the principle and implementation of webcast streaming, and now I will make a summary of the current implementation methods.

directory

  • Live streaming media protocol
  • Pull flow and push flow
  • Node Service Construction
  • Front-end play page
  • OBS push flow configuration

Live streaming media protocol

Let’s start with basic live streaming protocols.

http-flv,rtpm

Protocol/Features developers The principle of advantages disadvantages
http-flv Abode The FLV is downloaded to the local cache through the server and then played over the NetConnection local connection Save server consumption Secrecy bad
rtmp Abode Connect to the server through NetConnection and play the FLV of the server in real time Good secrecy Consuming server resources
rtsp Columbia University, Netscape and RealNetworks Controls the transmission of real-time data, depending on the transport protocol It works really well in real time complex
hls Apple inc. Includes an M3U (8) index file, TS media shard file and key encrypted string file, does not save the TS slice file to disk, but in memory This greatly reduces the DISK I/O count, prolongs the service life of the server disk, and greatly improves the server running stability A large number of files are generated, and storing or processing these files is a huge waste of resources

Pull flow and push flow

Push stream refers to the process of transferring the content encapsulated in the collection phase to the server.

Pull stream refers to the process in which the server pulls the live broadcast content with a specified address.

Node Service Construction

  • Installing dependency packages

This time use the Node-media-server package to build, please visit.

mkdir live
cd live
npm init -y
npm i node-media-server
Copy the code

Import packages and write configuration files

// server.js
const nodeMediaServer = require('node-media-server');
const config = {
    rtmp: {
        port: 3001.chunk_size: 6000.gop_cache: true.ping: 30.ping_timeout: 60
    },
    http: {
        port: 3002.allow_origin: "*"}}const nms = new nodeMediaServer(config);

nms.run();
Copy the code

When you start it, you type something in

D:\live>node server.js9588 [2021/8/22 14:52:19INFO] Node Media Server v2.3.8 2021/8/22 14:52:19588 [INFO] Node Media Rtmp Server started on port: 3001 2021/8/22 14:52:19588 [INFO] Node Media Http Server started on port: 3002 2021/8/22 14:52:19588 [INFO] Node Media WebSocket Server started on port: 3002
Copy the code

If the above content is printed, an RTMP live server has been set up successfully.

  • Pull and push the flow address

AppName is the App name; StreamName is the StreamName.

Push stream address:

url: rtmp://localhost/live key: STREAM_NAME

Pull flow address:

rtmp: rtmp://localhost:port/live/STREAM_NAME

http-flv: http://localhost:3002/live/STREAM_NAME.flv

HLS: http://localhost:3002/live/STREAM_NAME/index.m3u8

DASH: http://localhost:3002/live/STREAM_NAME/index.mpd

websocket-flv: ws://localhost:3002/live/STREAM_NAME.flv

Here is mainly use push flow address: RTMP: / / localhost/xqlive/demo, pull flow address is http://localhost:3002/xqlive/demo.flv.

Front-end play page

Here, flv.js is mainly used for playback.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Cloud live</title>
    <style>
        #live {
            margin: 0 auto;
            display: block;
            min-width: 300px;
            max-width: 600px;
            width: 100%;
        }
    </style>
</head>

<body>
    <video id="live" playsinline controls src="" poster="./img/poster.jpg"></video>
    <script src="js/flv.min.js"></script>
    <script>
        if (flvjs.isSupported()) {
            let ve = document.getElementById('live');
            let flvPlayer = flvjs.createPlayer({
                type: 'flv'.url: 'http://localhost:3002/xqlive/demo.flv'
            });
            flvPlayer.attachMediaElement(ve);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>

</html>
Copy the code

Let’s see what happens

OBS push flow configuration

Here, OBS is used for push streaming.

OBS download address

Download and install and then open the main page, find the file = “Settings =” push stream

Then fill in the address and key.

Then select the media source and start streaming.

  • Push flow interface

Below is a small video I chose for live streaming.

  • Play interface

In addition to media sources, you can also choose to live from your desktop monitor, live text, live pictures, and open the camera to live yourself.

If you are going to deploy online, make sure your server bandwidth is at least 10MB, otherwise it will be very slow.

Well, self-built live broadcasting is introduced here. If you carry out commercial services, you need to buy the cloud live broadcasting service of cloud computing service providers, which is very clear in process, but it is charged according to the bandwidth or flow of live broadcasting.