vane/video_record.html

## video_record.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <video id="preview" width="640" height="480" muted="muted"></video>
    <div id="buttons">
        <button id="record">Record</button>
        <button id="stop" disabled>Stop</button>
        <span id="recordStatus" style="display: none;background-color: #ff0000; width: 10px; height: 10px; color: #ffffff;">R</span>
    </div>
</div>
<div id="videos"></div>
<script type="text/javascript">

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

    var contentTypes = ["video/webm",
        "video/webm;codecs=vp8",
        "video/webm;codecs=daala",
        "video/webm;codecs=h264",
        "audio/webm;codecs=opus",
        "video/x-matroska;codecs=avc1",
        "audio/webm",
        "audio/webm;codecs=opus",
        "video/mp4;codecs=avc1",
        "video/invalid"];
    contentTypes.forEach(contentType => {
        console.log(contentType + ' is '
            + (MediaRecorder.isTypeSupported(contentType) ?
                'supported' : 'NOT supported '));
    });

    // Grab elements, create settings, etc.
    var preview = document.getElementById('preview');
    var record = document.getElementById('record');
    var stop = document.getElementById('stop');
    var videos = document.getElementById('videos');
    var recordStatus = document.getElementById('recordStatus');

    var chunks = [];

    // Get access to the camera!
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        var settings = { audio:true, video: true};
        navigator.mediaDevices.getUserMedia(settings).then(function(stream) {
            /*var options = {
                audioBitsPerSecond : 128000,
                videoBitsPerSecond : 2500000,
                mimeType : 'video/mp4'
            }
            var mediaRecorder = new MediaRecorder(stream,options);*/
            var mediaRecorder = new MediaRecorder(stream);
            window.vidRecorder = mediaRecorder;
            preview.src = window.URL.createObjectURL(stream);

            record.onclick = function() {
                recordStatus.style.display = '';
                mediaRecorder.start(1000);
                console.log(mediaRecorder.state);
                console.log("recorder started");
                stop.disabled = false;
                record.disabled = true;
            }

            stop.onclick = function() {
                recordStatus.style.display = 'none';
                mediaRecorder.stop();
                console.log(mediaRecorder.state);
                console.log("recorder stopped");
                //mediaRecorder.requestData();
                stop.disabled = true;
                record.disabled = false;
            }

            mediaRecorder.onstop = function(e) {
                var clipContainer = document.createElement('article');
                var video = document.createElement('video');
                var deleteButton = document.createElement('button');

                clipContainer.classList.add('clip');
                video.setAttribute('controls', '');
                deleteButton.textContent = 'Delete';
                deleteButton.className = 'delete';


                clipContainer.appendChild(video);
                clipContainer.appendChild(deleteButton);
                videos.insertBefore(clipContainer, videos.firstChild);

                video.controls = true;
                var blob = new Blob(chunks, { 'type' : 'video/webm' });
                chunks = [];
                var videoURL = window.URL.createObjectURL(blob);
                video.src = videoURL;
                console.log("recorder stopped");

                deleteButton.onclick = function(e) {
                    evtTgt = e.target;
                    evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
                }
            }

            mediaRecorder.ondataavailable = function(e) {
                console.log(e);
                chunks.push(e.data);
            }

            preview.play();
        }).catch(function(err) {
            console.log('The following error occured: ' + err);
        });
    }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<div>
	<video id="preview" width="640" height="480" muted="muted"></video>
	<div id="buttons">
	<button id="record">Record</button>
	<button id="stop" disabled>Stop</button>
	<span id="recordStatus" style="display: none;background-color: #ff0000; width: 10px; height: 10px; color: #ffffff;">R</span>
	</div>
	</div>
	<div id="videos"></div>
	<script type="text/javascript">

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

	var contentTypes = ["video/webm",
	"video/webm;codecs=vp8",
	"video/webm;codecs=daala",
	"video/webm;codecs=h264",
	"audio/webm;codecs=opus",
	"video/x-matroska;codecs=avc1",
	"audio/webm",
	"audio/webm;codecs=opus",
	"video/mp4;codecs=avc1",
	"video/invalid"];
	contentTypes.forEach(contentType => {
	console.log(contentType + ' is '
	+ (MediaRecorder.isTypeSupported(contentType) ?
	'supported' : 'NOT supported '));
	});

	// Grab elements, create settings, etc.
	var preview = document.getElementById('preview');
	var record = document.getElementById('record');
	var stop = document.getElementById('stop');
	var videos = document.getElementById('videos');
	var recordStatus = document.getElementById('recordStatus');

	var chunks = [];

	// Get access to the camera!
	if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
	var settings = { audio:true, video: true};
	navigator.mediaDevices.getUserMedia(settings).then(function(stream) {
	/*var options = {
	audioBitsPerSecond : 128000,
	videoBitsPerSecond : 2500000,
	mimeType : 'video/mp4'
	}
	var mediaRecorder = new MediaRecorder(stream,options);*/
	var mediaRecorder = new MediaRecorder(stream);
	window.vidRecorder = mediaRecorder;
	preview.src = window.URL.createObjectURL(stream);

	record.onclick = function() {
	recordStatus.style.display = '';
	mediaRecorder.start(1000);
	console.log(mediaRecorder.state);
	console.log("recorder started");
	stop.disabled = false;
	record.disabled = true;
	}

	stop.onclick = function() {
	recordStatus.style.display = 'none';
	mediaRecorder.stop();
	console.log(mediaRecorder.state);
	console.log("recorder stopped");
	//mediaRecorder.requestData();
	stop.disabled = true;
	record.disabled = false;
	}

	mediaRecorder.onstop = function(e) {
	var clipContainer = document.createElement('article');
	var video = document.createElement('video');
	var deleteButton = document.createElement('button');

	clipContainer.classList.add('clip');
	video.setAttribute('controls', '');
	deleteButton.textContent = 'Delete';
	deleteButton.className = 'delete';


	clipContainer.appendChild(video);
	clipContainer.appendChild(deleteButton);
	videos.insertBefore(clipContainer, videos.firstChild);

	video.controls = true;
	var blob = new Blob(chunks, { 'type' : 'video/webm' });
	chunks = [];
	var videoURL = window.URL.createObjectURL(blob);
	video.src = videoURL;
	console.log("recorder stopped");

	deleteButton.onclick = function(e) {
	evtTgt = e.target;
	evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
	}
	}

	mediaRecorder.ondataavailable = function(e) {
	console.log(e);
	chunks.push(e.data);
	}

	preview.play();
	}).catch(function(err) {
	console.log('The following error occured: ' + err);
	});
	}
	</script>
	</body>
	</html>