Open kiranparajuli589 opened 5 months ago
I was trying to implement the Screen Recording With Video and a logo using the RecordRTC library but found out that while using the example shown in
https://www.webrtc-experiment.com/RecordRTC/simple-demos/show-logo-on-recorded-video.html
results in segmented audio in the recording.
Here is a reproducible fiddle: https://jsfiddle.net/kiran589/L34bdhu7/5/
The code is like:
var videoPreview = document.getElementById('video-preview'); var logoImage = document.getElementById('logo-image'); var waitImage = document.getElementById('wait-image'); navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(function(camera) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.style = 'position: absolute; top: 0; left: 0; opacity: 0; margin-top: -9999999999; margin-left: -9999999999; top: -9999999999; left: -9999999999; z-index: -1;'; document.body.appendChild(canvas); var video = document.createElement('video'); video.autoplay = true; video.playsinline = true; video.srcObject = camera; var canvasStream = canvas.captureStream(15); var audioPlusCanvasStream = new MediaStream(); // "getTracks" is RecordRTC's built-in function getTracks(canvasStream, 'video').forEach(function(videoTrack) { audioPlusCanvasStream.addTrack(videoTrack); }); // "getTracks" is RecordRTC's built-in function getTracks(camera, 'audio').forEach(function(audioTrack) { audioPlusCanvasStream.addTrack(audioTrack); }); var recorder = RecordRTC(audioPlusCanvasStream, { type: 'video' }); recorder.setRecordingDuration(10 * 1000).onRecordingStopped(function() { var blob = recorder.getBlob(); recorder = null; camera.stop(); videoPreview.srcObject = null; videoPreview.src = URL.createObjectURL(blob); }); recorder.startRecording(); videoPreview.srcObject = canvasStream; var tries = 0; (function looper() { if(!recorder) return; // ignore/skip on stop-recording tries += 100; canvas.width = 320; canvas.height = 240; // show hello.png for one second if(tries < 5000 || tries > 6000) { context.drawImage(video, 0, 0, canvas.width, canvas.height); // context.drawImage(logoImage, parseInt(canvas.width / 2) - parseInt(logoImage.width / 2), canvas.height - logoImage.height - 10); // context.drawImage(logoImage, parseInt(canvas.width / 2) - parseInt(32 / 2), canvas.height - 32 - 10, 32, 32); context.drawImage(logoImage, 10, 10, 32, 32); } else { context.drawImage(waitImage, 0, 0, canvas.width, canvas.height); } // repeat (looper) setTimeout(looper, 100); })(); }).catch(function(error) { alert('Unable to capture camera. Please check console logs.'); console.error(error); });
If you go to the link and start recording, and say aaaaaaaaaaaaaaaaaaaa, then the recording outputs the audio like aaaa aaa aaa.
aaaaaaaaaaaaaaaaaaaa
aaaa
aaa
Is this a bug in RecordRTC? Is there any way to get smooth audio and video in the recording while using canvas recording?
Thanks for your help in advance.
I was trying to implement the Screen Recording With Video and a logo using the RecordRTC library but found out that while using the example shown in
https://www.webrtc-experiment.com/RecordRTC/simple-demos/show-logo-on-recorded-video.html
results in segmented audio in the recording.
Here is a reproducible fiddle: https://jsfiddle.net/kiran589/L34bdhu7/5/
The code is like:
If you go to the link and start recording, and say
aaaaaaaaaaaaaaaaaaaa
, then the recording outputs the audio likeaaaa
aaa
aaa
.Is this a bug in RecordRTC? Is there any way to get smooth audio and video in the recording while using canvas recording?
Thanks for your help in advance.