How to record webcam and audio using webRTC and a server-based Peer connection

Question

I would like to record the users webcam and audio and save it to a file on the server. These files would then be able to be served up to other users.

I have no problems with playback, however I'm having problems getting the content to record.

My understanding is that the getUserMedia .record() function has not yet been written - only a proposal has been made for it so far.

I would like to create a peer connection on my server using the PeerConnectionAPI. I understand this is a bit hacky, but I'm thinking it should be possible to create a peer on the server and record what the client-peer sends.

If this is possible, I should then be able to save this data to flv or any other video format.

My preference is actually to record the webcam + audio client-side, to allow the client to re-record videos if they didn't like their first attempt before uploading. This would also allow for interruptions in network connections. I've seen some code which allows recording of individual 'images' from the webcam by sending the data to the canvas - that's cool, but I need the audio too.

Here's the client side code I have so far:

  <video autoplay></video>

<script language="javascript" type="text/javascript">
function onVideoFail(e) {
    console.log('webcam fail!', e);
  };

function hasGetUserMedia() {
  // Note: Opera is unprefixed.
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported in your browser');
}

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.querySelector('video');
var streamRecorder;
var webcamstream;

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    webcamstream = stream;
//  streamrecorder = webcamstream.record();
  }, onVideoFail);
} else {
    alert ('failed');
}

function startRecording() {
    streamRecorder = webcamstream.record();
    setTimeout(stopRecording, 10000);
}
function stopRecording() {
    streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {
/*  var x = new XMLHttpRequest();
    x.open('POST', 'uploadMessage');
    x.send(videoblob);
*/
    var data = {};
    data.video = videoblob;
    data.metadata = 'test metadata';
    data.action = "upload_video";
    jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
    alert ('video uploaded');
}

</script>

<div id="webcamcontrols">
    <a class="recordbutton" href="javascript:startRecording();">RECORD</a>
</div>

Solution 1

You should definitely have a look at Kurento. It provides a WebRTC server infrastructure that allows you to record from a WebRTC feed and much more. You can also find some examples for the application you are planning here. It is really easy to add recording capabilities to that demo, and store the media file in a URI (local disk or wherever).

The project is licensed under LGPL Apache 2.0

---

EDIT 1

Since this post, we've added a new tutorial that shows how to add the recorder in a couple of scenarios

• kurento-hello-world-recording: simple recording tutorial, showing the different capabilities of the recording endpoint.
• kurento-one2one-recording: How to record a one-to-one communication in the media server.
• kurento-hello-world-repository: use an external repository to record the file.

Disclaimer: I'm part of the team that develops Kurento.

Solution 2

I believe using kurento or other MCUs just for recording videos would be bit of overkill, especially considering the fact that Chrome has MediaRecorder API support from v47 and Firefox since v25. So at this junction, you might not even need an external js library to do the job, try this demo I made to record video/ audio using MediaRecorder:

Demo - would work in chrome and firefox (intentionally left out pushing blob to server code)

Github Code Source

If running firefox, you could test it in here itself( chrome needs https):

'use strict'

let log = console.log.bind(console),
  id = val => document.getElementById(val),
  ul = id('ul'),
  gUMbtn = id('gUMbtn'),
  start = id('start'),
  stop = id('stop'),
  stream,
  recorder,
  counter = 1,
  chunks,
  media;


gUMbtn.onclick = e => {
  let mv = id('mediaVideo'),
    mediaOptions = {
      video: {
        tag: 'video',
        type: 'video/webm',
        ext: '.mp4',
        gUM: {
          video: true,
          audio: true
        }
      },
      audio: {
        tag: 'audio',
        type: 'audio/ogg',
        ext: '.ogg',
        gUM: {
          audio: true
        }
      }
    };
  media = mv.checked ? mediaOptions.video : mediaOptions.audio;
  navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
    stream = _stream;
    id('gUMArea').style.display = 'none';
    id('btns').style.display = 'inherit';
    start.removeAttribute('disabled');
    recorder = new MediaRecorder(stream);
    recorder.ondataavailable = e => {
      chunks.push(e.data);
      if (recorder.state == 'inactive') makeLink();
    };
    log('got media successfully');
  }).catch(log);
}

start.onclick = e => {
  start.disabled = true;
  stop.removeAttribute('disabled');
  chunks = [];
  recorder.start();
}


stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  start.removeAttribute('disabled');
}



function makeLink() {
  let blob = new Blob(chunks, {
      type: media.type
    }),
    url = URL.createObjectURL(blob),
    li = document.createElement('li'),
    mt = document.createElement(media.tag),
    hf = document.createElement('a');
  mt.controls = true;
  mt.src = url;
  hf.href = url;
  hf.download = `${counter++}${media.ext}`;
  hf.innerHTML = `donwload ${hf.download}`;
  li.appendChild(mt);
  li.appendChild(hf);
  ul.appendChild(li);
}

      button {
        margin: 10px 5px;
      }
      li {
        margin: 10px;
      }
      body {
        width: 90%;
        max-width: 960px;
        margin: 0px auto;
      }
      #btns {
        display: none;
      }
      h1 {
        margin-bottom: 100px;
      }

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h1> MediaRecorder API example</h1>

<p>For now it is supported only in Firefox(v25+) and Chrome(v47+)</p>
<div id='gUMArea'>
  <div>
    Record:
    <input type="radio" name="media" value="video" checked id='mediaVideo'>Video
    <input type="radio" name="media" value="audio">audio
  </div>
  <button class="btn btn-default" id='gUMbtn'>Request Stream</button>
