Сохранение блобов в виде одного файла webm - PullRequest
Новая
       64

Сохранение блобов в виде одного файла webm

0 голосов
/ 11 сентября 2018

Я записываю экран пользователя через webrtc, а затем публикую видео-капли каждые х секунд, используя MediaStreamRecorder. На стороне сервера у меня настроено действие в парусах, которое сохраняет большой двоичный объект как файл webm.

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

Можно было бы объединить файлы с помощью ffmpeg, но я бы предпочел этого избежать, если это вообще возможно.

Вот код на клиенте: 

'use strict';


// Polyfill in Firefox.
// See https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/
if (typeof adapter != 'undefined' && adapter.browserDetails.browser == 'firefox') {
  adapter.browserShim.shimGetDisplayMedia(window, 'screen');
}

io.socket.post('/processvideo', function(resData) {
    console.log("Response: " + resData);
});

function handleSuccess(stream) {
  const video = document.querySelector('video');
  video.srcObject = stream;

var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/webm';
mediaRecorder.ondataavailable = function (blob) {
    console.log("Sending Data");
    //var rawIO = io.socket._raw;
    //rawIO.emit('some:event', "using native socket.io");

    io.socket.post('/processvideo', {"vidblob": blob}, function(resData) {
        console.log("Response: " + resData);
    });
};
mediaRecorder.start(3000);
}

function handleError(error) {
  errorMsg(`getDisplayMedia error: ${error.name}`, error);
}

function errorMsg(msg, error) {
  const errorElement = document.querySelector('#errorMsg');
  errorElement.innerHTML += `<p>${msg}</p>`;
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}

if ('getDisplayMedia' in navigator) {
  navigator.getDisplayMedia({video: true})
    .then(handleSuccess)
    .catch(handleError);
} else {
  errorMsg('getDisplayMedia is not supported');
}

Код на сервере: 

module.exports = async function processVideo (req, res) {
    var fs          = require('fs'),
        path        = require('path'),
        upload_dir  = './assets/media/uploads',
        output_dir  = './assets/media/outputs',
        temp_dir = './assets/media/temp';

    var params = req.allParams();
    if(req.isSocket && req.method === 'POST') {
        _upload(params.vidblob, "test.webm");
        return res.send("Hi There");
    }
    else {
        return res.send("Unknown Error");
    }

    function _upload(file_content, file_name) {
        var fileRootName = file_name.split('.').shift(),
        fileExtension = file_name.split('.').pop(),
        filePathBase = upload_dir + '/',
        fileRootNameWithBase = filePathBase + fileRootName,
        filePath = fileRootNameWithBase + '.' + fileExtension,
        fileID = 2;



        /* Save all of the files as different files. */
        /*
        while (fs.existsSync(filePath)) {
            filePath = fileRootNameWithBase + fileID +  '.' + fileExtension;
            fileID += 1;
        }
        fs.writeFileSync(filePath, file_content);
        */

        /* Appends the binary data like you'd expect, but it's not playable. */
        fs.appendFileSync(upload_dir + '/' + 'test.file', file_content);

    }
}

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 13 сентября 2018

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

...