当前位置： 首页 > article >正文

EasyMedia播放rtsprtmp视频流（flvhls）

article 2024/12/4 16:00:40

学习链接

MisterZhang/EasyMedia - gitee地址

EasyMedia转码rtsp视频流flv格式，hls格式，H5页面播放flv流视频

EasyMedia播放rtsp视频流（vue2、vue3皆可用）

EasyMedia转码rtsp视频流flv格式，hls格式，H5页面播放flv流视频

flv.js直播点播，播放flv视频时快进、重连、卡死、延迟等问题

banmajio/RTSPtoHTTP-FLV - gitee 使用JavaCV开发的rtsp流转http-flv(rtmp也支持但不建议)流并进行推流的流媒体服务

Java中使用FFmpeg拉取RTSP流

[webrtc-streamer]

  • 史上最详细的webrtc-streamer访问摄像机视频流教程
  • vue实现rtsp视频流浏览器实时播放
  • VUE3 播放RTSP实时、回放(NVR录像机)视频流（使用webrtc-streamer）
  • vue项目中播放rtsp视频流

文章目录

  • 学习链接
  • 介绍
  • 步骤
    • easydarwin启动rtsp服务，ffmpeg推送摄像头（模拟rtsp视频流）
    • nginx添加rtmp支持模块，obs推送本地桌面（模拟rtmp视频流）
    • 启动EasyMedia
    • 添加流
    • 效果
      • 演示FLV
      • testFlv.html
      • testFlv2.html
      • 演示hls
      • testHls.html
      • testHls2.html
  • EasyMedia文档
    • 如何运行
      • flv播放
      • hls播放
      • 参数使用
      • 页面功能
      • restful api
      • 云台功能

介绍

Springboot、netty实现的http-flv、websocket-flv直播点播，支持rtsp、h264、h265、rtmp等多种源，h5纯js播放（不依赖flash），不需要nginx等第三方拉流服务，低延迟（支持识别h264、aac编码自动转封装）

步骤

首先，浏览器无法直接播放rtsp或rtmp格式的视频流，就比如之前 nginx搭建直播推流服务中，我们通过obs把流推送到nginx的rtmp服务，此时可以通过vlc直接通过rtmp的url链接直接播放rtmp视频流，但是浏览器不能直接使用这个rtmp的url链接，因此就通过nginx的rtmp模块插件配置到http服务开启flv_live，这样浏览器就访问这个http服务来播放视频了。

因此，要在浏览器播放rtmp和rtsp视频流，需要对这些视频流做转换。java提供了javacv库可以做到这个，easyMedia使用了这个实现流媒体播放。

easydarwin启动rtsp服务，ffmpeg推送摄像头（模拟rtsp视频流）

启动easydarwin，可以参考：EasyDarwin搭建直播推流服务，注意到rtsp服务端口是10054
在这里插入图片描述
把摄像头捕捉的视频推过去

ffmpeg -f dshow -i video="Integrated Camera" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:10054/test

在这里插入图片描述
此时可以通过vlc打开此流查看是否能够正常查看到视频 rtsp://127.0.0.1:10054/test
在这里插入图片描述

nginx添加rtmp支持模块，obs推送本地桌面（模拟rtmp视频流）

nginx添加rtmp支持模块参考：nginx搭建直播推流服务

obs设置推送目的地，在来源添加显示器采集

在这里插入图片描述
在这里插入图片描述
同样通过vlc查看是否推送成功，rtmp://192.168.134.3:8002/flv/test
在这里插入图片描述

启动EasyMedia

拉下easymedia的代码，本地启动

...
--------------------------------------------------------- 
	 EasyMedia is running! Access address: 
	 media port at : 	 8866 
	 http port at : 	 8888 
	 web Local: 	 http://localhost:8888 
	 web External: 	 http://192.168.134.5:8888 
	 httpflv: 	 http://192.168.134.5:8866/live?url={您的源地址} 
	 wsflv: 	 ws://192.168.134.5:8866/live?url={您的源地址} 
	 hls(m3u8): 	 http://192.168.134.5:8888/hls?url={您的源地址} 
	 h2-database: 	 http://192.168.134.5:8888/h2-console 
---------------------------------------------------------

添加流

