Поиск не работает в записанном видео с помощью MediaRecorder API

Я пытаюсь создать запись экрана с помощью MediaRecorder API.

Подход, основанный на рекламе в СМИ

var chunks = [];
var recorder = new MediaRecorder(stream);

recorder.streams = [stream];

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

recorder.onstop = function(){
      var blob = new Blob(chunks, {type: "video/webm"});
      chunks = [];

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

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

При использовании этого подхода запись работает нормально, но поиск записанного видео не работает.

Я поискал в Интернете эту проблему и обнаружил, что заголовок видео не содержит длительности.

При печати объекта file на консоли он содержит следующие свойства:

lastModified : 1527592713006
lastModifiedDate : Tue May 29 2018 16:48:33 GMT+0530 (India Standard Time) 
name : "Recording-May,29 2018 4:48:33 PM.webm"
size : 1971220
type : "video/webm"
webkitRelativePath : ""

Видно, что файловый объект не содержит свойства duration.

Может ли кто-нибудь предложить любую доступную библиотеку javascript, которая может восстанавливать заголовок видео на стороне клиента только при подготовке видеофайла?


javascript screen-recording web-mediarecorder mediarecorder-api
person Akshay Rathore    schedule 29.05.2018    source источник
comment
Согласно этому отчету об ошибке информация о длине будет отсутствовать в Хром. Firefox , похоже, решил проблему. Можете ли вы подтвердить, что у вас проблема только в Chrome?   -  person Octavian Naicu    schedule 13.07.2018

Ответы (2)


arrow_upward
5
arrow_downward

Это хорошо известная ошибка в Chrome. Обычно продолжительность записанного носителя не добавляется к заголовкам окончательного файла.

К сожалению, эта ошибка в настоящее время помечена командой Chromium как WontFix. Однако есть несколько обходных путей:

  • На бэкэнде, используя ffmpeg для исправления заголовков: ffmpeg -i old.webm output.webm

  • На веб-интерфейсе обходной путь на этот ответ или используя пакет ts-ebml.

person ACBM    schedule 07.03.2019

arrow_upward
1
arrow_downward

ознакомьтесь с getSeekableBlob на странице https://recordrtc.org/

это код:

function getSeekableBlob(inputBlob, callback) {
    // EBML.js copyrights goes to: https://github.com/legokichi/ts-ebml
    if (typeof EBML === 'undefined') {
        throw new Error('Please link: https://cdn.webrtc-experiment.com/EBML.js');
    }
    var reader = new EBML.Reader();
    var decoder = new EBML.Decoder();
    var tools = EBML.tools;
    var fileReader = new FileReader();
    fileReader.onload = function(e) {
        var ebmlElms = decoder.decode(this.result);
        ebmlElms.forEach(function(element) {
            reader.read(element);
        });
        reader.stop();
        var refinedMetadataBuf = tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
        var body = this.result.slice(reader.metadataSize);
        var newBlob = new Blob([refinedMetadataBuf, body], {
            type: 'video/webm'
        });
        callback(newBlob);
    };
    fileReader.readAsArrayBuffer(inputBlob);
}
person Bastianon Massimo    schedule 03.06.2021