nginx+ffmpeg+VLC+video.js在windows上搭建流媒体服务器并在网页访问

最新推荐文章于 2025-04-11 20:00:00 发布

xiaoxiaoqiang666

最新推荐文章于 2025-04-11 20:00:00 发布

阅读量1.7k

点赞数

分类专栏：杂项文章标签： nginx ffmpeg video.js vlc 流媒体服务器

杂项专栏收录该内容

1 篇文章

订阅专栏

下载nginx时参考的网站：https://blog.youkuaiyun.com/w_wensan/article/details/80135839

第二步：修改配置文件conf\nginx-win-rtmp.conf 或conf\nginx-win.conf

rtmp {
server {
listen 1935;
chunk_size 4000;
application live {
live on;
allow play all;

# play /usr/local/data/live ; #//视频文件存放位置，访问方式rtmp://localhost:1935/live
#如视频路径存有视频1.mp4访问路径即为rtmp://localhost:1935/live/1.mp4
}
}

}

说明:

rtmp是协议名称
server 说明内部中是服务器相关配置
listen 监听的端口号, rtmp协议的默认端口号是1935
application 访问的应用路径是 gzhm
live on; 开启实时
allow play all; 允许所有地址发布/播放
record off; 不记录数据

在window中下载nginx的时候需要注意的是：我下载了两个版本“nginx1.7.11.3Gryphon”，“nginx-1.10.3”，前面的版本是上面链接中所用到的版本，并且这个版本可以正常的执行。而第二个下载的版本中，在加入了rtmp的配置后，总是会出现模块找不到的问题“nginx: [emerg] unknown directive "rtmp" in D:\mylib\nignx\nginx-1.10.3/conf/nginx.conf:16”。然后从网上查询了很多方法，都没有解决这个问题，然后就跟随上面的作者下载了他所用的版本，然后就没什么其他的问题了。

第三步：启动nginx：nginx.exe -c conf\nginx-win.conf 启动之后可以在浏览器中访问“localhost” 然后可以进入到其欢迎界面，这样就表示启动成功了。因为nginx默认配置的也是80端口，所以不需要输入端口号。

第四步：下载ffmpeg推流 https://ffmpeg.zeranoe.com/builds/

下载出来解压缩，然后将其bin目录加入到系统的环境变量中“path”。之后dos窗口输入 ffmpeg -version 命令，如果有一堆版本内容出现，说明已经配置成功了。然后执行：ffmpeg.exe -re -i G:\vedio\03.mp4 -f flv rtmp://localhost:1935/live/test 就可以进行推流了。其中G:\vedio\03.mp4是我电脑f盘上的一个MP4格式的文件，/live时是配置文件中application名称，/test随便定义都是可以的，只要播放器与这个地址一致就好，然后命令行里面会出现一堆的推流信息。

在推流的之后，如果希望其他的网络可以进行访问，那么可以将“localhost”修改为自己的ip地址

第五步：下载VLC播放器

下载之后，设置流访问地址，然后就可以访问了。如果不能播放，则多试几次。

第六步：在本地播放器中可以播放之后，然后如果在web端有需求，则可以通过video.js来解析rtmp类型的流数据

参考文章：https://blog.youkuaiyun.com/baienguon/article/details/80985973

而其中碰到的vedio.js版本不能播放的问题在上文中也已经有了明确的解释。而这里提供video.js下载地址：http://www.jq22.com/jquery-info404

第七步：下载之后，可以使用其提供的index.html来进行视频的播放，不过这个播放不支持静态html播放，需要在项目中才能进行访问。我的index.html如下：

<html>
<head>
<meta charset="utf-8">
<title>Video.js 6.2.8</title>
	<link href="<%=path %>/plugins/video/css/video-js.css" rel="stylesheet">	
	<style>
		body{background-color: #191919}
		.m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
	</style>
	
</head>

<body>
	<div class="m">
		<video id="my-video" class="video-js" controls preload="auto" width="740" height="400"
		  poster="m.png" data-setup="{}">
			<source src="rtmp://192.168.31.243:1935/live/test" type="rtmp/flv">
			<p class="vjs-no-js">
			  To view this video please enable JavaScript, and consider upgrading to a web browser that
			  <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
			</p>
		  </video>
	<script src="<%=path %>/plugins/video/js/video.min.js"></script>
	<script src="<%=path %>/plugins/video/js/videojs-ie8.min.js"></script>
		  <script type="text/javascript">
			var myPlayer = videojs('my-video');
			videojs("my-video").ready(function(){
				var myPlayer = this;
				myPlayer.play();
			});
		</script>
	</div>

</body>
</html>

需要将自己下载的css和js文件对应起来，同时需要注意，这个东东是需要浏览器支持flash插件的，如果不支持，它是不会播放的幺。