The implementation of ffmpeg + nginx RTMP module + flv is not based on flash. There is no plug-in to play surveillance video

Posted by olsrey on Tue, 08 Mar 2022 09:23:29 +0100


At present, the support of flash in the browser is getting worse and worse. The new version of Google has abandoned Flash support, and the conventional rtmp video streaming basically can not meet the technical requirements. At present, the solution is to convert rtmp to hls for playback. Under normal circumstances, the hls playback delay is relatively large, with an average delay of about 5-6s. This chapter uses flv for video playback. Google browser and IE are not tested. The test delay is basically less than about 5s. In case of large delay, check the frame skipping at the front end to ensure the delay.


Required tools include



Compiled by nginx RTMP module:


vlc player:

If you need to download the full package directly, including the front-end test page:


1. Download the compiled nginx RTMP module file and configure nginx Conf is as follows

worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#error_log  logs/error.log  debug;

#pid        logs/;

events {
    worker_connections  1024;

# Add RTMP service
rtmp {
    server {
        listen 1935; # Listening port

        chunk_size 4000;
        application live {
            live on;
            gop_cache on;

# HTTP service
http {
    include       mime.types;
    default_type  application/octet-stream;

    #access_log  logs/access.log  main;

    server {
        listen       8088; # Listening port
        location /stat.xsl {
            root html;
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        location / {
            root html;
        location /rtmpLive {
            flv_live on;
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
            add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
            add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
            add_header 'Cache-Control' 'no-cache';

If the configuration file downloaded from the above address has been modified, it does not need to be moved. Pay attention to several listening ports in the configuration file to avoid conflicts with other programs. 1935 is the port used in ffmpeg transcoding, which needs to correspond to here. 8088 is the front-end display port of flv, which will be explained later.

Start nginx and double-click nginx Exe program, the cmd window flashes, start the task manager, check whether nginx is started, and nginx appears Exe indicates that it has been started.

2. Start ffmpeg

Download ffmpeg from the above address, configure the environment variables, and add the bin directory address of ffmpeg to the path. My name is D:\workSpace\live\ffmpeg\ffmpeg-4.3.1-2021-01-01-essentials_build\bin

Then run cmd as an administrator, enter ffmpeg, and press enter. A pile of things will appear, indicating that the configuration is complete

Then test the ffmpeg pull stream decoding. This time, Dahua monitoring is used to test the main code stream. The commands are as follows

ffmpeg -i "rtsp://admin:admin123@" -vcodec copy -f flv -an rtmp://localhost:1935/live/1000000001


admin is the account that monitors the login page

admin123 is the password of the monitoring login page refers to the monitoring address and port. If the monitoring port is not modified, it is basically 554 in Dahua

subtype is the code stream type, 0 is the main code stream, and 1 is the sub code stream. If the sub code stream is used, you need to start the sub code stream on the monitoring management page

Channel is the channel number, which is the default configuration. Write 1 without modification

-vcodec copy -f flv -an: video decoding parameter - vcodec copy is to copy the original video. It is recommended not to change it. I have tried other parameters and tried to modify the video size without success. It is either special card or not displayed. The video size can only be realized by modifying the resolution of the code stream through the monitoring page. Flv decoding format, corresponding to the flv of the front end

rtmp://localhost:1935/live/1000000001 : RTMP output address, localhost can be used for local test, or replace the local IP

After running, the streaming transcoding log will be output continuously, as shown in the following figure

3. Test rtmp video stream

Open vlc player, media - open network streaming, and enter the rtmp://localhost:1935/live/1000000001 Address, play and test whether there is an image. If there is an image, it indicates that the streaming transcoding is successful.

4. Front end flv display monitoring video

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Play page</title>
        <script src=""></script>
        <video style="height: 400px;width: 600px;" id="videoElement" muted autoplay controls></video>
            var flvPlayer = null;
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement');
                flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    // 8080 corresponds to the port monitored by Nginx
                    // rtmpLive corresponds to the path of Nginx
                    url: 'http://localhost:8088/rtmpLive?app=live&stream=1000000001',
                    enableWorker: true,     //Open flv on the browser side JS worker, multi process running flv js
                    isLive: true,           //Live mode
                    hasAudio: false,        //Turn off audio
                    hasVideo: true,
                    stashInitialSize: 128,
                    enableStashBuffer: false


Note the url address, http://localhost:8088/rtmpLive?app=live&stream=1000000001 , 8088 corresponds to the listening port in the nginx configuration file. The above configuration is 8088. rtmpLive is also the configuration identifier at the end of the nginx configuration file. App = live & stream = 1000000001 is the identifier after ffmpeg streaming transcoding. If the above is written according to the stable content, there is no need to modify the address

The front-end playback is successful, and the delay is basically within 5s. If you want to modify the delay, you can correct the front-end time, and add the code to the front-end js

setInterval(function() {
            console.log("Delay correction judgment");

            if (!videoElement.buffered.length) {
            var end = videoElement.buffered.end(0);
            var diff = end - videoElement.currentTime;
            if (diff >= 2) {
                console.log("Time delay correction");
                videoElement.currentTime = (end - 1);
        }, 3000);

If the delay is more than 2s, the time will be corrected automatically and jump to the current time, but the video loading phenomenon will occur during the jump, which is not beautiful. It is recommended to judge that the time is about 4s, diff > = 4


java integrates ffmpeg streaming transcoding, and web startup automatically carries out streaming transcoding: springboot project, start and execute the task

package com.hs.job;

import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;

import com.hs.Rtsp.RtspFactory;

public class PubListener implements CommandLineRunner {
    public void run(String... strings) throws Exception {
    	RtspFactory rtspFy = new RtspFactory();

package com.hs.Rtsp;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.hs.trans.bean.CameraInfo;
import com.hs.trans.service.CameraService;
import com.hs.util.FFmpegConfig;
import com.hs.util.PropertiesUtil;
import com.hs.util.SpringUtils;

public class RtspFactory {

    private CameraService cameraService;
    private static FFmpegConfig config = (FFmpegConfig) PropertiesUtil.load("",  FFmpegConfig.class);//ffmpeg transcoding configuration file is configured with various monitoring transcoding methods. At present, Dahua, Haikang and other equipment are configured
    public void initRtspInfo(){
        List<CameraInfo> cameraList = getCameraList();//getCameraList is a method to obtain the monitoring list. It needs to be implemented by itself. The test can be written to death
        for(CameraInfo camera : cameraList){
            //String rtspUrl = "rtsp://admin:admin123@";
            String rtspUrl = loadRtspUrl(camera);
            // Nginx rtmp address
            // 1935 corresponds to the port monitored by rtmp in the Nginx configuration file
            // live corresponds to the value of application under rtmp in the Nginx configuration file
            // rtmpStream corresponds to the value of the 16 line parameter stream in the playback page
            if(rtspUrl != null){
                String nginxRtmpUrl = "rtmp://localhost:1935/live/" + camera.getMaxaccept();
                RtspThread rtsp;
                try {
                    rtsp = new RtspThread(rtspUrl, nginxRtmpUrl);
                } catch (UnsupportedEncodingException e) {
    public String loadRtspUrl(CameraInfo camera){
        String rtspUrl = null;
        String comTypeLists = config.getCameraComType();
        String[] comTypeArr = comTypeLists.split(",");
        for(String comTypes : comTypeArr){
            String[] comArr = comTypes.split("-");
                rtspUrl = comArr[1];
        if(rtspUrl != null){
            rtspUrl = rtspUrl.replace("[username]", camera.getUserName()).replace("[password]", camera.getPassWord()).replace("[ip]", camera.getIp());
        return rtspUrl;
    public List<CameraInfo> getCameraList(){
        cameraService = SpringUtils.getBean(CameraService.class);
        Map<String, Object> param = new HashMap<String, Object>();
        param.put("deleteFlag", 0);
        return cameraService.getCameraList(param);

package com.hs.Rtsp;


import com.hs.util.FFmpegConfig;
import com.hs.util.PropertiesUtil;

public class RtspThread extends Thread {
	private static FFmpegConfig config = (FFmpegConfig) PropertiesUtil.load("",  FFmpegConfig.class);
	private String rtspUrl;
	private String nginxRtmpUrl;
	public RtspThread(String rtspUrl, String nginxRtmpUrl) throws UnsupportedEncodingException {
		this.rtspUrl = rtspUrl;
		this.nginxRtmpUrl = nginxRtmpUrl;

	public void run() {;
		try {
			// ffmpeg has been configured in the system environment variable
			String command = config.getFfpmegPath() + "ffmpeg.exe";
			command += " -i \"" + rtspUrl + "\"";
			command += " -vcodec copy -f flv -s 100x50 -an " + nginxRtmpUrl;
			System.out.println("ffmpeg Streaming command:" + command);

			Process process = Runtime.getRuntime().exec(command);
			BufferedReader br = new BufferedReader(new InputStreamReader(process.getErrorStream()));
			String line = "";
			while ((line = br.readLine()) != null) {
		} catch (Exception e) {
		} finally {// If the connection fails to be established, socket will not be executed close();
}, put it in the resources directory, 10900 corresponds to Dahua, 10901 corresponds to Haikang, and is divided into ",". ffpmegPath corresponds to ffmpeg directory and bin directory

#Equipment manufacturer mapping

#ffpmeg path

Table structure

After starting nginx, start the springboot project to automatically push and pull the stream. The integration is written roughly. If there is a problem, please contact the email,vx:18686530251

Topics: Java Web Development Nginx ffmpeg