WebRTC recording via Kurento media server

Official guide

I encountered some errors while following the Official guide.
Lucky, I fixed all the errors and make it work finally.
Notes my workaround here, hope it work for you if you have the same problem.

gpg: keyserver receive failed: keyserver error

local install guide

solution from stackoverflow

sudo apt-key adv --keyserver hkp://keys.gnupg.net:80 --recv-keys 5AFA7A83

WebSocket connection to 'wss://<local_ip>:8433/kurento' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

cause

the application server is started with https if you follow the guide:

http-server -p 8443 -S -C keys/server.crt -K keys/server.key 

but kurento media server start without ssl by default config.
You can get from the config and the default port is 8888.
/etc/kurento/kurento.conf.json

solution

modify kurento media server config to enable ssl and use the same cert that used for your application server. it is a little complex.
but we have a easy solution, just start your application without ssl and test with firefox(if use chrome, you will got a dom exception, then you have to enable ssl for kms).

modify js/index.js
ws_uri: 'ws://' + location.hostname + ':8888/kurento'

start application server with
http-server -p 8443

record callback not triggered

if you use kurento-hello-world-recorder-generator as the example, then everything works well.
but if you use kurento-tutorial-js/kurento-recorder, you might found record not work.

https://github.com/Kurento/kurento-tutorial-js/pull/3

Below patch is work solution for it, but it was not accepted, strange thing.
https://github.com/Kurento/kurento-tutorial-js/pull/3/commits/ccab45818f3336639eec3c02a56f14209124901c

How to Record video use getUserMedia and MediaRecorder API

example

sample codes

  <div>
    <video id='camera'></video>
  </div>
  <script type='text/javascript'>
    var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    p.then(function(mediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(mediaStream);
      video.onloadedmetadata = function() {
        video.muted = true;
        video.play();
      }
      var mediaRecorder = new MediaRecorder(mediaStream);
      var chunks = [];
      mediaRecorder.ondataavailable = function(e) {
        chunks.push(e.data);
      }
      mediaRecorder.onstop = function() {
        var blob = new Blob(chunks, {'type' : 'video/webm'});
        chunks = [];
        var hyperlink = document.createElement('a');
        hyperlink.href = URL.createObjectURL(blob);
        video.src = hyperlink.href;
        video.muted = false;
        video.controls = true;
        hyperlink.download = 'record.mp4';
        hyperlink.style = 'display:none;opacity:0;color:transparent;';
        (document.body || document.documentElement).appendChild(hyperlink);
if (typeof hyperlink.click === 'function') {
  hyperlink.click();
} else {
            hyperlink.target = '_blank';
            hyperlink.dispatchEvent(new MouseEvent('click', {
                view: window,
                bubbles: true,
                cancelable: true
            }));
        }     
    }
      mediaRecorder.start();      
      setTimeout(function() {
        mediaRecorder.stop();
        video.src = '';
        video.muted = false;
        video.stop();
      }, 10000);
    });
</script>