Video Recorder

Recorder Setup

Let's now add a recorder functionality on the upload video page.

First we create a js file for the recorder and process them on webpack. This will create a file on the assets folder.

recorder: "./src/client/js/recorder.js",

To display this feature, we add the address of recorder.js on the upload.pug file using the block scripts tag.

block scripts
  script(src="/static/js/recorder.js")

Now we create a button on the upload.pug file that will start recording when clicked.

video#preview

Finally, we can go back to our recorder.js file to implement events that will actually let us record videos when the button is clicked.

Lets first install a npm package that will give us our recording functionality. This package will also allow us to use the promise method on our code.

npm i regenerator-runtime

Applying the reference code regarding "media devices" on MDN, we can write an event code that will implement a recording feature.

By using the audio and video property, we can choose whether we want to turn on our audio or our webcam while recording.

const startBtn = document.getElementById("startBtn");

const handleStart = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });
};

startBtn.addEventListener("click", handleStart);

Video Preview

In order to visually check if our recording functionality is working, we can create a separate video element that we can use to preview our stream or recording.

To do this, we create another element on upload.pug.

video#preview

We then grab this selector and create a new variable on the recorder.js file. Finally, we just add the video variable as a srcObject and put the stream variable inside. We then call the play() function to actually start recording after clicking the button.

const startBtn = document.getElementById("startBtn");
const video = document.getElementById("preview");

const handleStart = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });
  video.srcObject = stream;
  video.play();
};

startBtn.addEventListener("click", handleStart);

Recording Video

Before recording, we will need to be able to switch between the point where we start or stop recording a video. For this we simply need to create two functions that will do this separately.

First, lets create another function and insert the video preview API.

const init = async () => {
  stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: { width: 300, height: 300 },
  });
  video.srcObject = stream;
  video.play();
};

init();

Then, we can create two functions that will either start or stop the recording functionality.

const handleStart = () => {
  startBtn.innerText = "Stop Recording";
  startBtn.removeEventListener("click", handleStart);
  startBtn.addEventListener("click", handleStop);
};

const handleStop = () => {
  startBtn.innerText = "Start Recording";
  startBtn.removeEventListener("click", handleStop);
  startBtn.addEventListener("click", handleStart);
};

On the handleStart function, we can implement the MediaRecorder API to actually start recording a video.

Here, we use a special method from the MediaRecorder API called ondataavailable which will save the recorded video which can be converted to a file. At the end of this conversion, a URL will be created that can be accessed for the video.

To view a preview right after recording, we need to empty out the previous srcObject and add at the newly recorder video to the video.src.

const recorder;

const handleStart = () => {
  startBtn.innerText = "Stop Recording";
  startBtn.removeEventListener("click", handleStart);
  startBtn.addEventListener("click", handleStop);
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = (event) => {
  	const videoFile = URL.createObjectURL(event.data);
    video.srcObject = null;
    video.src = videoFile;
    video.loop = true;
    video.play();
  };
  recorder.start();
};

Downloading the File

After recording, it is time to finally download the video. For this we create a new function that will handle an event to download a recorded video.

First, we need to share the recorded video to the download function. For this we can create a new anchor element that will take the recorder file of the video and use the download method to give a name for the file.

Next, we add this anchor element onto the body using the appendChild() method which will paste the element on the HTML.

Finally, we can use the click() method which will bring out a prompt to save the video on the computer.

const handleDownload = () => {
  const a = document.createElement("a");
  a.href = videoFile;
  a.download = "MyRecording.webm";
  document.body.appendChild(a);
  a.click();
};