CODEWITHSUNDEEP
node.jsreactjsnginxmemoryvideo
Константин Шляхов
Константин Шляхов

Reputation: 21

Nginx container increase memory use after sending metadata of videos on binded volume

I have an AWS server with a docker containers running there Server contains a lot of mp4 videos (few hundred GB) Every video is ~ 30 MB

One of the services is a React app that allow to watch videos one by one but total videos on the page is 5-20

Every time when i open the page with videos that was never watched the nginx container will add 50-150 MB to memory usage and eventually entire app will be frozen.

App is not for high loads (1-2 users at once) so i use

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    resolver 127.0.0.11 ipv6=off;
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;

keepalive_timeout  65;

client_max_body_size 5M;

include /etc/nginx/conf.d/*.conf;`

in nginx settings.

Also container is simply bound to directory with videos.

Interesting thing is that after restarting the container memory usage will drop to normal 2-3 MB and will not rise if i will open the page that was opened in last few days

So issue is reproducible only with old pages that contains videos that very old

Inside nginx container all is calm and good, memory usage of processes and workers are minimal so i don't even know 'who' exactly is using memory

Does anyone have ideas where to dig to try fix this unwanted 'caching'?

react code is pretty long so I can't really share it all here but in general its one video for component so inside the smallest component it looks like that:

   import React 'react';
    const EVideo = ({
                      props,
                    }) => {
      const onLoad = e => {// some logic to set initial playback rate}

  const onTimeUpdate = e => {//some logic to calculate video time into business logic time}

  return
  (<><video
    ref={videoRef}
    poster={props.poster}
    src={props.video_path}
    onLoadedMetadata={onLoad}
    onTimeUpdate={onTimeUpdate}
    playsInline
  />
    <div>Here business logic results will be shown</div>
  </>)
}

Upvotes: 2

Views: 754

Answers (1)

Rahul Sharma
Rahul Sharma

Reputation: 5995

This is happening due to preloading behaviour of the browser you're using. The browser is prefetching the video that it has not seen yet. You can control this default behaviour of your browser using preload attribute of video element.

Setting preload=none inside video element should prevent your browser from prefetching the videos. Read more about preload here.

Upvotes: 1

Related Questions