windows ffmpeg + nginx + videojs implements rtmp push and pull streaming and hls push and pull live streaming

The previous blog has written about using ffmpeg + nginx to build an RTMP push and pull live broadcast environment under Windows. It can be played through PC client software such as ffplay and vlc. However, due to browser playback reasons, the RTMP stream passes through the browser. Playback must use the flash plug-in. The flash plug-in has been eliminated by the entire industry due to its own security issues, so it can only use the m3u8 format file supported by the browser. This file is similar to the flv file of the rtmp protocol stream, and m3u8 is the file of the hls protocol stream.

Let’s start from the beginning. The last blog was too general, so it was commented that it is only suitable for people with basic knowledge. But the problem is that the purpose of my blog is not to make others proficient but just to get started. After all, for I am not a beginner in the field of audio and video. The purpose of writing a blog is more to allow myself to review when needed. All the resources used in this blog can be downloaded at the bottom. nginx has been configured, and the entire file can be downloaded and used. , the download package file directory provided is as follows:

nginx_1.7.11.3_Gryphon\readme start nginx rtmp.txt contains all instructions and related test results

One.ffmpeg + nginx realizes rtmp push and pull live streaming

The first thing you need is to configure the nginx server. As a web server that has been used by Maozi for many years, nginx has no problem with its stability, and many large domestic manufacturers also use nginx as their web server and reverse proxy server. The choice will not be out of the question. The big problem, the most important thing is that nginx is extremely simple to use, so simple that even a person who has no idea about servers can easily configure the server they want. I won’t go into details about the detailed configuration of nginx. The details can be found on Baidu. There are quite a few tutorials. I am using nginx to compile the Gryphon version of the rtmp module. If it is the initial version of nginx, you need to download the rtmp module and configure it.

nginx.conf under the nginx_1.7.11.3_Gryphon\conf directory is the default configuration file for nginx startup. We mainly configure it here. Configuring rtmp is actually very simple.

rtmp {
    server {
        listen 1935;
        chunk_size 4000;
        application live {
             live on;
        }
#HLS live stream configuration
application hls{
live on;
hls on;
hls_path usr/local/var/www/hls;
hls_fragment 1s;
}
    }
}

If the above rtmp server only needs rtmp service, you can delete the application hls node

Configure nginx (no configuration is required if you use the resources downloaded in this article), open cmd in the nginx.exe directory, and enter the following command nginx -t

Check whether the configuration is successful and start another cmd in the nginx.exe directory to shut down the nginx server.

Use nginx.exe -c conf\\
ginx.conf in the first cmd to start the nginx server

After starting, go to the task manager to check whether the nginx process is running.

As above, a local rtmp server is started.

Start a cmd in ffmpeg_nginx_vlc_src2\ffmpeg7_10 and enter the following command

ffmpeg -rtbufsize 5M -f dshow -i video="USB Camera" -s 640x360 -vcodec libx264 -tune zerolatency -preset ultrafast -b:v 1000k -g 5 -ab 128k -f flv rtmp:// 192.168.1.190:1935/live/home

The following shows that ffmpeg is pushing the stream to the server

Start a cmd in ffmpeg_nginx_vlc_src2\ffmpeg7_10 and enter the following command

ffplay.exe -fflags nobuffer rtmp://localhost:1935/live/home

The following means that ffplay successfully pulls the stream and plays it

The role of vlc is only to detect whether the rtmp stream is successfully pushed when the rtmp server is first built. After the entire server runs successfully, there is no need to use vlc. However, I still delay the vlc pull stream here.

Install and open vlc

Connect to the rtmp server according to the above steps. Pay attention to the network url address rtmp://192.168.1.190:1935/live/home. This address actually only goes to rtmp://192.168.1.190:1935/live. This live node is what we have in nginx, conf In the rtmp server node configured inside, the home behind it is actually the password or pass, because I specified home when pushing the stream.

You can see that vlc can also pull the stream successfully.

