you can try this way :
record_video: function(event) {
var file_node = event.target;
var id = file_node.getAttribute('data_id');
console.log(camera_stream);

// Set MIME type of recording as video/webm
var media_recorder = new MediaRecorder(camera_stream, { mimeType: 'video/webm' });

// Array to store recorded video blobs
var blobs_recorded = [];

// Event: new recorded video blob available
media_recorder.addEventListener('dataavailable', function(e) {
blobs_recorded.push(e.data);
});

// Event: recording stopped & all blobs sent
media_recorder.addEventListener('stop', function() {
// Create local object URL from the recorded video blobs
var video_blob = new Blob(blobs_recorded, { type: 'video/webm' });
var video_reader = new FileReader();

video_reader.onloadend = function() {
// Convert the video blob to base64 data URL
var base64_video = video_reader.result;
console.log(base64_video);
// Handle the base64_video data as needed
};

video_reader.readAsDataURL(video_blob);
});

media_recorder.start(); // Start recording

this.$('#stop_' + id).show(); // Button to stop recording
this.$('#record_' + id).hide(); // Button to start recording
}
explanation:

1. When the dataavailable event is triggered, the recorded video blob (e.data) is pushed into the blobs_recorded array.

2. When the recording is stopped (in the stop event), the blobs_recorded array contains all the recorded video blobs.

3. A new Blob is created from the collected video blobs, and a FileReader (video_reader) is initialized.

4. In the onloadend event of the video_reader, the video blob is converted to a base64 data URL (base64_video), which can be further processed or displayed as needed.