SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)

其实原理就是: 将监控通过FFMPEG,推送给Nginx,前端通过Nginx地址拉取视频,就可以播放了。

1:安装FFMPEG.
2:下载并且配置nginx.
3:使用java代码实现调用cmd或者linux窗口,并且运行操作FFMPEG的命令,进行监控视频rtsp格式的推送,推送给nginx.
4:前端写一个video标签就可以,Src写nginx的固定地址就可以。

windows: url: 【在上面3:中提到的,通过ffmeg推送给nginx的命令如下】

ffmpeg -rtsp_transport tcp -i 你的rtsp地址 -c:v libx264 -c:a aac -f flv -an rtmp://你的nginx地址:nginx配置的拉取端口号/myapp/room

linux:url:

ffmpeg -f rtsp -rtsp_transport tcp -i ' 你的rtsp地址监控视频' -codec copy -f flv -an 'rtmp://你的nginx地址:nginx配置的拉取端口号/myapp/room'

环境

  • 本地系统 win10
  • centos7:Nginx
  • 开源程序:ffmpeg
  • 前端:Vue
  • 后端SpringBoot

一、下载所需要的FFMPEG安装包

  • windows下载FFmpeg FFMpeg windows版本
    -https://www.gyan.dev/ffmpeg/builds/
    SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第1张图片
    SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第2张图片
    将此文件解压到你喜欢的的文件夹【比如这样】
    SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第3张图片
    接着配置环境变量
    进入到解压后的目录找到bin 、复制bin目录路径----然后配置系统环境变量【下图所示】
    SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第4张图片
    cmd查看一下是否成功
ffmpeg 

SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第5张图片
至此这个这个玩意就安装完成了

安装nginx

依照你喜欢的方式安装nginx 可以使用docker、yum、安装包 等等方式都可以
我使用直接解压的方式
可以去nginx官网下载喜欢的nginx版本 ,上传到服务器
在这里插入图片描述
解压然后编译(这个应该不难,可以使用 make make install )
安装完成之后长这样
SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第6张图片
可以看到我这个截图上多了一个 nginx-http-flv-module 这个目录,这个是必要安装的一个模块
否则无法实现正常的监控视频播放

给Nginx安装 nginx-http-flv-module模块

建议直接下载到nginx的目录下、我安装到了 /user/loacl/nginx/ 文件夹下了
下载地址:https://github.com/winshining/nginx-http-flv-module
安装依赖项

yum -y install unzip
yum -y install gcc-c++ 
yum -y install pcre pcre-devel  
yum -y install zlib zlib-devel 
yum -y install openssl openssl-devel

将nginx-http-flv-module模板添加到nginx中,生成make文件 并安装nginx

./configure --prefix=/usr/local/nginx  --add-module=/usr/local/nginx/nginx-http-flv-module
make && make install

检查是否安装成功

nginx -V

SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第7张图片
出现这个就是代表安装成功了
安装基本已经成形---------接下来配置nginx的配置文件

nginx配置文件

## 编辑nginx配置文件
vim conf/nginx.conf

SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第8张图片
nginx的配置文件大概就是这样的(完成的nginx配置文件 我也会在下面附上,可以直接复制* 嗷对 需要修改成你的ip 或者域名)

SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第9张图片
下面是完整的ngin配置文件

worker_processes  10; #should be 1 for Windows, for it doesn't support Unix domain socket
#worker_processes  auto; #from versions 1.3.8 and 1.2.5

#worker_cpu_affinity  0001 0010 0100 1000; #only available on FreeBSD and Linux
#worker_cpu_affinity  auto; #from version 1.9.10

error_log logs/error.log error;

#if the module is compiled as a dynamic module and features relevant
#to RTMP are needed, the command below MUST be specified and MUST be
#located before events directive, otherwise the module won't be loaded
#or will be loaded unsuccessfully when NGINX is started

#load_module modules/ngx_http_flv_live_module.so;

events {
    worker_connections  10240;
}

