Tschebo: videorecorder - video abspeichern

Ich nehme über den Browser abwechselnd ein Audio bzw. ein Video auf, was danach im Browser abgespielt wird. Als Grundlage ist ein Skript von Mido MediaRecorder von Mido. Allerdings möchte ich genauso wie das Audio auch das Video fehlerfrei abspeichern. Das gelingt bisher noch nicht ganz.

Das Javascript sieht an der Stelle so aus:


'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')
  ;
  console.log('url: '+url+'//');
  mt.controls = true;
  mt.src = url;
  hf.href = url;
  hf.download = `${counter++}${media.ext}`;
//  hf.innerHTML = `download ${hf.download}`;
  li.appendChild(mt);
//  li.appendChild(hf);
  ul.appendChild(li);
  $('#btnWeiter').css({'visibility':'visible'});
  $('.btn').remove();
  
//      var filename = 'test.wav';
      var data     = new FormData();
      data.append('file', blob);
      data.append('sessID', sessID);
      data.append('idx', idx);

      $.ajax({
        url :  "./srv/lb/recorder/postWave.inc.php",
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        success: function(data) {
          console.log('data: '+data);
        },
        error: function() {
          alert("Fehler.");
        }
      });
}

Mein PHP-Code sieht so aus:

print  '<pre>'; print_r($_POST); echo '</pre>';
$ext = $_POST['idx'] == 1 ? '.ogg' : '.mp4';

if(isset($_FILES['file']) and !$_FILES['file']['error']) {
  $fname = "audio_" . $_POST['sessID'] . $ext;

  move_uploaded_file($_FILES['file']['tmp_name'], "../../data/wav/" . $fname);
}

Mit den Audiodateien funktioniert das problemlos. Nur bei der Videodatei bekomme ich zwar eine *.mp4, die auch nur als Audio funktioniert.

Was muss ich hier noch einbauen, damit das funktioniert?

akzeptierte Antworten

  1. Hallo Tschebo,

    technisch kenne ich mich an der Stelle nicht aus.

    Aber wird am gestreamten Medium möglicherweise per DRM ein Aufzeichnungsverbot verhängt?

    Rolf

    --
    sumpsi - posui - clusi
    1. Nein, passt alles.