xqq / mpegts.js

HTML5 MPEG2-TS / FLV Stream Player
Apache License 2.0
1.77k stars 218 forks source link

Cannot Record Video Elements #184

Open alfian444 opened 6 months ago

alfian444 commented 6 months ago

I want to record streaming video but when I check using new MediaRecorder the data size obtained is 0 like the following code

var videoElement=document.getElementById('frame');
player= mpegts.createPlayer({
                            isLive: true,
                            type: format,
                            url: url_stream,
                        },{});
player.attachMediaElement(videoElement);
player.load(function(){
videoElement.play();
  });
player.play();
videoElement.play();

$("#record").click(function(){
let recordedChunks = [];
 var mediaRecorder = new MediaRecorder(videoElement, { mimeType: 'video/webm' });
 mediaRecorder.ondataavailable = function (event) {
            console.log('recordedChunks',event)
            recordedChunks.push(event.data);

        };
mediaRecorder.onstop = function () {
            const blob = new Blob(recordedChunks, { type: 'video/webm' });
            const videoUrl = URL.createObjectURL(blob);

            const downloadLink = document.createElement('a');
            downloadLink.href = videoUrl;
            downloadLink.download ='record.webm';
            downloadLink.click();

            URL.revokeObjectURL(videoUrl);
        };
        mediaRecorder.start();
})
$("#stop").click(function(){
   mediaRecorder.stop();
})
alfian444 commented 6 months ago

I found the problem, I can't do MediaRecord maybe because the audio codec I have is "opus" mimeType: 'video/x-matroska;codecs=avc1,opus' Can I desable the audio?

i tried to add hasAudio:false in MediaDataSource but the stream won't play