FFmpeg + nginx-http-flv-module + flv.js 实现视频流播放

最新推荐文章于 2024-05-20 11:46:50 发布
最新推荐文章于 2024-05-20 11:46:50 发布
阅读量2.9k 收藏 12
点赞数 2
文章标签： nginx linux java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40812553/article/details/109600849
版权

流媒体FFmpeg + nginx-http-flv-module + flv.js 实现视频流播放

最近项目组接了一个视频流项目，项目的主要核心是将网络摄像头RTSP视频流在WEB端实时播放，经过两天的调查和爬坑，终于实现了视频流的播放。

接下来为大家讲讲 linux 系统下搭建 nginx-http-flv-module 的全部过程。

文章目录

前期准备

下载VLC（用于测试视频流是否可以播放）：https://www.videolan.org/
下载nginx包：https://nginx.org/download/nginx-1.16.1.tar.gz
下载nginx-http-flv-module 模块包：https://github.com/winshining/nginx-http-flv-module
下载FFmpeg：http://www.ffmpeg.org/releases/ffmpeg-4.2.2.tar.bz2
下载yasm（安装FFmpeg可能会报错，所以需要安装yasm）：http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
下载x264（视频转码需要用到）：https://git.videolan.org/git/x264.git
下载nasm（x264编译时需要安装nasm）：https://www.nasm.us/pub/nasm/releasebuilds/2.14.02/nasm-2.14.02.tar.bz2

下载完以后将所有的文件上传到 /usr/local 文件夹下面

附：百度网盘链接 所需的 安装包
https://pan.baidu.com/s/1dHS9B8pdpNclCVi9tKlIkQ 密码 asba

一、搭建环境

安装nginx
在 /user/local 下创建 nginx 文件夹

mkdir /usr/local/nginx

安装依赖项

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

将 /user/local 下面的 nginx-http-flv-module-master.zip 解压到 /usr/local/nginx 下面

cd /usr/local
unzip nginx-http-flv-module-master.zip  //解压文件
cp -r /usr/local/nginx-http-flv-module-master /usr/local/nginx/nginx-http-flv-module  //解压文件复制到/usr/local/nginx 目

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

cd /usr/local
tar -zxvf nginx-1.16.1.tar.gz
cd nginx-1.16.1/
./configure --prefix=/usr/local/nginx  --add-module=/usr/local/nginx/nginx-http-flv-module
make 
make install
ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/  //配置nginx为全局变量
nginx -v  //查看nginx是否安装成功

二、修改配置文件

1.修改配置文件nginx.conf

cd /usr/local/nginx/conf
vi nginx.conf

worker_processes  1; #Nginx开启1个子进程，子进程个数最好跟CPU的核心数一样
#worker_processes  auto; #from versions 1.3.8 and 1.2.5

#worker_cpu_affinity  0001 0010 0100 1000; #CPU的mask，子进程使用它来绑定CPU核心，避免进程切换造成性能损失
#worker_cpu_affinity  auto; #from version 1.9.10

error_log logs/error.log error; #错误日志位置和日志级别，如果使用默认编译选项，位置为/usr/local/nginx/logs/error.log，error表示只打印错误日志

events {
    worker_connections  4096; #Nginx处理的最大连接数
}

http {
    include             mime.types;
    default_type    application/octet-stream;
    sendfile            on;
    keepalive_timeout  65;

    server {
        listen       80; #Nginx监听的HTTP请求端口
        server_name  localhost;
        location / {
            root    html; #HTTP请求URL映射到服务器的位置
            index  index.html index.htm; #HTTP请求优先请求的文件
        } 

        location /live {
            flv_live on; #当HTTP请求以/live结尾，匹配这儿，这个选项表示开启了flv直播播放功能
            chunked_transfer_encoding  on; #HTTP协议开启Transfer-Encoding: chunked;方式回复

            add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
            add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
        }

        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root  /usr/local/nginx/module/nginx-http-flv-module;
        }

        location /control {
            rtmp_control all;
        }
        
        error_page   500 502 503 504  /50x.html; #如果遇到这些HTTP请求错误，Nginx返回50x.html的内容
        location = /50x.html {
            root   html;
        }
    }
}

rtmp_auto_push on; #因为Nginx可能开启多个子进程，这个选项表示推流时，媒体流会发布到多个子进程
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp; #多个子进程情况下，推流时，最开始只有一个子进程在竞争中接收到数据，然后它再relay给其他子进程，他们之间通过unix domain socket传输数据，这个选项表示unix

