Bug reports reported often lack enough information. Sometimes what seems like two different actions to the users are managed with the same function (code) by the developers. So when issues are reported on how one action is running fine while the other is not working, developers look at each other and start to wonder.

Other times though, the client could have misunderstood the feature, and not following proper steps for a particular task caused the false-positive bugs. In any case, the team has to put the bug in priority and focus on solving it.

The first steps to such an issue are almost always to recreate the bug in the developer's system. This is important because in a system there are multiple layers, and any one of them not working as they should cause any number of bugs. It could be caused by the network, database, or application code. Even browsers can be the cause when the application is a web application. Sometimes it's a sight to behold as the only thing developers can come up with is how "it's running on my system".

Once the bug is reproduced then the developers can analyze what went wrong on their system and hopefully find a solution for the bug. The second step is rarely mind-numbingly hard once the issue is replicated.

Between the constant argument of the bug reporter and developer wouldn't it be nice to get a screen recording of the bug? It would be an outstanding feature for the developers. This will take the time off of the first step, which is reproducing bugs, and start working on the fix.

HTML 5 has an API that lets the developers record the screen using the browser. You can read more about the API from the link Screen Capture Api

Screen Capture Api combined with MediaRecorder we can store the stream from the capture and create a blob from the contents. We can then call an API, that will post the recorded video to the backend.

With this action, we can add further details of the clients on the API that will help the bug report. Capturing the device being used, the time of the bug, relevant client information based on the application all can tremendously help the first stage of fixing a bug. The Screen Capture Api can also be used to add audio to the record, this way the client can be more verbose in how the bug had been produced.

function renderRecording(blob) {
  const blobUrl = URL.createObjectURL(blob);
  // post to api with additional details

}

function startCapture(displayMediaOptions) {
  return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
      .catch((err) => {
        console.error('Error:' + err); return null;
      });
}

const gdmOptions = {
  video: {
    cursor: 'always',
  },
  audio: false,
};

startCapture(gdmOptions).then((r) => {
  const recorder = new MediaRecorder(r);
  chunks=[];
  recorder.addEventListener('dataavailable', (event) => {
    if (typeof event.data === 'undefined') return;
    if (event.data.size === 0) return;
    chunks.push(event.data);
  });
  recorder.addEventListener('stop', () => {
    const recording = new Blob(chunks, {
      type: 'video/webm',
    });
    renderRecording(recording);
    chunks = [];
  });
  recorder.start();
});

The code can be executed by creating a custom button, for the client whose browser supports the API. This can be done simply by checking ('MediaRecorder' in window) in javascript.

#References

• Comicstrip

• Cartoon Tester

• MediaRecorder