Recorded video can't be forwarded/backwarded, MediaRecorder api used chrome extension

[dinesh-pathak100]

Sir I am using MediaRecorder api for recording the screen with audio, using your extension code for recording and the video is generated properly but I can't forward/backward this video or start from any point for first time , when it play first time after that it works fine. I am using this code at stop recording

`function stopScreenRecording(blob) { isRecording = false; var blob = new Blob(chunks, {type: "video/mp4"}); chunks = [];

var mimeType = 'video/webm';
var fileExtension = 'webm';

var file = new File([blob ? blob : ''], getFileName(fileExtension), {
    type: mimeType
});

DiskStorage.Store({
    key: 'latest-file',
    value: file
}, function (success) {
    if (success) {
        chrome.browserAction.setPopup({
            popup: "popup.html"
        });
        chrome.tabs.create({
            url: 'preview.html'
        });
    }
});

// invokeSaveAsDialog(file, file.name);

setTimeout(function() {
    setDefaults();
    // chrome.runtime.reload();
}, 1000);

try {
    videoPlayers.forEach(function(player) {
        player.src = null;
    });
    videoPlayers = [];
} catch (e) {}

// for dropdown.js
chrome.storage.sync.set({
    isRecording: 'false' // FALSE
});

if (timer) {
    clearTimeout(timer);
}
setBadgeText('');

} ` and this is for start recording

`function gotStream(stream) {

if (cameraStream && cameraStream.getAudioTracks().length) {
    cameraStream.getAudioTracks().forEach(function(track) {
        // cameraStream.removeTrack(track);
        stream.addTrack(track);
    });
}

if (typeof MediaRecorder.isTypeSupported == 'function'){
    /*
     MediaRecorder.isTypeSupported is a function announced in https://developers.google.com/web/updates/2016/01/mediarecorder and later introduced in the MediaRecorder API spec http://www.w3.org/TR/mediastream-recording/
     */
    if (MediaRecorder.isTypeSupported('video/mp4;codecs=h264')) {
        var options = {type:'video',mimeType: 'video/mp4;codecs=h264'};
    } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
        var options = {type:'video',timeSlice: 1000,mimeType: 'video/webm;codecs=vp9'};
    } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
        var options = {mimeType: 'video/webm;codecs=vp8'};
    }
    console.log('Using '+options.mimeType);
    recorder = new RecordRTC(stream, options);
}else{
    console.log('Using default codecs for browser');
    recorder = new MediaRecorder(stream);
}

recorder.streams = [stream];
recorder.startRecording();

recorder.ondataavailable = function(e) {
    chunks.push(e.data);
};

recorder.onerror = function(e){
    console.log('Error: ', e);
};

recorder.onstart = function(){
    isRecording = true;
    onRecording();
    console.log('Started & state = ' + recorder.state);
};

recorder.onpause = function(){
    console.log('Paused & state = ' + recorder.state);
}

recorder.onresume = function(){
    console.log('Resumed  & state = ' + recorder.state);
}

recorder.onwarning = function(e){
    console.log('Warning: ' + e);
};

recorder.onstop = function(){
    stopScreenRecording();
}

stream.onended = function() {
    if (stream) {
        stream.onended = null;
    }
    recorder.stop();
};

if(stream.getVideoTracks().length) {
    stream.getVideoTracks().forEach(function(track){
        track.onended = function() {
            if(!recorder) return;
            if(!stream || typeof stream.onended !== 'function') return;
            stream.onended();
        };
    });
}

}`

Sir please provide some solution thank you @muaz-khan

[muaz-khan]

Please make sure to pass video/webm\;codecs=vp9 to fix seeking issues.

• https://github.com/muaz-khan/Chrome-Extensions/blob/master/screen-recording/background/background.js#L30

[dinesh-pathak100]

I have tried this also but problem is same Sir @muaz-khan

[dinesh-pathak100]

Sir @muaz-khan I have tested your extension , there is also the same problem of video controls ie. the forward/ backward and start from any point first time we played the video. The video control which shows how much part video is played not started when video is playing, it directly reaches to end when video end . Sir @muaz-khan please help for this problem.

[muaz-khan]

It is a known chromium issue. I'm able to seek all vp9-based recorded videos on Win10/DellXPS15.

So this issues happens on a few devices only.

[harshalpatil2012]

I am also facing same issue where captured video are not able to seek forward or backward. Tried above approach to pass video/webm;codecs=vp9 on windows 10. Is there anything missing?

[muaz-khan]

Please try this:

video.onloadedmetadata = function() {
    video.onloadedmetadata = null; // [optional]
    video.currentTime = 0; // to initial position [optional]
};
video.src = URL.createObjectURL(blob);
video.currentTime = 9999999999; // this line is important; other code is optional

[dinesh-pathak100]

@muaz-khan, Thank you, It works fine on browser when recorded video generates. But this webm video produce same problem when I play offline after download and when I upload this to any other website

[preetisachdeva1]

@muaz-khan . I am using webrtc. Not working with video.currentTime = 9999999999; Not able to seek the video. I have to add backward and forward to video. Any one have solution for that. NOt working on chrome.

[muaz-khan]

@preetisachdeva1 This tool ( https://github.com/legokichi/ts-ebml/ ) is expected to fix it. I'll include a fix in the next version.

[baynojunemark24]

Please make sure to pass video/webm\;codecs=vp9 to fix seeking issues.

• https://github.com/muaz-khan/Chrome-Extensions/blob/master/screen-recording/background/background.js#L30

How can I do it if I only record the audio-only? Because I am having the same issue, I can't forward/backward the audio.

[javdome]

This worked for me: https://github.com/yusitnikov/fix-webm-duration