1. 全栈程序员必看首页

Nginx-rtmp、FFmpeg实现直播效果并在web页面播放「建议收藏」

全栈程序员-用户IM • • 未分类

Nginx-rtmp、FFmpeg实现直播效果并在web页面播放「建议收藏」本文参考链接：https://blog.csdn.net/u011424614/article/details/113420000前情提示：本文使用的是windows10系统主要流程讲解1.本文选择的路线是视频文件–>FFmpeg–>nginx–>web播放2.FFmpeg是一个强大的视频编辑软件，基本干视频，音频的多多少少都会用到这个软件。本文中FFmpeg的作用是将视频整成视频流的形式。3.nginx的作用主要是将FFmpeg的视频流进行发布，供web进行访问。4.

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

本文参考链接：https://blog.csdn.net/u011424614/article/details/113420000

在这里插入图片描述

前情提示：本文使用的是windows10系统

主要流程讲解

1.本文选择的路线是 视频文件–>FFmpeg–>nginx–>web播放
2.FFmpeg是一个强大的视频编辑软件，基本干视频，音频的多多少少都会用到这个软件。本文中FFmpeg的作用是将视频整成视频流的形式。
3.nginx的作用主要是将FFmpeg的视频流进行发布，供web进行访问。
4.web访问我选择了video标签，参考文章中还出现了一种div形式的，也是很好的。

第一步：下载FFmpeg

百度链接：https://pan.baidu.com/s/1isTdobOaDEcQXcNAs_f9fw 提取码：0ohe
官网：https://ffmpeg.org/download.html
安装教程就是解压完了然后配置一下环境变量就行了。path里面配到bin目录

在这里插入图片描述

第二步：安装nginx

这个更简单，下载完了解压一下，然后把rtmp的放在nginx的总目录下就行了，主要是配置文件的书写。
nginx百度链接：https://pan.baidu.com/s/1V9kcE8KmD8JdlI-fvXe0bQ 提取码：z70m
nginx官网下载：https://nginx.org/en/download.html

rtmp模块github下载：https://github.com/illuspas/nginx-rtmp-win32/tree/master
rtmp模块百度下载：https://pan.baidu.com/s/1gP165PFQOm4POgJFeT8jBw 提取码：4psx

nginx解压，把rtmp模块放在他的总目录下，下面是截图
在这里插入图片描述
在conf目录下新建一个nginx-rtmp.conf文件，把下面这段代码复制进去
下文中的注意事项，要建好 C://m3u8//live 和 C://m3u8//show 这两个文件夹，视频被直播时是会被处理的，这两个就是处理时需要用来存储处理材料的文件夹。当然，名字和位置你可以自己定义。

worker_processes  1;
events { 

worker_connections  1024;
}
# # RTMP configuration
rtmp { 

server { 

listen 1935; # Listen on standard RTMP port
chunk_size 4000;
application livetv { 

live on;
# Turn on HLS
hls on;
hls_path C://m3u8//live;
hls_fragment 3;
hls_playlist_length 60;
# disable consuming the stream from nginx as rtmp
deny play all;
}
application file { 

live on;
# Turn on HLS
hls on;
hls_path C://m3u8//show;
hls_fragment 3;
hls_playlist_length 60;
# disable consuming the stream from nginx as rtmp
deny play all;
}
}
}
http { 

sendfile off;
tcp_nopush on;
# aio on;
directio 512;
default_type application/octet-stream;
server { 

listen 8080;
location /live { 

# Disable cache
add_header Cache-Control no-cache;
# CORS setup
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length';
# allow CORS preflight requests
if ($request_method = 'OPTIONS') { 

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types { 

application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias C://m3u8//live;
# root E://m3u8;
}
location /show { 

# Disable cache
add_header Cache-Control no-cache;
# CORS setup
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length';
# allow CORS preflight requests
if ($request_method = 'OPTIONS') { 

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types { 

application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias C://m3u8//show;
# root E://m3u8;
}
}
}

第三步：写好代码

此处我只写出我用的video那段，另外一种div的请到页首的参考链接里面学习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>直播</title>
<link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<body>
<video id="liveVideo" class="video-js vjs-default-skin vjs-big-play-centered" autoplay muted>
<source id="source" src="http://127.0.0.1:8080/show/stream.m3u8" type="application/x-mpegURL">
</video>
</body>
<script> var liveVideo = videojs('liveVideo',{ 
 bigPlayButton : true, textTrackDisplay : false, posterImage: false, errorDisplay : false, }) // let li = document.getElementById("liveVideo"); // li.style.display = 'none'; </script>
</html>

第四步：启动

个人建议启动顺序：nginx，web页面，ffmpeg
启动nginx：先到nginx文件夹中，打开cmd，使用下面命令
该命令是让nginx按照指定配置文件进行启动

nginx -c conf/nginx-rtmp.conf

启动web页面：双击
启动ffmpeg：先到你要发布的视频文件夹中，打开cmd，使用下面命令
0169.flv替换成你的视频，其他的我建议你不要乱动，如果你是新手的话

ffmpeg -re -i 0169.flv -vcodec libx264 -vprofile baseline -g 30 -acodec aac -strict -2 -f flv rtmp://127.0.0.1:1935/file/stream

第五步：看页面啊，还看我的博客干啥。

成功的请三连谢谢，没成功的出门左转，再见。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/184808.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号