</div>
<div id='btns'>
  <button class="btn btn-default" id='start'>Start</button>
  <button class="btn btn-default" id='stop'>Stop</button>
</div>
<div>
  <ul class="list-unstyled" id='ul'></ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Solution 3

Please, check the RecordRTC

RecordRTC is MIT licensed on github.

Solution 4

yes, as you understood, MediaStreamRecorder is currently unimplemented.

MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams . It allows web apps to create a file from a live audio/video session.

alternatively you may do like this http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia but audio is missing part.

Solution 5

You can use RecordRTC-together, which is based on RecordRTC.

It supports recording video and audio together in separate files. You will need tool like ffmpeg to merge two files into one on server.

View more solutions

Comments

[Firas]

I have the same issue. Is the method getRecordedData() working for you ? It's not on my fresh-updated-browsers.

[Dave Hilditch]

No - I tried 'Google Canary' too.

[Dave Hilditch]

Yeah I'm keeping a close eye on it - I will update this thread when there's a proper solution.

[Muhammad]

if you got the solution of above question please share with me, Thanks

[Vinay]

Has anyone been able to get at the MediaStream bytes via some server-side RTC magic?

[wrufesh]

Openvidu openvidu.io

[Firas]

Yep, and you can capture the audio file, send it to the server, and combine them there to create a real video file on the server side. But this solution might be very slow on the client side depending on its computer configuration, as it has to create image files using a canvas AND capture the audio, and all of this in the RAM... Btw, firefox team are working on it, so hopefully they will release it soon.

[Brian Dear]

That is pretty awesome -- my question: can that record video and audio together (live a real video rather than two separate things?)

[Dave Hilditch]

Agreed - awesome, but it looks like it only records the data separately.

[Mifeng]

@BrianDear there is one RecordRTC-together

[Redtopia]

Looks promising. Do you know where I can find information on how it scales? E.g., how many streams can be processed by a server, etc.?

[igracia]

@Redtopia In some recent load tests we were able to get 150 one2one connections of webrtc on an i5/16GB RAM. You can expect that these numbers will be better in the future, but don't expect miracles: there is a lot of encryption going on for SRTP, and that is demanding. We are looking into hardware-accelerated encryption/decryption, and the numbers will go higher, and though I can't assure you how much better it will be until we test it more thoroughly, we expect a 3x improvement

[user344146]

In my experience, the Kurento media server isn't necessarily ready for production. I couldn't get the latest version of their Java tutorial to compile at all using Maven, complained about some missing POM modules which I couldnt find anywhere. I googled and the only reply from a member of Kurento team was RTFM and study more Maven. Of course you get what you pay for, but still I don't want to spend my time on technology like that. Recording the video client-side and uploading periodically could be easier, for example this looks promising github.com/streamproc/MediaStreamRecorder

[igracia]

@user344146 That was probably me answering. Would you mind sharing a link to that post? If you got that answer, it's probably because you asked something that was already there or in the list. It looks like you were trying to compile a SNAPSHOT version. Those artifacts don't get published in central, so either you checkout a release of the tutorials or use our internal dev repo. This has been answered in the list many times, there is an entry in the documentation about working with development versions... We took the time to write it, so it would be nice of you to take the time to read it.

[Eddie Monge Jr]

yeah but how do you get them there?

[Vinay]

This approach works via Whammy.js in Chrome. This is problematic since the quality tends to be much lower from the emulation Whammy provides for Chrome's lack of a MediaStreamRecorder. What essentially happens is WhammyRecorder points a video tag to the MediaStream object URL and then takes webp snapshots of a canvas element at a certain frame rate. It then uses Whammy to put all those frames together into a webm video.

[Brad]

This is a browser solution, not server-side.

[octavn]

Chrome 49 is the 1st to support the MediaRecorder API without the flag.

[Krystian]

I'm just using Kurento to make such recording. I'ts not complicated, but need a little bit of time, to understand the concept- because some of docs are really mean- and finding what can I send to kurento, or description of events and so on can be sometimes really frustrating. But anyway- a open project like this is really a great job and worth of using. Kurento is working in linux only (windows version is not official and does not work with full functionality).

[AMH]

@igracia any example to be able to use with asp.,net mvc

[igracia]

@AMH NOt that I know of, but it shouldn't be hard for you to port it.

[Bilbo Baggins]

@igracia is it possible to record a video message for later viewing just like the same way we have voice mail stuff using webRTC ?

[igracia]

@BilboBaggins Sure! You can use a recorder to record the message, and then use a player to stream the message.

[Bilbo Baggins]

@igracia Thanks for answer, I would like to know that the current version of Kurento supports which Operating systesm apart from Ubuntu 14.0 LTS, why is Ubuntu compulsory? Which Java version it supports( I checked the documentation and pom.xml but couldn't find it) ? Does it support Ubuntu 16.04LTS ?

[Bilbo Baggins]

Found answers for above questions (posting here for others), Kurento currently supports JDK 7.0, It is not that it has to be dependent on Ubuntu 14.04, it should support later versions as well, but Kurento is not tested officially on other versions of Ubuntu/other linux version. Also Kurento releases 64 bit versions as readily available for isntallation, however you can install 32 bit version of server but you have to build it first.

[jamix]

Unfortunately, as stated in my answer, the development of Kurento has slowed down severely after the Twilio acquisition. I recommend using Janus instead.

[Stepan Yakovenko]

is this commercial stuff?