ffmpeg 直播推流到H5 全纪录

最新推荐文章于 2024-05-05 14:54:55 发布

@CAPRICA@

最新推荐文章于 2024-05-05 14:54:55 发布

阅读量981

点赞数

分类专栏：其它

本文链接：https://blog.csdn.net/joycesunny/article/details/116033776

版权

其它专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实验设备------两台服务器，A负责推流，B负责转码rtsp到http，文中路径请注意替换成你自己的

A：第一步下载ffmpeg 和 EasyDarwin

第二步修改 easydarwin.ini 相关配置，运行 EasyDarwin.exe

运行 ffmpeg，直播用一段mp4代替

ffmpeg -stream_loop -1 -re -i C:\Users\Administrator\Desktop\video\test.mp4  -rtsp_transport tcp -vcodec h264 -f rtsp rtsp://10.0.1.124/test

此时ffmpeg 已经推流至 EasyDarwin，地址是 rtsp://{ip}:{port}/{id}

B：安装node.js 点击下载下载 jsmpeg 点击下载

安装 webSocket模块在cmd控制台输入: npm install ws -g

目标是用ffmpeg转码 rtsp 到 8081端口，并送到前端webSocket的8082端口

先运行：

node C:\Users\Administrator\Desktop\rtsp\jsmpeg-master\websocket-relay.js test 8081 8082
pause

再运行：

ffmpeg -re -rtsp_transport tcp -i “rtsp://10.0.1.124:554/test” -q 0 -f mpegts -codec:v mpeg1video -s 544x960 http://127.0.0.1:8081/test

jsmpeg中有演示页面，修改其中地址例如

<!DOCTYPE html>
<html>
<head>
	<title>JSMpeg Stream Client</title>
	<style type="text/css">
		html, body {
			background-color: #111;
			text-align: center;
		}
	</style>
	
</head>
<body>
	<canvas id="video-canvas"></canvas>
	<script type="text/javascript" src="jsmpeg.min.js"></script>
	<script type="text/javascript">
		var canvas = document.getElementById('video-canvas');
		var url = 'ws://127.0.0.1:8082/';
		var player = new JSMpeg.Player(url, {canvas: canvas});
	</script>
</body>
</html>

浏览器中打开即可看到推流效果

附：如需直播，只要在A端做摄像头&麦克风推流，可参考此篇文章https://www.jianshu.com/p/e94a0a028b13

完成

@CAPRICA@

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ffmpeg 直播推流到H5 全纪录

实验设备------两台服务器，A负责推流，B负责转码rtsp到http，文中路径请注意替换成你自己的A：第一步下载ffmpeg 和EasyDarwin 第二步修改easydarwin.ini 相关配置，运行EasyDarwin.exe 运行ffmpeg，直播用一段mp4代替 ffmpeg -stream_loop -1 -re -i C:\Users\Administrator\De...
复制链接

扫一扫