Объедините записанные BLOB-объекты потоковых записей в один файл, способный к воспроизведению - PullRequest
Новая
       40

Объедините записанные BLOB-объекты потоковых записей в один файл, способный к воспроизведению

0 голосов
/ 17 июня 2019

Я работаю на WebRTC с функцией записи. WebRTC connection is working fine but the same media stream когда мы отправляем на MediaRecorder, происходит сбой. ниже приведен синтаксис для потока WebRTC 

function onRemoteStreamReceived(rtcMedia) {
            var stream = rtcMedia.streams[0];
            attachMedia(remoteVideo[0], stream);
            console.log("onRemoteStreamReceived");
            if (mediaRecorder == null){
              startMediaRecorder(stream);
            }
}

А вот и startMediaRecorder

function startMediaRecorder(stream) {
            console.log("startMediaRecorder started");
            if (MediaRecorder.isTypeSupported(recordMediaType.mimeType)) {
              // default option is supported              
            } else if (MediaRecorder.isTypeSupported("video/webm")) {
                recordMediaType = { mimeType: "video/webm" };
            } else if (MediaRecorder.isTypeSupported("video/webm;codecs=h264")) {
              recordMediaType = { mimeType: "video/webm;codecs=h264" };
            } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
              recordMediaType = { mimeType: 'video/webm;codecs=vp8' };
            } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
              recordMediaType = { mimeType: 'video/webm;codecs=vp9' };
            } else if (MediaRecorder.isTypeSupported('video/webm')) {
              recordMediaType = { mimeType: 'video/webm' };
            } else {
              console.log("Browser not supported to record the session");
              return;
            }
            console.log("recordMediaType", recordMediaType);
            console.log("stream", stream);
            mediaRecorder = new MediaRecorder(stream, recordMediaType);
            mediaRecorder.ondataavailable = handleDataAvailable;
            notify('recorder:enbaled',{ recordingSupported: true, recordMediaType: recordMediaType });
        }

Теперь в приведенном выше методе для обратного вызова mediaRecorder.ondataavailable мы собираем поток данных BLOB-объектов и сохраняем их в массиве. Вот фрагмент для преобразования массива больших двоичных объектов в видеофайл для загрузки, который имеет issues new Blob(data, {mimeType: vm.recordMediaType.mimeType}) содержит data, который является массивом содержимого BLOB-объектов, а mimetype - video/webm Ниже приведен целый фрагмент кода. 

const blob = new Blob(data, {mimeType: vm.recordMediaType.mimeType})
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = 'downloadvideo.webm';
                document.body.appendChild(a);
                a.click();
                $timeout(function() {
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                }, 10000);

Проблема, с которой мы сталкиваемся, заключается в том, что видео загружается, но загруженное видео немедленно воспроизводит весь контент.

...