Twine: Screen Capture POC

Twine, is an asynchronous (non-live) video chat application in which users can create a base video that other users can interject their own video responses at any point in the video, which is themselves videos that users could interject a video response into. 

In this challenge, we are looking for a POC application that can record the screen & prompt an option to download the video

 

Technology Stack

• React Native Web

• CSS/SCSS

• NodeJS

General requirements

Code Formatting

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.

• Please use clean INDENTATION for all the code so future developers can follow the code.

• Use appropriate linter to validate your code.

JAVASCRIPT SPECIFIC

• Code written in JavaScript should pass the lint Validation.

LAYOUT

Use the same layout as it’s there in the existing app.

PLATFORM

The application should work on the web-browsers (Chrome, Firefox & IE Chromium)

REFERENCES:

• Using the Screen Capture API

• Recording demo

Business Requirements

1. Environment

React native web & typescript should be used for development. The application is only for desktop browsers. Mobile platforms are out of scope. Using any other framework is not allowed for this challenge.

2. Recording

This is the recording page. Ignore the back button, it should not be included. At the bottom there are three buttons “Record screen, pause/resume button & upload media”

• Clicking the record screen or Red button should show the option to select the window to be recorded. Once a window is selected the recording should start & the rectangular box should show the preview that’s getting recorded.Refer to the Results sections here.

• Audio should also be recorded along with the screen recording.

• On clicking the red Play/Pause button while the recording is in progress, the recording should pause & the red icon should change pause state. Discard & Accept buttons should also appear ref:

 

• Clicking the red Stop/Pause button should resume the recording & the button should change to the state as it was there initially.

• Clicking the Upload Media button should do nothing.

• Clicking the Discard button should discard the recording & the page should reset to the initial state.

• Clicking the Accept button should show a browser default download dialog to save the recorded video & reset the page to the initial state.

Final Submission Guidelines

Submit a zip container containing:

• Source code 

• Readme/Instructions to run the code.