http {
    	include       mime.types;
    	default_type  application/octet-stream;
    	sendfile        on;
   	keepalive_timeout  65;
    	server {
        	listen       9000; #http-flv的拉流端口
        	server_name  【这个地方写你的ip、或者说是域名都是可以的--】; #http-flv的拉流ip
        	location / {
            	root   html;
            	index  index.html index.htm;
       		}
            #http-flv的相关配置
        	location /live{
                flv_live on; #打开HTTP播放FLV直播流功能
                chunked_transfer_encoding  on;
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Credentials' 'true';
        	}
        	location /hls{
                types {
                	application/vnd.apple.mpegurl m3u8;
			video/mp2t ts;
                 }
                 root /usr/local/nginx/html/hls;
                 add_header 'Cache-Control' 'no-cache';
        	}
         	location /dash {
            	root /usr/local/nginx/html/dash;
            	add_header 'Cache-Control' 'no-cache';
        	}
 
         	location /stat {
            	#configuration of push & pull status
              	rtmp_stat all;
              	rtmp_stat_stylesheet stat.xsl;
         	}
        	location /stat.xsl {
          		root /usr/local/nginx/nginx-http-flv-module;
        	}
 
         	location /control {
            	rtmp_control all; #configuration of control module of rtmp
			}
 
        	error_page   500 502 503 504  /50x.html;
        	location = /50x.html {
            	root   html;
        	}
    	}
 
}

rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;


rtmp{
        out_queue 4096;
        out_cork 8;
        max_streams 128;
        timeout 15s;
        drop_idle_publisher 15s;
        log_interval 5s;
        log_size 1m;
        server{
            #推流端口
        	listen 1935;
            #推流应用名称
         	application myapp{
                 live on;
	 	 record off;
                 gop_cache on;
          	}
         	application hls{
          		live on;
          		hls on;
          		hls_path /usr/local/nginx/html/hls;
          		hls_fragment 1s;
                        hls_playlist_length 3s;
        	}
         	application dash{
           		live on;
           		dash on;
           		dash_path /usr/local/nginx/html/dash;
         	}
 
        }
}

测试一下是否可以使用:准备一个可播放的rtsp地址例如:海康、大华、。。。。。都可以试试
打开cmd 开始调用 ffmpeg

ffmpeg -rtsp_transport tcp -i rtsp://user:pwd@ip:31554/h264/ch1/main/av_stream -c:v libx264 -c:a aac -f flv -an rtmp://nginx的ip:nginx所配的端口/myapp/room

如果出现如下,有速度就代表可以成功
SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第10张图片
可以使用地址本地测试一下有没有画面

'http://nginx的ip:nginx访问的端口9000/live?port=1935&app=myapp&stream=room'

打开VLC media player
SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第11张图片
SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第12张图片

前端 (vue)

引入Flv.js
SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第13张图片
然后接下来就这么写【如下图】会附上全代码
SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第14张图片
SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第15张图片

<template>
  <a-modal
    :title="title"
    :width="510"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container>
        <a-form :form="form" slot="detail">
          <a-row>
            <video autoplay controls width="100%" height="270" id="videoElement">video>
          a-row>
        a-form>
      j-form-container>
    a-spin>
  a-modal>
template>
  
