尽管 vlc 的质量很好，但浏览器中的 node-rtsp-stream 质量很低答案

【问题标题】：node-rtsp-stream quality is low in browser, despite good quality in vlc尽管 vlc 的质量很好，但浏览器中的 node-rtsp-stream 质量很低
【发布时间】：2019-11-19 21:20:39
【问题描述】：

我使用 node-rtsp-stream 和 jsmpeg 在浏览器中流式传输和显示来自 ip camera 的视频。我使用 rtsp://:554/Steaming/Channels/102 地址在 vlc 中获得了良好的质量。但是，当我使用 jsmpeg 在浏览器中显示流时，它的质量太低了。

我的机器是windows 10，

ip 摄像头不在我的本地网络中，因此请通过互联网访问它（在 vlc 中没有问题），

我尝试了以下一些选项，但没有帮助。

wsPort: 9999,
width: 352,
height: 288,
fps: '24',
kbs: '2048k',
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 20, // options with required values specify the value after the key
'-q:v': 32, // quality video in scale [2, 32]
'-b': '2000K' // video bitrate
}

这是我的源代码，

app.js

Stream = require('node-rtsp-stream')
stream = new Stream({
    name: 'name',
    streamUrl: rtspUrlAddress,
    wsPort: 9999,
    width: 352,
    height: 288,
    fps: '24',
    kbs: '2048k',
    ffmpegOptions: { 
        '-stats': '', 
        '-r': 20, 
        '-q:v': 32, 
        '-b': '2000K' 
    }
})

和index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rtsp-stream</title>

    <div><canvas id="videoCanvas" width="352" height="288"></canvas></div>

    <script type="text/javascript" src="jsmpeg.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById("videoCanvas");

        var ws = new WebSocket("ws://localhost:9999")

        var player = new jsmpeg(ws, {
            canvas: canvas,
            autoplay: true,
            audio: false,
            loop: true
        });
    </script>
</head>

<body>
    <div class="jsmpeg" data-url=""></div>
</body>

</html>

它没有给出任何错误，所以它似乎没有任何问题。任何帮助表示赞赏。提前致谢。

【问题讨论】：

我可以使用 ffmpeg cli 毫无问题地保存为视频，然后使用 ffplay 再次播放。

标签： rtsp rtsp-client

【解决方案1】：

对此有同样的问题，并使用新版本的 JSMpeg (jsmpeg.min.js) 修复它。还使用了 node-rtsp-stream-es6。

您应该将您的 html 修改为：

<script type="text/javascript" src="jsmpeg.min.js"></script>

<script type="text/javascript">
    var canvas = document.getElementById('video');
    var url = 'ws://localhost:8082/';
    var player = new JSMpeg.Player(url, {canvas:canvas, autoplay:true,audio:false,loop:true})
</script>

从https://github.com/phoboslab/jsmpeg下载websocket-relajy.js。

在该文件中有使其工作的说明。您需要使用 node 命令运行 websocket-relay.js，然后使用另一个终端使用 ffmpeg -i -f mpegts http://localhost:8081/yoursecret 输入 ws，然后您只需在浏览器中打开您的 html，就会有您的视频流。

【讨论】：