JSFiddle - React, Tailwind, and code Playground

This prototype records a video from camera, upload it to a temp server, then give you a one-shot link.

by morphcast

HTML

<body>
This prototype records a video from camera, upload it to a temp server, then give you a one-shot link.<br />
<!-- For RTC. Include action buttons play/stop -->
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled="disabled">Stop Recording</button>
<a id="url_video_uploaded" href="" hidden>Download recorded video</a>
<a id="url_db_uploaded" href="" target=”_blank” hidden>Open db</a>

<!--
    For RTC. Include a video element that will display the current video stream
    and as well to show the recorded video at the end.
 -->
<hr>
<video id="my-preview" hidden controls autoplay></video>

<!-- For YouTube. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
//  For YouTube. This function creates an <iframe> (and YouTube player)
//  after the API code downloads.
var player;
window.onYouTubeIframeAPIReady = function() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    playerVars: {
    	controls : 0,
      disablekb : 1,
      enablejsapi : 1,
      modestbranding : 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
};

// For YouTube. The API will call this function when the video player is ready.
function onPlayerReady(event) {
	player.mute();
	console.log('Player ready to play.');
}

// For YouTube. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for ten seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 10000);
		console.log('Player will stop after 10 seconds.');
    done = true;
  }
}
function stopVideo() {
		console.log('Player stopped.');
  player.stopVideo();
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
<!--...

JavaScript

// Store a reference of the preview video element and a global reference to the recorder instance
    var video = document.getElementById('my-preview');
    var recorder;
    var db = {};

    // When the user clicks on start video recording
    document.getElementById('btn-start-recording').addEventListener("click", function(){
        // Disable start recording button
        this.disabled = true;

        // Request access to the media devices
        navigator.mediaDevices.getUserMedia({
            audio: false, 
            video: true
        }).then(function(stream) {
            // Display a live preview on the video element of the page
            setSrcObject(stream, video);

            // Start to display the preview on the video element
            // and mute the video to disable the echo issue !
            video.play();
            video.muted = true;

            // Initialize the recorder
            recorder = new RecordRTCPromisesHandler(stream, {
                mimeType: 'video/webm',
                bitsPerSecond: 128000
            });

            // Start recording the video
            recorder.startRecording().then(function() {
            		player.playVideo();
                console.info('Recording video ...');
                db.timeRecordingStarted = Date.now(); // example of attribute saved
            }).catch(function(error) {
                console.error('Cannot start video recording: ', error);
            });

            // release stream on stopRecording
            recorder.stream = stream;

            // Enable stop recording button
            document.getElementById('btn-stop-recording').disabled = false;
        }).catch(function(error) {
            console.error("Cannot access media devices: ", error);
        });
    }, false);

    // When the user clicks on Stop video recording
    document.getElementById('btn-stop-recording').addEventListener("click", function(){
        this.disabled = true;

       ...