rtmp {
    out_queue                4096;
    out_cork                   8;
    max_streams            128; #Nginx能接受的最大的推流数
    timeout                    15s;
    drop_idle_publisher 15s;

    log_interval 5s; 
    log_size     1m; 

    server {
        listen 1935; #Nginx监听的RTMP推流/拉流端口，可以省略，默认监听1935
        server_name 127.0.0.1;

        application myapp {
            live on; #当推流时，RTMP路径中的APP（RTMP中一个概念）匹配myapp时，开启直播
            record off; #不记录视频
            gop_cache on;  #开启GOP（Group of Picture）缓存，播放器解码时，收到一个完整的GOP才会开始播放，这个是减少播放延迟的选项
        }
    }
}

测试nginx是否好用

nginx -t //检查nginx
nginx //启动
ps -ef | grep nginx //查看nginx进程
浏览器输入地址是否可以访问成功

2.安装FFmpeg

安装前期准备下载的nasm

cd /usr/local
tar -jxvf nasm-2.14.02.tar.bz2  //如果解压不了的话安装一下bzip2（ yum install -y bzip2 ）
cd nasm-2.14.02/
./configure
make
make install

安装前期准备下载的yasm

cd /usr/local
tar -zxvf yasm-1.3.0.tar.gz
cd yasm-1.3.0/
./configure
make && make install

安装x264（RTSP视频流转码时需要x264）

cd /usr/local/x264
./configure --enable-static --enable-shared
make && make install

安装FFmpeg

cd /usr/local
tar -jxvf ffmpeg-4.2.2.tar.bz2
cd ffmpeg-4.2.2/
./configure --prefix=/usr/local/ffmpeg  --enable-gpl --enable-libx264
make && make install  （FFmpeg编译时间比较长）
ln -s /usr/local/ffmpeg/bin/ffmpeg /usr/local/bin  //配置ffmpeg全局环境变量
ffmpeg -version  //查看ffmpeg是否安装成功
直接运行FFmpeg可能报如下错误（重点）

ffmpeg: error while loading shared libraries: libx264.so.157: cannot open shared object file: No such file or directory
解决：
vi /etc/ld.so.conf
添加libx264.so文件位置
我的是在：/usr/local/lib/ 加入到 ld.so.conf
重载配置:ldconfig

3.推流

ffmpeg -re -rtsp_transport tcp -i "rtsp://admin:Biao456813@192.168.153.194:554/h264/ch1/main/av_stream" -f flv -vcodec libx264 -vprofile baseline -acodec aac -tune zerolatency -preset ultrafast -ar 44100 -strict -2 -ac 1 -f flv -s 1980x1080-q 10 "rtmp://192.168.153.204:1935/myapp/home"

Html代码：

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>flv.js demo</title>
  <style>
    .mainContainer {
      display: block;
      width: 1024px;
      margin-left: auto;
      margin-right: auto;
    }

    .urlInput {
      display: block;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .centeredVideo {
      display: block;
      width: 100%;
      height: 576px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: auto;
    }

    .controls {
      display: block;
      width: 100%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>

<body>

  <p class="mainContainer">
    <video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024" height="576">
      Your browser is too old which doesn't support HTML5 video.
    </video>
  </p>

  <script src="flv.js"></script>

  <script>

    function start() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: 'http://192.168.153.204/live?port=1935&app=myapp&stream=home'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    }

    document.addEventListener('DOMContentLoaded', function () {
      start();
    });
  </script>

</body>

</html>

worker_processes  1;

error_log  logs/error.log debug;

events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935;
	   server_name 192.168.223.131;
        application live {
            live on;
        }
	 application livetwo {
            live on;
        }
         application livethree {
            live on;
        }
         application livefour {
            live on;
        }
        application hls {
            live on;
            hls on;  
            hls_path /usr/local/nginx/html/hls;  
            #hls_path /usr/local/nginx/logs; 
#            hls_fragment 8s;  
        }
        application dash{
	   live on;
	   dash on;
	   dash_path /usr/local/nginx/html/dash;
	 }
    }
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8002;
	server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
	location /live{
		flv_live on;
		chunked_transfer_encoding  on;
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
	}
	location /livetwo{
		flv_live on;
		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-master;
	}

	 location /control {
            rtmp_control all; #configuration of control module of rtmp
        }	
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

总结

以上为 linux 下搭建视频流服务器的全部过程

