cfoch/video_plus_webcam_recorder.html

## video_plus_webcam_recorder.html
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <br></br>
    <button id="record-button" onclick="startRecording()">Start recording</button>
    <button id="download-button" disabled="true" onclick="download()">Download</button>
</body>
<script>
var canvas, context, stream, recordedBlobs, videoStarted, video,
    webcamVideo, videoAvailable, webcamAvailable;

recordedBlobs = [];
videoStarted = false;
recordingStarted = false;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
stream = canvas.captureStream(30);

canvas.addEventListener("mouseup", mouseUp);

context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "blue";
context.fill();

const fps = 30;
setInterval(draw, 1 / fps * 1000);
// setInterval(draw, 300);


function draw () {
	context.fillStyle = 'red';
    context.fillRect(0, 0, canvas.width, canvas.height);

    if (videoAvailable)
        context.drawImage(video, 0, 0, canvas.width / 2, canvas.height);

    if (webcamAvailable)
        context.drawImage(webcamVideo, canvas.width / 2, 0, canvas.width / 2, canvas.height);

}


function startRecording() {
    if (!videoStarted) {
        alert('Click the blue area.');
        return;
    }

    const recordButton = document.getElementById("record-button");
    recordButton.setAttribute("disabled", true);

    const options = {mimeType: 'video/webm'};
    const mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.onstop = handleStop;
    mediaRecorder.ondataavailable = handleDataAvailable;

    mediaRecorder.start(100);

    const duration = 5000;
    setTimeout(() => {
        console.log("Finish recording");
        mediaRecorder.stop();
    }, duration);
}

function handleDataAvailable(event) {
    console.log('data size: ' + event.data.size);
    recordedBlobs.push(event.data);
}

function handleStop(event) {
    console.log('Recorder stopped: ', event);

    const downloadButton = document.getElementById("download-button");
    downloadButton.removeAttribute("disabled");
    console.log(downloadButton);
}

function download() {
    const blob = new Blob(recordedBlobs, {type: 'video/webm'});
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'test.webm';
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
    document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 100);
}

function recordWebcam() {
    webcamVideo = document.createElement("video");

    webcamVideo.setAttribute("autoplay", true);
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
            webcamVideo.srcObject = stream;
            webcamAvailable = true;
        }).catch(function (err0r) {
            console.log("Something went wrong!");
        });
    }
}

function recordVideo() {
    video = document.createElement("video");
    video.setAttribute("autoplay", true);
    video.src = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";

    console.log('up');
    video.addEventListener('loadeddata', () => {
        console.log("loadeddata");

        videoAvailable = true;
    });
}


function mouseUp(e) {
    if (videoStarted) {
        console.log('Video playback already started.');
        return;
    }
    videoStarted = true;

    recordVideo();
    recordWebcam();
}


</script>
	<body>
	<canvas id="canvas" width="800" height="600"></canvas>
	<br></br>
	<button id="record-button" onclick="startRecording()">Start recording</button>
	<button id="download-button" disabled="true" onclick="download()">Download</button>
	</body>
	<script>
	var canvas, context, stream, recordedBlobs, videoStarted, video,
	webcamVideo, videoAvailable, webcamAvailable;

	recordedBlobs = [];
	videoStarted = false;
	recordingStarted = false;

	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	stream = canvas.captureStream(30);

	canvas.addEventListener("mouseup", mouseUp);

	context.rect(0, 0, canvas.width, canvas.height);
	context.fillStyle = "blue";
	context.fill();

	const fps = 30;
	setInterval(draw, 1 / fps * 1000);
	// setInterval(draw, 300);


	function draw () {
	context.fillStyle = 'red';
	context.fillRect(0, 0, canvas.width, canvas.height);

	if (videoAvailable)
	context.drawImage(video, 0, 0, canvas.width / 2, canvas.height);

	if (webcamAvailable)
	context.drawImage(webcamVideo, canvas.width / 2, 0, canvas.width / 2, canvas.height);

	}


	function startRecording() {
	if (!videoStarted) {
	alert('Click the blue area.');
	return;
	}

	const recordButton = document.getElementById("record-button");
	recordButton.setAttribute("disabled", true);

	const options = {mimeType: 'video/webm'};
	const mediaRecorder = new MediaRecorder(stream, options);

	mediaRecorder.onstop = handleStop;
	mediaRecorder.ondataavailable = handleDataAvailable;

	mediaRecorder.start(100);

	const duration = 5000;
	setTimeout(() => {
	console.log("Finish recording");
	mediaRecorder.stop();
	}, duration);
	}

	function handleDataAvailable(event) {
	console.log('data size: ' + event.data.size);
	recordedBlobs.push(event.data);
	}

	function handleStop(event) {
	console.log('Recorder stopped: ', event);

	const downloadButton = document.getElementById("download-button");
	downloadButton.removeAttribute("disabled");
	console.log(downloadButton);
	}

	function download() {
	const blob = new Blob(recordedBlobs, {type: 'video/webm'});
	const url = window.URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.style.display = 'none';
	a.href = url;
	a.download = 'test.webm';
	document.body.appendChild(a);
	a.click();
	setTimeout(() => {
	document.body.removeChild(a);
	window.URL.revokeObjectURL(url);
	}, 100);
	}

	function recordWebcam() {
	webcamVideo = document.createElement("video");

	webcamVideo.setAttribute("autoplay", true);
	if (navigator.mediaDevices.getUserMedia) {
	navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
	webcamVideo.srcObject = stream;
	webcamAvailable = true;
	}).catch(function (err0r) {
	console.log("Something went wrong!");
	});
	}
	}

	function recordVideo() {
	video = document.createElement("video");
	video.setAttribute("autoplay", true);
	video.src = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";

	console.log('up');
	video.addEventListener('loadeddata', () => {
	console.log("loadeddata");

	videoAvailable = true;
	});
	}


	function mouseUp(e) {
	if (videoStarted) {
	console.log('Video playback already started.');
	return;
	}
	videoStarted = true;

	recordVideo();
	recordWebcam();
	}



	</script>