How to get Webm to upload to server?

[jabrena]

Hi, I would like to use the library to record a video and upload the clip to server.
https://collab-project.github.io/videojs-record/examples/audio-video.html

Checking console I read this log messages:

Stopped recording video stream. RecordRTC.js:154:13
finished recording:  Blob { size: 1880080, type: "video/webm" } audio-video.html:55:5
video/webm -> 1.88 MB

Where is the file stored once the plaer finished recording:

player.on('finishRecord', function()
{
    // the blob object contains the recorded data that
    // can be downloaded by the user, stored on server etc.
    console.log('finished recording: ', player.recordedData);
});

[thijstriemstra]

Inside the finishRecord handler you can upload the blob to a serverside script. For example using jQuery.ajax:

player.on('finishRecord', function()
{
    var fd = new FormData();
    fd.append('fname', 'test.webm');
    fd.append('data', player.recordedData);
    $.ajax({
        type: 'POST',
        url: '/upload.php',
        data: fd,
        processData: false,
        contentType: false
    }).done(function(data) {
        console.log(data);
    });
});

[thijstriemstra]

Full explanation and code on http://stackoverflow.com/a/18254775

[jabrena]

I handle the front-end request using Node.js:

/*jslint node: true*/
"use strict";

var bodyParser = require('body-parser');
var multer = require('multer');
var express = require('express');
var app = express();
var http = require('http').Server(app);
var upload = multer({ dest: 'uploads/' });
var jsonParser = bodyParser.json();
app.use(jsonParser);

//REST
app.post('/upload/', upload.single('file'), function (req, res) {
    console.log(req.headers);

    console.log(req.file.filename);

    return res.end();
});

//Templating
app.use(express.static(__dirname + '/public'));

//Server
var localPort = process.env.VCAP_APP_PORT || 3000;
http.listen(localPort, function () {
    console.log('Listening on *:' + localPort);
});

Client side:

  var fd = new FormData();
  fd.append('fname', 'test.webm');
  fd.append('file', player.recordedData);
  $.ajax({
      type: 'POST',
      url: '/upload/',
      data: fd,
      processData: false,
      contentType: false
  }).done(function() {
      console.log("ok");
  });

[thijstriemstra]

I'm not familiar with node but I assume you figured it out?

[jabrena]

Yes, I understood your Client script and I adapted a old code to upload the Blog to the server.

If you like, I could do a pull request with a clean example with node.js if you like

[thijstriemstra]

No, thanks, there are many backend languages to choose from and documenting these things is better to keep in tickets like this imo.

[jabrena]

Oki

[nascent]

Hi,

I would like to know if this works for both Audio and Video.

It appears that the WebRTC Experiment does not work consistently across platforms, and while that may not be a fault of the library, it would seem difficult or impossible to record anytime or anywhere on any device, at this stage; whatever progress has been made, in relation to MediaRecorder and WebRTC.

Best of luck