前言
接前面两篇文章 rtsp视频服务 转换为 rtmp服务 转换为前端可用的服务, rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务
继续讨论 前端播放 rtsp 视频服务
这里使用 GitHub - deepch/RTSPtoWeb: RTSP Stream to WebBrowser 作为后台服务, 来做 rtsp 视频服务的转换, 它可以转换为 hls, hls-ll, websocket, webrtc, rtsp 的服务
RTSPToWeb 服务的启动
这里基于 docker 启动
version: "2"
services:
rtsp-2-web:
container_name: rtsp-2-web
image: ghcr.io/deepch/rtsptoweb:latest
restart: always
ports:
- 8083:8083
- 5541:5541
volumes:
- ./config:/config配置 /config/config.json
{
"server": {
"debug": true,
"log_level": "info",
"http_demo": true,
"http_debug": false,
"http_login": "demo",
"http_password": "demo",
"http_port": ":8083",
"ice_servers": [
"stun:stun.l.google.com:19302"
],
"rtsp_port": ":5541"
},
"streams": {
"hls": {
"name": "test_rtps",
"channels": {
"test_rtps": {
"name": "test_rtps",
"url": "rtsp://192.168.0.104:8554/rtsp/test_rtsp",
"on_demand": true,
"debug": false,
"audio": true,
"status": 0
}
}
}
},
"channel_defaults": {
"on_demand": true
}
}启动 RTSPToWeb
master:rtsp-2-web jerry$ docker-compose up -d
WARNING: The TIME_ZONE variable is not set. Defaulting to a blank string.
Creating network "rtsp-2-web_default" with the default driver
Creating rtsp-2-web ... done配置的 rtsp 的各种访问方式如下
hls : http://localhost:8083/stream/hls/channel/test_rtps/hls/live/index.m3u8
hls-ll : http://localhost:8083/stream/hls/channel/test_rtps/hlsll/live/index.m3u8
websocket : ws://localhost:8083/stream/hls/channel/test_rtps/mse?uuid=hls&channel=test_rtps
webrtc : http://localhost:8083/stream/hls/channel/test_rtps/webrtc
rtsp : rtsp://localhost:5541/hls/test_rtpsRTSPToWeb 的管理界面访问 rtsp 服务
websocket 的可以正确的拿到数据并展示
hls 可以拿到数据, 但是不能正确展示
hls-ll 拿不到正确的数据, 并且不能正确展示
webrtc 就搞不清楚什么状况了, 请求是 正确的, 没有持续的请求, 但是 播放不出来
hls 的播放
hls 访问的 url 为 http://localhost:8083/stream/hls/channel/test_rtps/hls/live/index.m3u8
但是这个 demo 里面展示不出来, RTSPtoWeb 官方的 demo 也展示不出来, vlc 中也播放不出来, 但是能够看到进度信息
但是 从接口上来看 是能够正确拿到数据的
<!DOCTYPE html>
<html>
<head>
<title>M3u8Usage</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js"></script>
<script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js"></script>
<style>
#dplayer {
width: 500px
}
</style>
<script>
function init() {
const dp = new DPlayer({
element: document.getElementById('dplayer'),
video: {
// pic: videoInfo.img, // 封面
url: "http://localhost:8083/stream/hls/channel/test_rtps/hls/live/index.m3u8",
type: 'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls()
hls.loadSource(video.src)
hls.attachMedia(video)
}
}
}
})
}
</script>
</head>
<body onload="init()">
<div>
<div id="dplayer"></div>
</div>
</body>
</html>M3u8Usage.html 中接口数据请求正常, 但是 加载不出来
vlc 中可以看到进度条
hls-ll 的播放
hls-ll 访问的是 http://localhost:8083/stream/hls/channel/test_rtps/hlsll/live/index.m3u8
但是这个 demo 里面展示不出来, RTSPtoWeb 官方的 demo 也展示不出来, vlc 中可以播放不出来, 但是能够看到进度信息
vlc 的播放
websocket 的播放
websocket 访问的是 ws://localhost:8083/stream/hls/channel/test_rtps/mse?uuid=hls&channel=test_rtps
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body, center {
padding: 0;
margin: 0;
}
.v-container {
width: 640px;
height: 360px;
border: solid 1px red;
}
video {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="v-container">
<video id="player1" muted autoplay="autoplay" preload="auto" controls="controls">
</video>
</div>
<script>
let mseStreamingStarted = true
let mseQueue = []
let url = 'ws://localhost:8083/stream/hls/channel/test_rtps/mse?uuid=hls&channel=test_rtps'
let mse = new MediaSource();
document.getElementById("player1").src = window.URL.createObjectURL(mse);
mse.addEventListener('sourceopen', function() {
let ws = new WebSocket(url);
ws.binaryType = "arraybuffer";
ws.onopen = function(event) {
console.log('Connect to ws');
}
ws.onmessage = function(event) {
let data = new Uint8Array(event.data);
if (data[0] == 9) {
decoded_arr = data.slice(1);
if (window.TextDecoder) {
mimeCodec = new TextDecoder("utf-8").decode(decoded_arr);
} else {
mimeCodec = Utf8ArrayToStr(decoded_arr);
}
if(mimeCodec.indexOf(',')>0){
videoSound=true;
}
mseSourceBuffer = mse.addSourceBuffer('video/mp4; codecs="' + mimeCodec + '"');
mseSourceBuffer.mode = "segments"
mseSourceBuffer.addEventListener("updateend", pushPacket);
} else {
readPacket(event.data);
}
};
}, false);
function pushPacket() {
if (!mseSourceBuffer.updating) {
if (mseQueue.length > 0) {
packet = mseQueue.shift();
mseSourceBuffer.appendBuffer(packet);
} else {
mseStreamingStarted = false;
}
}
if (document.getElementById("player1").buffered.length > 0) {
if (typeof document.hidden !== "undefined" && document.hidden && !videoSound) {
document.getElementById("player1").currentTime = document.getElementById("player1").buffered.end((document.getElementById("player1").buffered.length - 1)) - 0.5;
}
}
}
function readPacket(packet) {
if (!mseStreamingStarted) {
mseSourceBuffer.appendBuffer(packet);
mseStreamingStarted = true;
return;
}
mseQueue.push(packet);
if (!mseSourceBuffer.updating) {
pushPacket();
}
}
</script>
</body>
</html>展示效果如下
vlc 不支持播放
webrtc 的播放
没有找到 合适的加载 http://localhost:8083/stream/hls/channel/test_rtps/webrtc 的方式
vlc 不支持播放
rtsp 的播放
rtsp 访问的是 rtsp://localhost:5541/hls/test_rtps
vlc 播放
完
