将RTSP从带有节点媒体服务器的IP凸轮重新流式传输到http / ws并使用html显示

时间:2018-12-26 16:42:13

标签: javascript html node.js url rtsp

目标

我的目标是在标准HTML页面(html5 + css3 +香草javascript,无魔术=无插件)上显示IP cam的RTSP输出流。 HTML页面应托管在我的Raspberry Pi上的NGINX Web服务器中。

我的设备

我正在使用的设置是具有Rasbian OS,Node.js和Node-Media-Server package,NGINX的Raspberry Pi 3 B +(但我不相信NGINX对于我的问题很重要?我还没有做出还是其中的节点媒体服务器的任何配置。)一个IP摄像机和一个浏览器。 enter image description here

我尝试过的

Node-Media-Server-project中的readme进行了详细介绍,并且有一个教程几乎完全描述了我想做什么。具体来说,有一个有关如何访问实时流的标记示例:

<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>

这是我在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();

我的问题和疑问

当我尝试通过Raspberry Pi(即本地主机)上的Chromium浏览器查看camera.html(请参见上面的标记)时,什么也没显示。在Chromium调试检查器中,没有javascript错误,但是我得到了:
GET http://localhost:8000/live/uterum.flv net::ERR_EMPTY_RESPONSE

这是节点终端的屏幕截图: enter image description here 红色区域显示了当我尝试向http://localhost:8000/live/uterum.flv发出请求时的输出。

我想我尝试到达错误的终点,但是哪个正确?该文档指出http://localhost:8000/live/STREAM_NAME.flv。在我的情况下,“ STREAM_NAME是什么?

1 个答案:

答案 0 :(得分:1)

从配置中可以看到,您的RTSP流已推送到“ cctv”应用程序。

因此您的播放地址应为:

rtmp:// localhost / cctv / uterum

http://localhost:8000/cctv/uterum.flv