How do I get the last x elements in an array and save them in JavaScript (No JS experience)

Question

WHAT am I trying to accomplish in JavaScript:

1. I am trying to save a constant screen recording as an array with every second being 1 element of the array
2. I am trying to make the max length of the array 10, that being 10 seconds. So the Javascript has to constantly overwrite the array as it continues to record.
3. when I stop the screen recording, I need to be able to save that 10 element array as a video that I can save on my machine.

WHY I am trying to accomplish this in JavaScript

1. I want to mimic NVIDIA shadowplay using javascript.
2. I dont want to use up a bunch of hardware resources by having a crazy long video recording and then save only the last ten seconds

Below is the important piece of code. What this does currently, is return the entire length of the array as long as its over 10 seconds I don't want this I only need the last 10 seconds so if its 20 seconds it returns 20. It also returns every second before the very last 1 second as a jumbled mess of pixels that do not move. I don't want this either as I need the last 10 seconds to be visual and if its saving 20 seconds of of the clip and returning it that means if it recording is 8 hours long it will use up a bunch of hardware resources and that just cannot happen.

I've tried using the functions below that are commented out. slice, pop, and shift all corrupted the file and returned nothing, and if I'm not EXTREMELY careful with how I use the splice function that also returns a corrupted file. This is the closest i've gotten to the end goal of what I'm trying to do, and it is only the primary faucet of the code that I need to write.

function createRecorder (stream, mimeType) {
  // the stream data is stored in this array
  let recordedChunks = [];
  array_length = 10;
  const mediaRecorder = new MediaRecorder(stream);

  mediaRecorder.ondataavailable = function (e) {
    if (e.data.size > 0) {
      recordedChunks.push(e.data);
    }
    if (recordedChunks.length > array_length)
    {
      recordedChunks.splice(-10, array_length);
      //const testarray = ['a', 'b', 'c', 'd'];
      //alert(testarray); // splice(-3,1) b *** slice(-3,1) __ *** slice(-3) b,c,d COPIED shallow array
      //alert(nonrecordedChunks); // splice(-3,1) a,c,d *** slice(-3,1) a,b,c,d *** slice(-3) a,b,c,d
    }
  };
  mediaRecorder.onstop = function () {
     //saveFile(recordedChunks);
     saveFile(recordedChunks);
     recordedChunks = [];
  };
  mediaRecorder.start(1000);
  return mediaRecorder;
}

What am I doing wrong here? thank you for the help. I have no prior experience in JavaScript and at the time of writing this post I've put in 6 hours to get this far and am ready to headdesk.exe

Answer 1

This solution should be one way to achieve the desired objective.

Code Sample

  mediaRecorder.ondataavailable = function (e) {
    if (e.data.size > 0) {
      recordedChunks.push(e.data);
    }
    if (recordedChunks.length > array_length)
    {
      recordedChunks = recordedChunks.slice((-1 * array_length));
    }
  };

Explanation

• The .slice() extracts only the last 10 (ie, array_length) elements in the array (if there are only 9 or less elements, then all elements are extracted)
• Then, this "slice-ed" / extracted elements are assigned to recordedChunks array (essentially getting rid of all the other elements)
• Thus, only the last 10 elements are retained.

The expectation is that headdesk.exe has not yet been executed.

EDIT

Instead of:

recordedChunks = recordedChunks.slice((-1 * array_length));

You may use .splice() too - like this:

recordedChunks.splice(0, (recordedChunks.length - array_length));

In this case, the result must not be reassigned. This is because .splice() mutates the array and returns the elements it extracted. The below snippet may be helpful to understand this.

let someData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
const backupSomeData = [...someData];
const arrlen = 10;
someData.splice(0, someData.length - arrlen);
console.log('array after splice: ', someData.join());

// restore the array from the back-up (as it has mutated)
someData = backupSomeData;
console.log('array returned by splice: ', someData.splice(0, someData.length - arrlen).join());