rohitshetty
commented
5 years ago index.html
<button onclick="startCapture()">Start</button>
<button id="stop">stop</button>
<select id="param">
<option value="0">0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5" selected="selected">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1</option>
</select>
<h2 id="msg">wait</h2>
<video
playsinline
id="video"
autoplay
controls
style="object-fit: contain; width: 40%;"
></video>
<script src="./video-merge.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script>
let videoElem = document.getElementById("video");
async function startCapture() {
var CANVAS_MULTIPLIER = 5;
try {
var screen = await navigator.mediaDevices.getDisplayMedia({
video: true
});
console.log(screen);
var cam = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true
});
const select = document.getElementById("param");
const param = select.options[select.selectedIndex].value;
console.log(2 - param);
var merger = new VideoStreamMerger({
width: window.screen.width / (2 - param),
height: window.screen.height / (2 - param)
});
setTimeout(function() {
console.log("trigged");
merger.addStream(screen, {
x: 0, // position of the topleft corner
y: 0,
width: merger.width,
height: merger.height,
mute: true // we don't want sound from the screen (if there is any)
});
console.log("trigged2");
merger.addStream(cam, {
x: 0,
y: merger.height - 0.2 * merger.width,
width: 0.2 * merger.width,
height: 0.2 * merger.width,
mute: false
// draw: function (ctx, frame, done) {
// x = 0; y = merger.height - 0.2 * merger.width; width = 0.2 * merger.width; height = 0.2 * merger.width;
// // decide where you want your circular image, and what size
// ctx.save(); // save canvas context
// ctx.beginPath();
// ctx.arc(x + width/2, y + height/2, width/2, 0, Math.PI*2, true); // create an circle centered around frame
// ctx.closePath();
// ctx.clip(); // clip the context to the circle
// ctx.drawImage(frame, x, y, width, height); // draw the image in the clipped context
// ctx.restore(); // restore canvas context so you don't clip every other stream
// done() // <- you must call this so the merger can continue
// }
});
merger.start();
// We now have a merged MediaStream!
// videoElem.srcObject = cam;
// videoElem.srcObject = screen;
videoElem.srcObject = merger.result;
document.getElementById("msg").innerHTML = "Start";
// replace merger.result with cam or screen
var recorder = new RecordRTCPromisesHandler(merger.result, {
type: "video"
});
recorder.startRecording();
var stop = document.getElementById("stop");
stop.onclick = async () => {
console.log("stopping recording");
await recorder.stopRecording();
let blob = await recorder.getBlob();
invokeSaveAsDialog(blob);
};
}, 1000);
} catch (err) {
console.error("Error: " + err);
}
}
</script>and place the latest version of this library in the same folder as video-merge.js
to change the sources being recorded, check the line numbers 89-91 (uncomment as required) and line number 95
Tryptophan
t-mullen
Timebutt
xiang-valcano
mustafa-toptal
Ivanca
I use screen and media streams and merge them using this library. I use webrtc recorder to record the output stream and download it. Everything works as expected, except when the browser is minimized, the video stream pauses (although audio stream continues) till the browser is minimized, and continues once it's maximized. My initial suspect was issue #9, so I disabled/enabled the chrome flag and tried, it didn't help. To zero in on the source, I just recorded the screen stream, they work fine, even if the browser is minimized, I recorded only the video stream and tested it works fine. The only issue is when I am saving the merged feed.
Please check the code source attached below.