Convert extracted binary from . getUserMedia() to . mp4

Question

I am storing the user’s video and audio using . getUserMedia() in javascript and sending it to a websocket listening in C# (MVC). I leave down the path that the data makes until it reaches the server.

Javascript

var chunks = [];
var stream = null;
...

function getMedia() {
   var constraints = { audio: true, video: { width: 1280, height: 720 } };

   navigator.mediaDevices.getUserMedia(constraints)
   .then(function (mediaStream) {

    stream = mediaStream;

    if (hasWebSockets) {
        try {
            socket = new WebSocket(myC#SocketURL);

            ...
        }
    }

    mediaRecorder.ondataavailable = function (e) {

        chunks.push(e.data);
    }


    mediaRecorder.onstop = function (e) {

        if (socket.readyState == WebSocket.OPEN) {
            ReadAndSend(chunks[i]); // i aumenta em todos os ciclos, 
                                       indica a sequência dos dados. 
                                       esta sequência vai ser usada em C#
        }        
    }

function ReadAndSend(t) {
   var reader = new FileReader();

   reader.addEventListener("loadend", function () {

       var s = reader.result;
       var view = new Uint8Array(s);
       var binary = btoa(Uint8ToString(view));

       var toSend = {

           "sequencia" : i,
           "data": binary

       };


       var z = JSON.stringify(toSend);

       try {

           socket.send(z);
       }

}

function Uint8ToString(u8a) {
   console.log("Uint8ToString");
   var CHUNK_SZ = 0x64000;
   var c = [];
   for (var i = 0; i < u8a.length; i += CHUNK_SZ) {
       c.push(String.fromCharCode.apply(null, u8a.subarray(i, i + 
                                           CHUNK_SZ)));
   }
   return c.join("");

}

In Csharp

WebSocket webSocket = webSocketContext.WebSocket;

        try
        {

            var receiveBuffer = new ArraySegment<Byte>(new Byte[1024 * 1024 * 16]); ;

            while (webSocket.State == WebSocketState.Open)
            {

                WebSocketReceiveResult receiveResult = await webSocket.ReceiveAsync(receiveBuffer);


                ...
                byte[] payloadData = receiveBuffer.Array.Where(b => b != 0).ToArray();
                string receiveString = System.Text.Encoding.UTF8.GetString(payloadData, 0, payloadData.Length);

                JObject o = JObject.Parse(receiveString);
                TransFile transFileChunk = new TransFile();
                string ba = o["data"].ToString();
                transFileChunk.bytes = Convert.FromBase64String(ba);
                transmitedFiles[nomeDoFicheiro].Add(transFileChunk);



                 if (receiveResult.MessageType == WebSocketMessageType.Close)
                {
                    await webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "", CancellationToken.None);

                    var files = transmitedFiles.Distinct().ToList();

                    foreach (KeyValuePair<string, List<TransFile>> ltf in files)
                    {

                        foreach (TransFile tf in ltf.Value.Where(m => m.bytes.Length != 0).OrderBy(m => m.sequence))
                        {
                            using (BinaryWriter writer = new BinaryWriter(File.Open("C://Path" + ltf.Key + ".mp4", FileMode.Append)))
                            {

                                writer.Write(tf.bytes);
                            }
                        }

                        transmitedFiles.Remove(ltf.Key); // vamos apagar o ficheiro do 'repositório'
                    }


                }
  
            }

Using FFMPEG to convert works, but the final file size is too large, which can’t be because these videos are used by the user within the web app.

Answer 1

What you can do is use a compression codec like x264 to reduce the size of the converted file, after that if the result is not yet what you want. All that remains is to reduce the bitrate and or limit the video dimensions.

ffmpeg -fflags +genpts -i videoDaWebcam.mp4 -vcodec libx264 -crf 22 convertido.mp4