EasyMedia播放rtsprtmp视频流（flvhls）

学习链接

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 nativelyelse 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 控制端口（可不传）