illuspas / Node-Media-Server

A Node.js implementation of RTMP/HTTP-FLV/WS-FLV/HLS/DASH/MP4 Media Server
https://www.npmjs.com/package/node-media-server
MIT License
6k stars 1.53k forks source link

Tab switching for FLV.js through http or websocket makes the video lag behind #42

Open iongion opened 6 years ago

iongion commented 6 years ago

Maybe this is a browser feature that needs to be considered(MSE decoding being suspended on tab leave?!?), but having my tests done with this publisher:

ffmpeg -loglevel verbose \
  -re \
  -r 30 \
  -f lavfi -i testsrc \
  -vf scale=1280:720 \
  -vcodec libx264 \
  -pix_fmt yuv420p \
  -preset superfast \
  -tune zerolatency \
  -c:a aac -ar 44100 \
  -f flv rtmp://localhost:1935/live/stream

And the native player through ffplay:

ffplay -loglevel verbose rtmp://localhost:1935/live/stream

And this html player code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
    <meta name="author" content="name" />
    <meta name="description" content="description here" />
    <meta name="keywords" content="keywords,here" />
    <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
    <style type="text/css">
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  </head>
  <body>
    <video id="videoElement"></video>
    <script src="https://cdn.bootcss.com/flv.js/1.3.3/flv.min.js"></script>
    <script>
      $(document).ready(function() {
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                // url: 'ws://localhost:8000/live/stream.flv',
                url: 'http://localhost:8000/live/stream.flv'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
      });
    </script>
  </body>
</html>

The browser starts to lag behind: image

But as soon as I refresh the page, it is all good: image

Can you give it a look ?

illuspas commented 6 years ago

Try another browser.