Exception when passing a DOM element to RecordRTC #279
Comments
|
Hi, perhaps the best approach here would be to take down the examples that no longer seem to work. They give the impression that RecordRTC has functionality which it does not (the ability to record an arbitrary DOM element). |
|
We already have this module: dev/MultiStreamRecorder.js (purpose of this script is simply merge multiple videos and multiple audios scripts into single MediaStream) Here is the relevant documentation: https://github.com/muaz-khan/RecordRTC#record-multiple-videos However MultiStreamRecorder requires following flag on windows: chrome://flags/#enable-experimental-web-platform-featuresHere are demo using MultiStreamRecorder:
The first demo i.e. "Screen+Video recording" looks like this:
You can use html2canvas.js to pass your DIV containing any number of nested canvas and you'll get single resulting Canvas object. Here is a similar demo: Canvas-Recording/webpage-recording.html Here is how it works: var elementToShare = document.getElementById('elementToShare');
var canvas2d = document.createElement('canvas'); // OUR OWN invisible CANVAS
var context = canvas2d.getContext('2d');
canvas2d.width = elementToShare.clientWidth;
canvas2d.height = elementToShare.clientHeight;
canvas2d.style = 'display: none;';
(document.body || document.documentElement).appendChild(canvas2d);
// looper+selfinvoker method
(function looper() {
if (recorder && recorder.getBlob() && recorder.getBlob().size) {
// this line checks whether recorder is stopped
return;
}
// looper keeps calling this method until recording stops
html2canvas(elementToShare, {
grabMouse: true,
onrendered: function(canvas) {
context.clearRect(0, 0, canvas2d.width, canvas2d.height);
// draw html2canvas resulting canvas on our own canvas
context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);
// here is how looper works
setTimeout(looper, 1);
}
});
})();
// note: captureStream requires a flag: chrome://flags/#enable-experimental-web-platform-features
var canvasStream = canvas2d.captureStream(); // capture from our own canvas
// following three properties are required to make sure
// our canvas is rendered correctly by the MultiStreamRecorder
// these properties ae merely for positioning for our streams
canvasStream.fullcanvas = true;
canvasStream.width = canvas2d.width;
canvasStream.height = canvas2d.height;
// to append camera on bottom-right corner
// i.e. how camer should be positioned
camera.width = 320;
camera.height = 240;
camera.top = canvasStream.height - camera.height;
camera.left: canvasStream.width - camera.width;
// now you can use MultiStreamRecorder here
// we are gonig to pass array of streams
var recorder = RecordRTC([microphone, camera, canvasStream], {
type: 'video'
});
recorder.startRecording(); |
|
I tried to test https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/video-plus-screen-recording.html, but it doesn't work. |
Hi, Muaz, first off, thanks so much for all your work on RecordRTC, it's awesome!
I'm trying to use the method described here: https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/webpage-recording.html to record a section of a web page by passing in a DOM element. , but I'm getting the exception: "RecordRTC.js:2899 Please pass either HTMLCanvasElement or CanvasRenderingContext2D."
My ultimate goal is to record 2 canvases on top of each other, one is a 3d canvas and the other is a 2d canvas on top (hud). Getting RecordRTC recording a canvas by passing a DIV seems like a good first step. I think you've said recording 2 canvases on top of each other isn't supported yet, but I think this is a pretty common setup for games so I'm pursuing this anyway. I was able to capture them side-by-side using an array of Media Streams, but I really need to record it the way it appears on the page, with the HUD being mostly transparent on top of the 3d canvas.
My recorder (javascript) looks like this:
My html looks like this:
And the CSS styles are:
By the way, I found this package that might enable RecordRTC to merge 2 video MediaStreams. https://github.com/RationalCoding/video-stream-merger
You can see my game here: http://www.pocketoys.com/ if you're interested in it at all. I haven't released the version with RecordRTC yet.
Thanks so much for any assistance.
Update I just released the version with RecordRTC to the web. You can see it in action if you select "Play Offline". The online game is pretty network intensive, and I'm wary of trying to capture the video at the same time, hopefully I can enable that later.
I tried again to get video-stream-merger working but it's throwing an error. I'll raise it to the owner. This is what I'm trying. I set fps to 1 just to go easy on it....
The text was updated successfully, but these errors were encountered: