ShowmeBug’s byte-level playback of the online interview process is a digitally driven, documentable, analyzable and reviewable technology assessment and online Coding interview platform, especially for interviewers and HR.

So how does ShowmeBug allow interviewers and HR to watch a candidate’s online interview process, like a movie? Today Xiaobian and you take a look at the Web end to achieve the playback function of the program are what.

Option 1: MediaRecorder Recorder screen

MediaRecorder is the latest Web standard (still in a working draft) to make it easy for users to record media, but because the standard is so new, browser compatibility is not good and it is not suitable for ShowMeBug scenarios where many device types need to be adapted.

Scenario 2: Canvas Screenshot

In this scheme, the interface Canvas. CaptureStream () is mainly used to stream the screenshots obtained in Canvas to the MediaRecorder interface mentioned above, so as to generate video.

let allChunks=[]; let canvas=document.getElementById("canvasId"); let stream=canvas.captureStream(60); // let Recorder =newMediaRecorder(stream, {mimeType: 'video/webm; codecs=vp9', }); // Canvas Recorder. OnDataAvailable =(E)= bb0 {allchunks.push (e.ATA); } recorder.start(10);

The main problem with this solution is that it requires a lot of bandwidth to produce a smooth video, and it is only suitable for Canvas recording screen. There is a library like HTML2Canvas, but it is not suitable for production environment.

Scheme 3: Restore based on user operation records

Can we collect the user’s sequence of actions, and then apply the actions to the DOM of the page that needs to be recorded in the sequence of actions? Wouldn’t that restore all of the user’s actions?

To do this, we need:

  1. In the front end, MutationObserver API is used to listen for DOM changes, such as node increase or decrease, attribute change, text content change, etc.
  2. Monitor the user’s mouseover event and record the coordinates and time of the change.
  3. The records of the above two steps are queued in chronological order and uploaded to the server;
  4. The back end applies the event queue to the initial page to generate pictures and then splice them into videos.
  5. Finally, send the video link to the user.

This scheme has low network overhead and good compatibility, which is very suitable for screen recording and playback scenes. This is how the directory screen playback tool RRWeb is implemented.

RRWEB is short for ‘Record and Replay the Web’. It aims to record and play back user actions in any Web interface using the powerful APIs provided by modern browsers.

RRWEB is mainly composed of three parts:

RRWEB-SNAPSHOT, including Snapshot and Rebuild functions. Snapshot is used to convert the DOM and its state into a serializable data structure and add a unique identity. Rebuild is to rebuild the data structure of snapshot records into the corresponding DOM.

RRWEB, including record and replay two functions. Record is used to record all changes in DOM (mutation); Replay is to replay the recorded changes at the corresponding time.

RRWEB – Player provides a set of UI controls for RRWEB, providing GUI-based pause, fast forward, drag and drop to any point in time to play, etc.

As you can see, RRWeb is the implementation of the third scenario, but instead of using RRWeb, ShowMeBug has put a lot of effort into developing its own byte-level playback technology based on the third scenario. Keep the pen interview process on file so that the interviewer and HR can track every second of the pen interview process.

If you have the need for online pen interview, please try ShowmeBug