场景是：A机器装FFmpeg连接摄像头，B机器装nginx，A机器将视频流推到B机器，页面程序访问B机器的地址播放视频。
1、FFmpeg必须装
官网：http://ffmpeg.org
FFmpeg功能强大，主要用来推流拉流，自带的ffplay还可以实现播放。
2、nginx必须装
nginx需要启用rtmp模块
linux：先把rtmp模块clone下来https://github.com/arut/nginx-rtmp-module，编译时加入rtmp模块。
-
./configure --prefix=/usr/local/nginx --add-module=../nginx-rtmp-module --with-http_ssl_module --with-pcre=../pcre-8.42 --with-openssl=../openssl-1.1.0i --with-zlib=../zlib-1.2.11 -
make && make install
windows：直接下载带rtmp模块的nginx地址http://nginx-win.ecsds.eu/download/nginx 1.7.11.3 Gryphon.zip。
3、nginx配置
linux下是nginx.conf，windows下是nginx-win.conf，两个地方需要改：
1.在外层增加rtmp{}。
rtmp { #保存所有rtmp配置的块
server { #声明一个rtmp实例
listen 1935; #给Nginx添加一个监听端口以接收rtmp连接
chunk_size 4096; #流整合的最大的块大小。默认值为4096。这个值设置的越大CPU负载就越小。这个值不能低于128
application hls { #hls的地址
live on;
hls on;
hls_path html/hls;
hls_fragment 1s;
}
application live { #rtmp的地址
live on;
}
}
}
2.http-->server里面增加：
http {
server {
listen 8085; #注意该端口
location / {
root html;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root html;
}
# ffmpeg生成hls流的http访问配置
location /hls {
#若nginx\conf\mime.types中没有配置如下type，请加上，或直接在mime.types加
types{
#application/vnd.apple.mpegurl m3u8;
application/x-mpegURL m3u8;
video/mp2t ts;
}
root html;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
}
}
}
4、nginx启动
windows下：
nginx.exe -c conf\nginx-win.conf访问localhost看到nginx欢迎页面即成功。
5、FFmpeg推流
方式一：rtsp转rtmp
ffmpeg -i "rtsp://admin:password@192.168.100.205:554/h264/ch1/main/av_stream" -vcodec libx264 -acodec aac -f flv rtmp://192.168.100.170:1935/live/movie
A机器使用ffmpeg命令推流，-i后面是摄像头流地址，-flv后面是推到nginx机器的地址。
使用命令：ffplay.exe rtmp://localhost:1935/live/movie 可以查看视频。
方式二：rtsp转hls
ffmpeg -i "rtsp://admin:password@192.168.100.205:554/h264/ch1/main/av_stream" -vcodec libx264 -acodec aac -f flv rtmp://192.168.100.170:1935/hls/movie
实际执行命令： ffmpeg -i "rtsp://admin:chenxin401@192.168.10.121:554/h264/ch1/main" -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/hls/movie
A机器使用ffmpeg命令推流，-i后面是摄像头流地址，-flv后面是推到nginx机器的地址。
B机器接收后可以在nginx html/hls目录下面看到ts视频片段。
使用命令：ffplay.exe http://localhost:8085/hls/movie.m3u8 可以查看视频。注意：其中8085为配置文件中配置的端口
总结：
hls比rtmp延时要高，但是rtmp页面需要调用flash才能播放，这是最大的缺点，hls则不用。
6、网页播放，注意，需要将下面文件放置于ngnix安装目录的html目录下，否则会出现如下错误
1.html:1 Access to XMLHttpRequest at 'http://video.xuecheng.com/video/lucene_ts/lucene.m3u8' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
video.js:80 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. MediaError
##############################################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
preload="auto"
width="640"
height="264"
data-setup="{}"
>
<source src="http://localhost:8085/hls/movie.m3u8" type="application/x-mpegURL"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
</body>
</html>
=======================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>videoJs</title>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<section id="videoPlayer">
<video id="my-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
<source src="http://localhost:8085/hls/movie.m3u8" type="application/x-mpegURL" id="target">
</video>
</section>
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<script type="text/javascript">
var player = videojs('my-video', { "poster": "", "controls": "true" }, function() {
this.on('play', function() {
console.log('正在播放');
});
//暂停--播放完毕后也会暂停
this.on('pause', function() {
console.log("暂停中")
});
// 结束
this.on('ended', function() {
console.log('结束');
})
});
</script>
</body>
7、运行，执行以下链接执行
http://localhost:8085/m3u8.html
=======================ngnix文件================================
worker_processes 1;
error_log logs/error.log debug;
events {
worker_connections 1024;
}
rtmp {
server {
listen 1935;
chunk_size 4096;
application hls {
live on;
hls on;
hls_path html/hls;
hls_fragment 1s;
}
application live {
live on;
}
}
}
http {
server {
listen 8085;
server_name localhost;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
location / {
root html;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root html;
}
location /hls {
types{
application/x-mpegURL m3u8;
video/mp2t ts;
}
root html;
add_header Cache-Control no-cache;
}
}
}
参考文章
https://blog.csdn.net/qq_21108311/article/details/94567915 nginx+ffmpeg实现流媒体
https://blog.csdn.net/wenqiangluyao/article/details/97897794?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.add_param_isCf Nginx+FFmpeg实现rtsp流转hls流，在WEB通过H5 video实现视频播放
https://blog.csdn.net/zongyue_wang/article/details/82698281Nginx支持HLS配置
3800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