在这里插入图片描述

效果

演示FLV

点击四分屏，选择1个屏，然后选择流，点击播放。
在这里插入图片描述

  • ws://localhost:8866/live?url=rtsp://127.0.0.1:10054/test
  • ws://localhost:8866/live?url=rtmp://192.168.134.3:8002/flv/test
    在这里插入图片描述
  • 把桌面和本地文件配置上去
    在这里插入图片描述

testFlv.html

访问：localhost:8888/testFlv.html

在这里插入图片描述
testFlv.html是项目中已经存在的文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>xgplayer</title>
    <style type="text/css">
      html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
    </style>
  </head>
  <body>
    <div id="mse"></div>
    <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
      <script src="//cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script><script>
      let player = new FlvJsPlayer({
		"id": "mse",
		"playsinline": true,
		"whitelist": [
				""
		],
		"url": "ws://localhost:8866/live?url=rtsp://127.0.0.1:10054/test"
      });
      
          </script>
  </body>
</html>

testFlv2.html

访问：localhost:8888/testFlv2.html
在这里插入图片描述

在static目录下新建testFlv2.html，验证是否可以播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FLV Stream Player</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
</head>
<body>
    <video id="videoElement" controls></video>
    <script>
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://localhost:8866/live?url=rtsp://127.0.0.1:10054/test'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>

演示hls

（注意，要先开启切片。支持hls内存切片（不占用本地磁盘，只占用网络资源））

首先，点击开启切片，会发出这个请求：http://localhost:8888/startHls?url=rtsp:%2F%2F127.0.0.1:10054%2Ftest，后台执行命令：C:\Users\zzhua195\.javacpp\cache\ffmpeg-4.4-1.5.6-windows-x86_64.jar\org\bytedeco\ffmpeg\windows-x86_64\ffmpeg.exe -i rtsp://127.0.0.1:10054/test -r 25 -g 25 -c:v libopenh264 -c:a aac -f hls -hls_list_size 1 -hls_wrap 6 -hls_time 1 -hls_base_url /ts/c9b5fc1f5dabc7615e14c901028fc0fb/ -method put http://localhost:8888/record/c9b5fc1f5dabc7615e14c901028fc0fb/out.m3u8
在这里插入图片描述
可以看到一直请求http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test，请求返回的是m3u8内容。然后请求对应的ts文件，达到了直播的效果，延迟比flv要高。
在这里插入图片描述

testHls.html

在这里插入图片描述
项目中已存在的文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>xgplayer</title>
    <style type="text/css">
      html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
    </style>
  </head>
  <body>
    <div id="mse"></div>
    <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
      <script src="//cdn.jsdelivr.net/npm/xgplayer-hls.js/browser/index.js" charset="utf-8"></script><script>
      let player = new HlsJsPlayer({
		"id": "mse",
		// "url": "http://localhost:8889/playback?cameraId=22&beginTime=2021-04-02 17:25:43&endTime=2021-04-02 17:26:08",
		// "url": "http://localhost:8889/playback",
		// "url":"http://localhost:8888/hls?url=rtsp://admin:VZCDOY@192.168.2.120:554/Streaming/Channels/101",
		"url":"http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test",
		"playsinline": true,
		"whitelist": [
				""
		]
      });
	  
	  console.log(player)
      
          </script>
  </body>
</html>

testHls2.html

可以看到也是不断的请求http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test，然后请求对应的ts文件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS Stream Player</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <video id="videoElement" controls></video>
    <script>
        if (Hls.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var hls = new Hls();
            hls.loadSource('http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test');
            hls.attachMedia(videoElement);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                videoElement.play();
            });
        }
        // For Safari, which supports HLS natively
        else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
            videoElement.src = 'http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test';
            videoElement.addEventListener('loadedmetadata', function () {
                videoElement.play();
            });
        }
    </script>
</body>
</html>

EasyMedia文档

如何运行

java -jar EasyMedia-0.0.1-SNAPSHOT.jar
还可以这样改端口
java -jar -Dserver.port=页面端口 -Dmediaserver.port=媒体端口 EasyMedia-0.0.1-SNAPSHOT.jar

flv播放