北野木
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在angular框架下使用flv.js播放http-flv实时流直播视频
kerryasuka的博客
11-30 7961
目录 说明 总体思路 FFmpeg Nginx flv.js 效果展示 总结 说明 前段时间，我写了一篇在angular框架下使用videojs播放RTMP视频流的文章，虽然播放起来流畅度较好，但仍然有一个缺陷： 由于RTMP协议本身属于Adobe公司且未开源，因而必须调用Flash才能播放并得到最好的支持，即使引入了video.js以及videojs-flash两个库作...
FFmpeg+rtmp+Nginx-http-flv-module+flvjs实现直播
qq_40420929的博客
10-28 1632
运行环境：windows Nginx-rtmp-module不支持flvjs Nginx-http-flv-module支持flvjs 步骤：将nginx-http-flv-module编译到nginx，然后设置配置文件，开启服，进行推流拉流。 1.我已经将其编译好，并设置好nginx.conf配置文件，打包如下： windows下编译好的nginx+nginx-http-flv (提取码：1234) 2.FFmpeg推流 推摄像头，可以用命令ffmpeg -list_devices true -f dsh
nginx+Ffmpeg+nginx-http-flv-module将接受到的rtmp视频流在html播放
goodtimealways的博客
05-12 2407
最近调试个接口需要将接口返回的 " rtmp://ns8.indexforce.com/home/mystream "这个rtmp地址在html页面播放,因为现在各大浏览器都不支持flash插件了,所以这个rtmp需要转成html支持的格式才可以,我也是查了各种资料才发现可以用ffmpeg将视频流推到nginx上,再有nginx转成html支持的样式 1.首先要下载nginx和nginx-http-flv-module模板,这个没什么说的,大家可以参考下这个 六、nging-http-flv-modul
ffmpeg+flv视频推拉流实现（demo版）
前端成长之路
09-26 868
工作需要，记录一下前后端推拉流方案，基于HTTP-FLV协议，使用node + flv.js + ffmpeg进行前后端交互。此方案为demo版，目的是打通前后端链路，项目应用正在研究中。
nginx+nginx-http-flv-module在Linux服务器搭建
最新发布
qq_56573709的博客
05-20 728
在服务器搭建点播/视频平台的话需要在服务器搭建nginx和rtmp模块。
Nginx+FFmpeg+nginx-http-flv-module实现RTSP/RTMP视频流转FLV用于web端播放
qq_28174545的博客
07-29 4129
Nginx+FFmpeg+nginx-http-flv-module实现RTSP/RTMP视频流转FLV用于web端播放
nginx-1.19.3-http-flv.zip
10-16
资源说明： 1. 采用nginx最新版编译，包含最新的nginx-http-flv-module，以及基础模块openssl、prce、zlib 2. 整体打包，已配置好nginx.conf的http-flv直播流，以及http web环境。无需任何配置即可使用 3. 自带windows的服务注册程序，使用如下方式，将nginx注册为windows的服务，实现无人值守维护管理 windows服务注册： 1. 将压缩包解压到D:\nginx-1.19.3目录下 2. 使用cmd命令打开DOS，并切换到D:\nginx-1.19.3 3. 使用nginxservice.exe install安装
使用nginx和ffmpeg搭建HTTP FLV流媒体服务器（摄像头RTSP视频流-＞RTMP-＞http-flv）
weixin_38340874的博客
07-21 8542
名词解释RTSP是一种网络协议，用于控制实时流媒体的传输。它是一种应用层协议，通常用于在客户端和流媒体服务器之间建立和控制媒体流的传输。RTSP允许客户端向服务器发送请求，如播放、暂停、停止、前进、后退等，以控制媒体流的播放和操作。RTSP可以与不同的传输协议（如RTP、TCP、UDP）结合使用，以实现实时的音视频流传输。它在视频监控、流媒体直播、视频会议等应用中广泛使用。RTMPRTMP（Real-Time Messaging Protocol）是一种用于实时数据传输的网络协议。
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
BADAO_LIUMANG_QIZHI的博客
03-09 8319
前面使用Vue播放RTMP流时，需要借助于flash。这种方式对于flash插件的安装与后续浏览器支持等都不是很好。可以采用将rtmp的视频流转换成HTTP-FLV的方式，然后前端通过bilibili的flv.js实现播放。
vlc搭建rtsp直播Demo & ffmpeg + nginx + flv.js实现rtsp网页播放Demo
pscool的博客
05-14 4615
如图选择ts流（激活转码要勾选哦），点击下一个。点击添加，选择视频文件，后点击串流。然后，稍等，就可以看到视频在播放了。输入rtsp的地址，点击播放。手动输入rtsp的推流地址。与上面相同，点击媒体->流。选择rtsp后，点击添加。手动输入路径，点击下一个。点击媒体->打开网络串流。可以看到推流地址，点击流。点击串流后，点击下一个。即可看到，它开始推流了。选择rtsp，点击添加。选择ts，点击下一个。
nginx-http-flv-module + ffmpeg编译实现http-flv
luctse的博客
03-23 2475
编译nginx-http-flv-module模块 环境 编译安装的环境是ubuntu16.04 更新系统与安装需要的依赖 sudo apt-get update sudo apt install build-essential sudo apt install libtool sudo apt install libpcre3 libpcre3-dev sudo apt install z...
nginx+ffmpeg+nginx-http-flv-module+html资源包
05-11
3. **nginx-http-flv-module**: 这是Nginx的一个扩展模块，专门用于支持HTTP FLV协议，从而实现FLV格式的实时流媒体服务。`nginx-http-flv-module-v1.2.9.zip`包含了该模块的源代码，通过将其添加到Nginx配置中，...
Windows下一站式搭建ffmpeg推流+nginx-http-flv-module直播拉流+FLV.js播放环境.rar
09-01
1、在Windows系统下，搭建ffmpeg推流+nginx-http-flv-module直播拉流+FLV.js播放环境，所需依赖相关资源文件。 2、适合初学、研究、验证视频直播部署方案的相关技术人员。
ffmpeg+nginx-rtmp-module+flv监控视频web展示
04-12
FFmpeg、Nginx-RTMP-Module 和 FLV 监控视频Web展示是一个整合了实时流媒体处理、传输和播放的技术方案。这个方案适用于在Web端实现监控视频的实时展示，尤其对于需要构建远程监控系统或者直播平台的场景非常实用。...
ffmpeg录制屏幕并推流ffmpeg+nginx-http-flv-module+flv.js
01-02
在“ffmpeg录制屏幕并推流ffmpeg+nginx-http-flv-module+flv.js”这个主题中，我们将深入探讨如何利用FFmpeg来录制桌面，并通过HTTP FLV模块将流推送到Nginx服务器，最后利用flv.js库在网页上播放。 首先，FFmpeg的...
nginx + nginx-http-flv-module-1.2.9
07-06
nginx-http-flv-module 是由 nginx 开发社区创建的一个第三方模块，用于在 Nginx 上实现 HTTP 直播（HTTP Live Streaming，HLS）和FLV格式的视频流。FLV（Flash Video）是 Adobe Flash 平台广泛使用的视频格式，...
使用ffmpeg+nginx+flvjs实现web播放rtsp视频流
weixin_44387339的博客
05-28 7831
文章目录1. 简介2. 安装ffmpeg3. 安装nginx3.1 安装nginx依赖3.1.1 pcre3.1.2 zlib3.1.3 openssl3.2 1. 简介 大部分网络摄像机，比如海康威视都支持rtsp协议视频流，但是web一般是无法直接播放rtsp协议视频流的，需要在服务器上把rtsp视频流转换成web其他协议。本篇博客介绍利用ffmpeg、nginx、flvjs实现web浏览rtsp视频流。 所用到的服务器操作系统为ubuntu20.04。 2. 安装ffmpeg sudo apt up
配置nginx，使其可以以https的方式播放http-flv的直播流
崔杰城的博客
04-24 5454
一、背景 由于在微信小程序中需要https的接入，所以要想在微信小程序中播放http-flv的直播流可能需要以https的方式。下面讲述如何配置nginx，使其可以以https的方式播放http-flv的直播流。 二、下载nginx 首先必须得下载nginx + http-flv-module + http_ssl_module编译（如果不想编译或者编译不出来，可以直接下载Car-eye-team / car-eye-http-flv-module，里面提供编译好的windows...
windows下一站式搭建ffmpeg推流+nginx-http-flv-module直播拉流+flv.js播放环境
08-18
在Windows下一站式搭建ffmpeg推流、nginx-http-flv-module直播拉流和flv.js播放环境可以按照以下步骤进行操作： 1. 首先，下载并安装FFmpeg。可以在官方网站（https://www.ffmpeg.org/）上找到适合你的操作系统的安装文件，然后按照指示进行安装。 2. 下载nginx服务器，并在安装目录下找到“conf/nginx.conf”文件，使用文本编辑器打开。编辑该文件，配置推流和拉流的相关设置。 3. 在“http”部分添加以下配置信息： ``` rtmp { server { listen 1935; application live { live on; allow publish all; allow play all; push rtmp://127.0.0.1/live/$name; } } } ``` 4. 在“server”部分添加以下配置信息： ``` location /live { flv; chunked_transfer_encoding on; root html; } ``` 5. 打开命令行，并定位到nginx安装目录的文件夹下运行：“start nginx”命令启动nginx服务器。 6. 下载并安装flv.js（https://github.com/Bilibili/flv.js）。 7. 在项目的HTML文件中引入flv.js库文件，并使用以下JavaScript代码播放视频： ``` if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://localhost/live/stream.flv' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } ``` 8. 访问网页并检查视频是否能够正常播放。 通过以上步骤，你可以在Windows系统下一站式搭建起FFmpeg推流、nginx-http-flv-module直播拉流和flv.js播放环境，实现流媒体的推流、拉流和播放功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值