grabar - open android camera javascript

MediaStream Capture lienzo y audio simultáneamente

Question

Estoy trabajando en un proyecto en el que me gustaría:

1. Cargue un video js y muéstrelo en el lienzo.
2. Use filtros para alterar la apariencia del lienzo (y, por lo tanto, del video).
3. Utilice el método MediaStream captureStream () y un objeto MediaRecorder para grabar la superficie del lienzo y el audio del video original.
4. Reproduzca la secuencia del lienzo y el audio en un elemento de video HTML.

He podido mostrar el lienzo grabado en un elemento de video ajustando este código de demostración de WebRTC: https://webrtc.github.io/samples/src/content/capture/canvas-record/

Dicho esto, no puedo entender cómo grabar el audio del video junto con el lienzo. ¿Es posible crear un MediaStream que contenga instancias de MediaStreamTrack desde dos fuentes / elementos diferentes?

De acuerdo con las especificaciones de la API MediaStream, teóricamente debería haber alguna forma de lograr esto: https://w3c.github.io/mediacapture-main/#introduction

"Los dos componentes principales en MediaStream API son las interfaces MediaStreamTrack y MediaStream. El objeto MediaStreamTrack representa los medios de un único tipo que se origina a partir de una fuente de medios en el agente de usuario, por ejemplo, un video producido por una cámara web. varios objetos MediaStreamTrack en una unidad que se puede grabar o representar en un elemento multimedia ".

Answer 1

¿Es posible crear un MediaStream que contenga instancias de MediaStreamTrack desde dos fuentes / elementos diferentes?

Sí, puedes hacerlo usando el método MediaStream.addTrack() .

Pero Firefox solo usará las pistas de la secuencia inicial en la Grabadora hasta que se haya solucionado este error .

OP ya sabía cómo obtenerlo todo, pero aquí hay un recordatorio para futuros lectores:

• Para obtener una pista de videoStream desde el lienzo, puede llamar al canvas.captureStream(framerate) .

• Para obtener un streamTrack de audio a partir de un elemento de video, puede usar la API de WebAudio y el método createMediaStreamDestination . Esto devolverá un nodo MediaStreamDestination ( dest ) que contiene nuestro audioStream. A continuación, tendrá que conectar un MediaElementSource creado a partir de su elemento de video a este dest . Si necesita agregar más pistas de audio a esta secuencia, debe conectar todas estas fuentes a dest .

Ahora que tenemos dos transmisiones, una para el video canvas y otra para el audio, podemos usar canvasStream.addTrack(audioStream.getAudioTracks()[0]) justo antes de inicializar nuestro new MediaRecorder(canvasStream) .

Aquí hay un ejemplo completo, que solo funcionará ahora en Chrome, y probablemente pronto en Firefox, cuando hayan corregido el error:

var cStream,
  aStream,
  vid,
  recorder,
  analyser,
  dataArray,
  bufferLength,
  chunks = [];

function clickHandler() {

  this.textContent = ''stop recording'';
  cStream = canvas.captureStream(30);
  cStream.addTrack(aStream.getAudioTracks()[0]);

  recorder = new MediaRecorder(cStream);
  recorder.start();

  recorder.ondataavailable = saveChunks;

  recorder.onstop = exportStream;

  this.onclick = stopRecording;

};

function exportStream(e) {

  if (chunks.length) {

    var blob = new Blob(chunks)
    var vidURL = URL.createObjectURL(blob);
    var vid = document.createElement(''video'');
    vid.controls = true;
    vid.src = vidURL;
    vid.onend = function() {
      URL.revokeObjectURL(vidURL);
    }
    document.body.insertBefore(vid, canvas);

  } else {

    document.body.insertBefore(document.createTextNode(''no data saved''), canvas);

  }
}

function saveChunks(e) {

  e.data.size && chunks.push(e.data);

}

function stopRecording() {

  vid.pause();
  this.parentNode.removeChild(this);
  recorder.stop();

}

function initAudioStream(evt) {

  var audioCtx = new AudioContext();
  // create a stream from our AudioContext
  var dest = audioCtx.createMediaStreamDestination();
  aStream = dest.stream;
  // connect our video element''s output to the stream
  var sourceNode = audioCtx.createMediaElementSource(this);
  sourceNode.connect(dest)
    // start the video
  this.play();

  // just for the fancy canvas drawings
  analyser = audioCtx.createAnalyser();
  sourceNode.connect(analyser);

  analyser.fftSize = 2048;
  bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  analyser.getByteTimeDomainData(dataArray);

  // output to our headphones
  sourceNode.connect(audioCtx.destination)

  startCanvasAnim();

  rec.onclick = clickHandler;
  rec.disabled = false;
};

var loadVideo = function() {

  vid = document.createElement(''video'');
  vid.crossOrigin = ''anonymous'';
  vid.oncanplay = initAudioStream;
  vid.src = ''https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4'';

  
}

function startCanvasAnim() {
  // from MDN https://developer.mozilla.org/en/docs/Web/API/AnalyserNode#Examples
  var canvasCtx = canvas.getContext(''2d'');

  canvasCtx.fillStyle = ''rgb(200, 200, 200)'';
  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = ''rgb(0, 0, 0)'';

  var draw = function() {

    var drawVisual = requestAnimationFrame(draw);

    analyser.getByteTimeDomainData(dataArray);

    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
    canvasCtx.beginPath();

    var sliceWidth = canvas.width * 1.0 / bufferLength;
    var x = 0;

    for (var i = 0; i < bufferLength; i++) {

      var v = dataArray[i] / 128.0;
      var y = v * canvas.height / 2;

      if (i === 0) {
        canvasCtx.moveTo(x, y);
      } else {
        canvasCtx.lineTo(x, y);
      }

      x += sliceWidth;
    }

    canvasCtx.lineTo(canvas.width, canvas.height / 2);
    canvasCtx.stroke();

  };

  draw();

}

loadVideo();

<canvas id="canvas" width="500" height="200"></canvas>
<button id="rec" disabled>record</button>

Ps : Como el equipo de FF parece tomarse un tiempo para arreglar el error, aquí hay una solución rápida para que funcione en FF también.

También puede mezclar dos pistas usando el new MediaStream([track1, track2]) .
Sin embargo, Chrome actualmente prefija este constructor, pero dado que admite addTrack , no es realmente necesario, y podemos venir con algo tan feo como

var mixedStream = ''MediaStream'' in window ? 
  new MediaStream([cStream.getVideoTracks()[0], aStream.getAudioTracks()[0]]) :
  cStream;
recorder = new MediaRecorder(mixedStream);

Violín de trabajo tanto para FF como para cromo.