使用节点媒体服务器将 RTSP 从 IP cam 重新流式传输到 http/ws 并用 html 显示 [英] Re-stream RTSP from IP cam with Node Media Server to http/ws and display it with html
问题描述
目标
我的目标是在标准 HTML 页面(html5 + css3 + vanilla javascript，无魔法 = 无插件)上显示我的 IP 摄像头的 RTSP 输出流.HTML 页面应托管在我的 Raspberry Pi 上的 NGINX Web 服务器中.
我的装备
我使用的设置是带有 Rasbian OS、Node.js 和
我尝试了什么
Node-Media-Server-project中的红色区域说明了当我尝试向 http://localhost:8000/live/uterum.flv 发出请求时的输出.
我想我试图到达错误的终点，但哪个是正确的?文档说明 http://localhost:8000/live/STREAM_NAME.flv.就我而言，STREAM_NAME"是什么?
正如您从配置中看到的，您的 RTSP 流被推送到cctv"应用程序.
所以你的播放地址应该是:
rtmp://localhost/cctv/uterum
或
http://localhost:8000/cctv/uterum.flv
Goal
My goal is to display my IP cam's RTSP-output stream on a standard HTML-page (html5 + css3 + vanilla javascript, no magic = no plugins). The HTML-page should be hosted in a NGINX web server on my Raspberry Pi.
My equipment
The setup I am using is a Raspberry Pi 3 B+ with Rasbian OS, Node.js and Node-Media-Server package, NGINX (but I do not believe that NGINX is important for my problem? I have not made any config for the Node-Media-Server in it anyway.) An IP-camera, and a browser.
What I have tried
The readme in the Node-Media-Server-project is detailed and there is a tutorial describing almost exactly what I want to do. Specifically, there is a markup example on how the live stream could be accessed:
<html>
<head>
<title>Camera</title>
</head>
<body>
<script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://localhost:8000/live/uterum.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>
This is how I start the media server on my Raspberry PI, kommandoran-mediaserver.js:
const { NodeMediaServer } = require('node-media-server');
const config = {
logType: 3, // 3 - Log everything (debug)
rtmp: {
port: 1935,
chunk_size: 60000,
gop_cache: true,
ping: 60,
ping_timeout: 30
},
http: {
port: 8000,
allow_origin: '*'
},
relay: {
ffmpeg: '/usr/local/bin/ffmpeg',
tasks: [
{
app: 'cctv',
mode: 'static',
edge: 'rtsp://<USER>:<PASSWORD>@10.0.0.111/live1.sdp',
name: 'uterum',
rtsp_transport : 'tcp' //['udp', 'tcp', 'udp_multicast', 'http']
}
]
}
};
var nms = new NodeMediaServer(config)
nms.run();
My problem and question
When I try to view camera.html (see markup above) via the Chromium browser on Raspberry Pi (i.e. local host), nothing is displayed. In the Chromium debug inspector there are no javascript errors, but I get this:
GET http://localhost:8000/live/uterum.flv net::ERR_EMPTY_RESPONSE
Here is a screenshot from the node terminal:
The red area illustrates the output when I try to make a request to http://localhost:8000/live/uterum.flv.
I suppose I try to reach the wrong endpoint but which is correct? The documentation states http://localhost:8000/live/STREAM_NAME.flv. What is "STREAM_NAME" in my case?
As you can see from the configuration, your RTSP stream is pushed to the ‘cctv’ application.
So your playback address should be:
rtmp://localhost/cctv/uterum
or
http://localhost:8000/cctv/uterum.flv
这篇关于使用节点媒体服务器将 RTSP 从 IP cam 重新流式传输到 http/ws 并用 html 显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
