I am trying to record a MP4 stream from Chrome and save it to the end user's system. As part of this, I have a NodeJS server running locally and streaming MP4 video at url "http://localhost:8000/video". Also I have an HTML page hosted at "http://localhost:8000" to play this stream. Since I want this HTML page to autoplay the video, video is in muted state.(This is based on Chrome Autoplay Policy)
Now, I have a button to start record the video, which invokes the "startRecording
" function defined below. It uses video element's stream as input to MediaRecorder to create a recorder.
On stopping the recording using "stopRecording
" function, MediaRecorder's ondataavailable
handler will be triggered and the data captured from the stream will be available in data attribute of the event. I have added a log statement to capture this data size.
When I record the video, I am always getting the data size as 0 when the video is muted. But if I unmute the video from the video player and then record, I am getting the data. How can I record the stream when video is muted? Sharing the relevant code snippets below:
<video id="videoPlayer" width="650" controls autoplay muted>
<source src="/video" type="video/mp4" />
</video>
<script>
var recorder;
var chunks = [];
function startRecording() {
var stream = document.getElementById('videoPlayer').captureStream();
recorder = new MediaRecorder(stream, {mimeType : 'video/webm;avc1,opus'});
recorder.ondataavailable = e => {
console.log(e.data.size); // getting 0 here when video is muted
chunks.push(e.data);
};
recorder.start();
}
function stopRecording() {
recorder.stop();
}
</script>