JSFiddle - React, Tailwind, and code Playground

HTML

<button id="rec" >Record</button>
<button id="stop" disabled>Stop</button>

 <div id="videos-container"></div>

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

        document.getElementById('rec').onclick = function() {
        var htmlElement = document.createElement('video');
        htmlElement.setAttribute('autoplay', true);
        htmlElement.setAttribute('controls', true);
        videosContainer.insertBefore(htmlElement, videosContainer.firstChild);

        var mediaConfig = {
				video: htmlElement,
				onsuccess: function(stream) {
					config.attachStream = stream;
					callback && callback();
				},
				onerror: function() {
					alert('unable to get access to your webcam');
				}
			};
			getUserMedia(mediaConfig);
		}

    var videosContainer = document.getElementById('videos-container') || document.body;