Proof of Concept: website video capture

I would like a simple mobile-first web page built as a proof of concept.

The page should work like this:

a) this should work for both IOS and Android and be brower based

b) in mobile portrait mode there is a CSS detection and if the mobile phone is in portait mode there should be a message to ‘please rotate your phone’ (this proof of concept should only work in mobile portrait mode)

c) in landscape mode the video objects will render and side by side the ‘result’ should appear.

This code bascially achieves what we need to do already (making this task easy: https://gist.github.com/tatsuyasusukida/b21c4c7d73c5e3d91ab97d8c040bc48e)

d) the recording and preview video objects should be centered horiztonally next to each other (in horizontal view) on the mobile webpage (and in horizontal view mode should fit into the mobile screen entirely — this will mean in practise the videos are probably about 480 x 270 each, side by side.

e) The functionality should work the same as in the GitHub example above, with a few additions defined below:

f) A save button should be added, which saves the video to Google Drive or other cloud service [this is a proof of concept, I don’t mind which one]. The filename should have the data&timestamp of the video recorded.

g) The page should show a countdown timer when the start button is pressed to record, and countdown while the recording is ongoing, and the maximum time to record should be 2 minutes. After that time the recording should automatically stop.

h) When the stop button is pressed, the countdown should reset to 2 minutes. The file should be saved to the cloud service and the start button should become active again.