WebRTC Hack

HTML

<button id="button" type="button">Start</button>
<div id="container">
    <div id="one">
        <h1>
        one
        </h1>
        <video id="video" autoplay muted="muted"></video>
    </div>
    <div id="two">
            <h1>
        one
        </h1>
        <video id="video2" autoplay muted="muted"></video>
    </div>
</div>

CSS

#container {
    display: flex;
}
#container div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 220px;
    margin: 10px;
}

#one {
    background-color: dodgerblue;
}

#two {
    background-color: orangered;
}

video {
    height: 150px;
    width: 250px;
}

JavaScript

'use strict';
const button = document.getElementById('button');
const video = document.getElementById('video');
const video2 = document.getElementById('video2');
const one = document.getElementById('one');
const two = document.getElementById('two');
let swapped, stream;
const start = () => {
    window.navigator.webkitGetUserMedia({
        video: true,
        audio: true
    }, (s) => {
    	stream = s;
        button.innerText = 'Rerender Component';
        video.src = video2.src = URL.createObjectURL(stream);
    }, console.error.bind(console));
};
const swap = () => {
	two.parentNode.insertBefore(two, one);
    swapped = true;
    button.innerText = 'Stop';
};
const stop = () => {
	stream.getTracks().forEach((t) => t.stop());
};
button.onclick = () => {
	if (!stream) {
    	start();
    } else if (!swapped) {
    	swap();
    } else {
    	stop();
    }
};