node-rtsp-stream quality is low in browser, despite good quality in vlc

Question

I use node-rtsp-stream and jsmpeg to stream and display video from ip camera in browser. I get good quality in vlc using rtsp://:554/Steaming/Channels/102 address. However, when I use jsmpeg to display the stream in browser its quality is too low.

My machine is windows 10,

ip camera is not in my local network so access it over internet (no problem in vlc),

I tried some options as below but did not help.

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
}

Here are my source codes,

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' 
    }
})

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

It does not give any errors so seems it streams without any problem. Any help is appreciated. Thanks in advance.

I can save as video without any problem using ffmpeg cli and again play using ffplay. — babanazar

Miguel Castillo Miguel Castillo · Accepted Answer · 2019-12-19T03:32:31

had the same problem with this and fix it using the new version of JSMpeg (jsmpeg.min.js). Also used node-rtsp-stream-es6.

You should modify your html to:

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

Download the websocket-relajy.js from https://github.com/phoboslab/jsmpeg.

In that file there are instructions to make it work. Youll need to run the websocket-relay.js with node command and then feed the ws with ffmpeg -i -f mpegts http://localhost:8081/yoursecret using another terminal, then you can just open your html in the browser and there will be ur video streaming.

node-rtsp-stream quality is low in browser, despite good quality in vlc

1 Answers