<script>
import flvjs from 'flv.js'
import JFormContainer from '@/components/jeecg/JFormContainer'
import { getAction } from '../../../api/manage'
export default {
  name: 'VidoModule',
  components: {
    JFormContainer,
    flvjs,
  },
  data() {
    return {
      flvPlayer:1,
      title: '监控',
      //源视频地址
      videoPath:'',
      videoStream: '',
      confirmLoading: false,
      visible: false,
      form: this.$form.createForm(this),

      url: {
      	//开启视频  
        list: '自己的请求地址',
        //关闭视频输出
        list1:'。。。'
      },
    }
  },
  mounted() {
  },

  methods: {
    // 开启页面
    show(record) {
      this.visible = true
      this.videoPath = record.videoPath
      this.VideoData(this.videoPath);
      this.createVideo()
    },

    VideoData(videoPath){
      getAction(this.url.list,{videoPath:videoPath}).then((res) => {

      })
    },
    
    //传输视频地址
    createVideo() {
      if (flvjs.isSupported()) {
        let videoElement = document.getElementById('videoElement')
        let flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          fluid: true,
          stashInitialSize: 128,// 减少首桢显示等待时长
          url: 'http://xxx.xxx.xxx.xxx:9000/live?port=1935&app=myapp&stream=room', //url地址

        })
        //console.log(videoUrl+'      videoUrl')
        flvPlayer.attachMediaElement(videoElement)
        flvPlayer.load()
        flvPlayer.play()
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.closeFfmpeg()
    },
    //  关闭视频的输出
    closeFfmpeg(){
      getAction(this.url.list1).then((res) => {

      })
    },
    handleOk() {
      this.submitForm()
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
script>
<style lang="less" scoped>
style>

后端 SpringBoot

后端其实就是通过java 去调用本地或者服务器上的FFMPEG,使用cmd 或者 shell的方式都可以
其实就是执行一下命令而已
CommandUtil.java

package common.util;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

/**
 * @Description: 调用命令 【windows&Linux】 @Author: cq @Date: 2022/12/20 @Version: V1.0
 * 用于启动ffmpeg 随之将rtsp 转化为rtmp 返回给Flv.js使用
 */

public class CommandUtil {

  /** 调用linux命令* */
  public String linuxExec(String cmd) {
    System.out.println("执行命令[ " + cmd + "]");
    Runtime run = Runtime.getRuntime();
    try {
      Process process = run.exec(cmd);
      String line;
      BufferedReader stdoutReader =
          new BufferedReader(new InputStreamReader(process.getInputStream()));
      StringBuffer out = new StringBuffer();
      while ((line = stdoutReader.readLine()) != null) {
        out.append(line);
      }
      try {
        process.waitFor();
      } catch (InterruptedException e) {
        e.printStackTrace();
      }
      process.destroy();
      return out.toString();
    } catch (IOException e) {
      e.printStackTrace();
    }
    return null;
  }
  /** 调用windwos命令* */
  public String winExec(String cmd) {
    Runtime runtime = Runtime.getRuntime();
    String command =cmd;
    try {
      Process process = runtime.exec(command);
      new InputStreamReader(process.getInputStream());
      return "成功";
    } catch (IOException e) {
      e.printStackTrace();
      return "请检查摄像头地址";
    }
  }
}
package org.ept.modules.solidwaste.controller;

import io.swagger.annotations.Api;
import lombok.AllArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.ept.common.api.vo.Result;
import org.ept.common.util.CommandUtil;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

/**
 * @Description: 视频输出 @Author: cq @Date: 2022/11/30 @Version: V1.0
 */
@Api(tags = "视频格式转换---windows-->cmd---linux")
@RestController
@RequestMapping("/video/videos")
@AllArgsConstructor
@Slf4j
public class videoTestController {
  /** Windows系统* */
  private static final boolean IS_WINDOWS = System.getProperty("os.name").toLowerCase().contains("win");
  /** Linux系统* */
  private static final boolean IS_LINUX = System.getProperty("os.name").toLowerCase().contains("Linux");


  /** 视频播放指令执行 rtsp地址【源播放地址】通过ffmpeg程序进行转化成rtmp,将地址传给flv.js进行播放 */
  @GetMapping("/videoStart")
  public void videoPreview(@RequestParam(name = "videoPath", required = false) String videoPath) {
    CommandUtil commandUtil = new CommandUtil();
    /*如果是winodws系统**/
    if (IS_WINDOWS) {
      String cmd ="cmd /k start ffmpeg -rtsp_transport tcp -i"
                      + " "
                      + videoPath
                      + " "
                      + "-c:v libx264 -c:a aac -f flv -an rtmp://xxx.xxx.xxx.xxx:1935/myapp/room";
      commandUtil.winExec(cmd);
    }
    /*如果是Linux系统**/
    if (IS_LINUX){
      System.out.println("linux");
      String cmd = "ffmpeg -f rtsp -rtsp_transport tcp -i '"
              + ""
              + videoPath
              + "'"
              + ""
              + " -codec copy -f flv -an 'rtmp://xxx.xxx.xxx.xxx:1935/myapp/room'";
      commandUtil.linuxExec(cmd);
    }
  }

  /** 关闭ffmpeg.exe程序 */
  @GetMapping("/videoClose")
  public Result<?> close() {
    closeHistoryProgram("ffmpeg.exe");
    return Result.ok("已成功停止");
  }

  public void closeHistoryProgram(String processName) {
    String cmd = "taskkill /f /t /im " + processName;
    try {
      // exec执行cmd命令
      Process process = Runtime.getRuntime().exec(cmd);
      // 获取CMD命令结果的输出流
      InputStream fis = process.getInputStream();
      InputStreamReader isr = new InputStreamReader(fis, "GBK");
      // 使用缓冲器读取
      BufferedReader br = new BufferedReader(isr);
      String line = null;
      // 全部读取完成为止,一行一行读取
      while ((line = br.readLine()) != null) {
        // 输出读取的内容
        System.out.println(line);
      }
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

}

大概就是这么个意思
SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第16张图片

SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)_第17张图片

你可能感兴趣的:(ffmpeg,java,vue.js,后端,视频编解码)