#播放url规则，easymedia启动后，直接将此链接用flv播放器就能放
http://localhost:8866/live?url={您的源地址}
ws://localhost:8866/live?url={您的源地址}

例如rtsp：
http://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102
ws://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102

本地文件（支持格式参照ffmpeg支持的格式）：
http://localhost:8866/live?url=d:/flv/testVideo.mp4
ws://localhost:8866/live?url=d:/flv/testVideo.mp4

电脑桌面投影（url改成desktop即可）：
http://localhost:8866/live?url=desktop
ws://localhost:8866/live?url=desktop

hls播放

#用hls播放器播放，必须要通过页面或者api开启切片后才能放，这功能是最近新增内容，后期会做优化
# （支持hls内存切片（不占用本地磁盘，只占用网络资源））
#注意此处是http端口8888，后期将统一使用媒体端口
http://localhost:8888/hls?url={您的源地址}

参数使用

#参数
autoClose=false（无人观看一分钟后自动关闭推流，默认true开启自动关闭，false不关闭）
ffmpeg=true （true为强制使用ffmpeg，否则默认使用javacv）


#永久播放
http://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&autoClose=false
ws://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&autoClose=false

#ffmpeg方式推流（遇到不支持的流可以使用此参数，强制使用ffmpeg）
http://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&ffmpeg=true
ws://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&ffmpeg=true

#可以多个参数一起，只需参数前面增加&&&
http://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&autoClose=false&&&ffmpeg=true
ws://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&autoClose=false&&&ffmpeg=true

页面功能

访问 http://localhost:8888

restful api

新增流 http://localhost:8888/add?url={您的源地址}&remark={备注}
停止并删除 http://localhost:8888/del?url={您的源地址}
停止flv推流 http://localhost:8888/stop?url={您的源地址}
开启flv推流 http://localhost:8888/start?url={您的源地址}
开启hls切片 http://localhost:8888/startHls?url={您的源地址}
停止hls切片 http://localhost:8888/stopHls?url={您的源地址}
查看保存的流 http://localhost:8888/list

云台功能

目前支持海康相机，大华待更新
http://localhost:8888/hk/ctrl?ip=192.168.2.120&op=left&username=admin&password=VZCDOY
ip 相机ip
op 操作，up、down、left、right、left_up、left_down、right_up、right_down、big、small
username 相机用户名
password 相机密码
port 控制端口（可不传）

http://www.kler.cn/a/420062.html

相关文章：

  • Linux命令行解释器的模拟实现
  • C++：std::fstream详细介绍
  • 【STM32 Modbus编程】-作为主设备读取线圈和输入
  • 【JMX JVM监控】Prometheus读取Trino的JMX数据到Grafana展示
  • 重学设计模式-工厂模式（简单工厂模式，工厂方法模式，抽象工厂模式）
  • Python实现网站资源批量下载【可转成exe程序运行】
  • 事务常见分类
  • 软件质量保证——单元测试之白盒技术
  • hdlbits系列verilog解答（Dff16e-同步复位上升沿16位触发器）-85
  • Python中字符串和正则表达式
  • python 练习题
  • 基于Spring Boot的宠物咖啡馆平台的设计与实现
  • Canal mysql数据库同步到es
  • 1001：Hello,World!(https://ybt.ssoier.cn/problem_show.php?pid=1001)
  • docker ps -a里的项目怎么运行
  • 如何在CentOS 7上安全地设置Apache网站目录权限
  • Visual Studio code中编写和运行C语言
  • 【HarmonyOS开发】华为商城应用页面实验示例解析（ArkTS实战解析）
  • 单片机状态机实现多个按键同时检测单击、多击、长按等操作
  • Efficient Multimodal Large Language Models: A Survey (高效多模态大型语言模型综述-全文翻译)
  • React 前端框架4
  • 路径规划之启发式算法之三：鲸鱼优化算法（Whale Optimization Algorithm）
  • Anaconda3安装及使用
  • （数据结构与算法）如何提高学习算法的效率？面试算法重点有哪些？面试需要哪些能力？
  • Vue3学习宝典
  • 计算机毕业设计Spark+SpringBoot旅游推荐系统 旅游景点推荐 旅游可视化 旅游爬虫 景区客流量预测 旅游大数据 大数据毕业设计