基于FFmpeg + nginx + flv.js 实现的网页 ▶(播放) 摄像头

5,511

需要的一些技术安装

个人记录 参考了很多文章

系统环境:win10

首先安装 ffmpeg 地址: ffmpeg

根据你的系统选择下载 win linux

下载好后解压到你想安装的目录,然后打开系统配置环境变量

image.png

打开cmd窗口 输入ffmpeg –version 显示下面的版本号 代表安装成功

image.png

安装带有rtmp的nginx 地址: nginx-rtmp-module

打开conf 下的nginx.conf 进行配置 这里是我的配置文件内容


#user  nobody;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
rtmp {
 
    server {
 
        listen 1935; 
 
        chunk_size 4000;
 
        # TV mode: one publisher, many subscribers
        application mylive {
 
            # enable live streaming
            live on;
 
        }
    }
}
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    server {
        listen       20000;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   html;
            index  index.html index.htm;
        }
 
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 

 
}

这里是后续需要用的的参数

image.png

安装nginx-http-flv-module 地址: nginx-http-flv-module

通过服务端将上一步的RTMP流视频转成 http-flv流, 转为web端可以使用的格式(由于chrome 禁止了Flash 所以RTMP并不能直接播放)

worker_processes  1;

events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1985;

        application myapp {
            live on;
        }
    }
}

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

    sendfile        on;

    keepalive_timeout  65;


    server {
        listen       80;
        server_name  localhost;

        location / {
            add_header 'Access-Control-Allow-Origin' '*';
            root html;
            index  index.html index.htm;
        }

        location /live {
            flv_live on;
        }

        location /flv {
            add_header 'Access-Control-Allow-Origin' '*';
            flv_live on;
            chunked_transfer_encoding on;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

第一步 打开两个nginx

双击 nginx-rtmp.exe (rtmp nginx)

双击 nginx.exe (flv nginx)

任务管理器出现图中4个进程即可

image.png

第二步 打开两个cmd 窗口

这一步 是将 rtsp 的原始摄像头数据 通过nginx 转成 rtmp格式 (admin:XXXXXX@192.168.XXX.XXX) 通常说的是摄像头地址(这个根据厂家摄像头来定义) 后面的 :1935/mylive/test2 对应着nginx配置中的本机地址

ffmpeg -i "rtsp://admin:XXXXXX@192.168.XXX.XXX"  -vcodec copy -acodec copy -f flv "rtmp://192.168.200.225:1935/mylive/test2"

在cmd输入这串指令后 出现下面即代表成功 这时候用 VLC 访问 rtmp://192.168.200.225:1935/mylive/test2 也能看见视频画面, 但是 由于chrome 不支持flash了,所以rtmp并不能在前端展示.

image.png

这时候我们需要使用 nginx-http-flv-module 将 rtmp 流 推成 http-flv流

在第二个cmd窗口中输入

rtmp://192.168.200.225:1935/mylive/test2 是上一个cmd 推成的地址

rtmp://192.168.200.225:1985/myapp/testv 是转后的地址

ffmpeg -re -i rtmp://192.168.200.225:1935/mylive/test2 -c copy -f flv rtmp://192.168.200.225:1985/myapp/testv

在cmd输入这串指令后 出现下面即代表成功

image.png

配置完成后 其中 myapp 和 testv 代表nginx 你配置的名字 port 是nginx 配置的端口号

这里是转播的 http-flv 地址

http://xx.xxx.xx.xx/live?port=1985&app=myapp&stream=testv // 原始转播地址
http://xx.xxx.xx.xx/flv?port=1985&app=myapp&stream=testv // flv 转播地址

这里就可以用web端进行访问,但是需要哔哩哔哩的flv进行解析

我这里是使用了 vue + flv.js 实现的

首先引入flv.js 到项目中

<template>
  <div>
    <video autoplay controls width="100%" height="500" id="myVideo"></video>
  </div>
</template>

<script>
import flvjs from "flv.js";

export default {
  props: {
    msg: String,
  },
  mounted() {
    this.$nextTick(() => {
      this.videoPlayer();
    });
  },
  methods: {
    videoPlayer() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("myVideo");
        var flvPlayer = flvjs.createPlayer({
          type: "flv",
          url: "http://192.168.200.225/flv?port=1985&app=myapp&stream=testv", //你的url地址
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    },
  },
};
</script>

然后打开网页 就能有摄像头的内容了

image.png

我这里只是自己折腾了一下子

摄像头延迟问题还需要解决

并且两个nginx 可以不需要同时打开 可以配置到一起 这里希望大佬们能给我提供一下思路 后续我会继续优化下去的