(You can check the server IP address yourself by typing the cmd command ipconfig. If the same computer is used as server and client, you can directly use localhost instead of the local IP address)

Note: ffmpeg streaming has high computer performance requirements. If the computer performance does not meet the requirements, you need to adjust the ffmpeg recording instructions appropriately. Details can be found in the nginx_1.7.11.3_Gryphon\readme start nginx rtmp.txt file or you can use Baidu yourself.

I tested the ffmpeg + nginx rtmp streaming solution for 12 consecutive hours and found no abnormalities. Preliminary conclusion: the server was successfully established.

2.ffmpeg + nginx + video.js realizes hls push streaming and web page live streaming

At the beginning of the article, I mentioned the choice of solutions for playing live streams on web pages. I won’t go into details here. Regarding the technology of web page playback, this article uses m3u8 format files. If you have other solutions, please leave a message. I will test it when I have time.

Enter q in the cmd of the ffmpeg push stream above to stop the stream, close the playback window of ffplay, be careful not to close the cmd form

Because the nginx I started has already been configured with the hls service, there is no need to reconfigure it here. But let’s talk about the configuration of hls. The configuration is as follows in the nginx.conf file.

rtmp {
    server {
        listen 1935;
        chunk_size 4000;
        application live {
             live on;
        }
#HLS live stream configuration
application hls{
live on;
hls on;
hls_path usr/local/var/www/hls;
hls_fragment 1s;
}
    }
}

It is worth noting the setting of hls_path. Set the local storage location of the m3u8 file and ts file of the hls protocol slice through hls_path. Carefully compare the actual file directory. You can download the directory where nginx.exe is located.

Add the following configuration to the http server in the nginx.conf file

location /hls{
#Set cross-domain
add_header Cache-Control no-cache;
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            add_header 'Access-Control-Allow-Headers' 'Range';
#serve HLS fragments
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root usr/local/var/www;
#add_header Cache-Control no-cache;
expires -1;
}

Pay special attention to the application/vnd.apple.mpegurl m3u8 configuration and root usr/local/var/www directory configuration in the type

When configuring, pay attention to configuring cross-domain. If you do not configure cross-domain, the Access to XMLHttpRequest at http://xxx.xxx from origin ‘http://localhost:8800’ has been problem will occur when running html streaming.

You don’t need to make any modifications to download the link package below this article. You only need to pay attention to the configuration points through this article.

Enter the following command in the cmd that runs the ffmpeg command

ffmpeg -rtbufsize 5M -f dshow -i video="USB Camera" -s 640x360 -vcodec libx264 -tune zerolatency -preset ultrafast -b:v 1000k -g 5 -ab 128k -f flv rtmp:// 192.168.1.190:1935/hls/home

The following indicates that the push is successful

The following is played through ffplay.

Enter as follows

ffplay -i "http://192.168.1.190:8800/hls/home.m3u8" 

The playback is successful through ffplay. Our purpose is not to play through the client but to play through the browser. Here we only verify that the hls stream is successful.

Note: The above ffmpeg command displays a red text prompt, and the stream may fail to be pushed. You can push the stream again.

Use the browser to play the hls stream below

Open ffmpeg_nginx_vlc_src2\vide7.10.2\vioodejs_player.html

You can see that the browser plays successfully

To use the resources of this blog, you only need to modify the hls flow address in the html code.

The above complete operation of hls push and pull playback. At this time, the hls stream file is saved in the specified local folder, in ffmpeg_nginx_vlc_src2\\
ginx_1.7.11.3_Gryphon\usr\local\var\www\ \hls folder

The ts file is a video slice file, and m3u8 is a playback file, which contains the name of the currently played slice file.

The shutdown process is to first close the pull streaming end, then close the push streaming end, and finally close the nginx server (there is no strict order in closing)

Enter nginx -t on the command line above and enter nginx -s stop to shut down nginx. Go to the task manager to confirm that the nignx process is closed.

above.

Resources for this blog Baidu Netdisk download address Baidu Netdisk extraction code: rerk

csdn download