重新连接断开的视频元素音频节点

Question

我正在录制一个画布流 (streamA)，其中包含从视频元素导出并导入到 outputcanvas 元素中的视频帧。

var video = document.createElement("VIDEO");
video.src = "test.mp4";

var outputcanvas = document.createElement("CANVAS");
outputcanvas.width = 1920; 
outputcanvas.height = 1080;
var ctx = outputcanvas.getContext("2d");

var streamA = outputcanvas.captureStream(60);

然后我使用网络音频 api 将视频音频连接到流

var source; 
var dest;
var getContext = function() {
  var ac = null;
  if ( !window.AudioContext && !window.webkitAudioContext ) {
    console.warn('Web Audio API not supported in this browser');
  } else {
    ac = new ( window.AudioContext || window.webkitAudioContext )();
  }
  return function() {
    return ac;
  };
}();
var audioCtx = getContext();        
source = source || audioCtx.createMediaElementSource(video);            
dest = dest || audioCtx.createMediaStreamDestination();         
source.connect(dest);
var audioTrack = dest.stream.getAudioTracks();
streamA.addTrack(audioTrack[0]);

video.play(); //this is inside a request animation so each frame is copied to the canvas
ctx.drawImage(video,0,0,outputcanvas.width,outputcanvas.height);

一切都很好，我可以将录制的视频和音频很好地输出到 mp4。

我遇到的问题是在我录制视频并重置流之后。

视频元素的音频节点已断开。

有没有一种简单的方法可以重新连接它？因为除非我将其静音，否则视频元素中的视频将不再播放。

Answer 1

createMediaElementSource API 确实是一个很大的流程，元素无法检索其图形。

这不会被修复，因为现在有一种更好的方法可以将 HTMLMediaElement 连接到 AudioContext：HTMLMediaElement.captureStream。
您可以从返回的 MediaStream 创建一个 MediaStreamSource，但在您的情况下，您甚至不再需要 AudioContext，只需直接获取音轨：

const vid_url = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm";
const video = document.createElement("video");
video.crossOrigin = "anonymous";
video.src = vid_url;
document.body.append(video);
video.controls = true;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const btn = document.getElementById("btn");
let recording = false;
btn.onclick = async (evt) => {
  await video.play();
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  ctx.filter = "invert(1)";
  const vid_stream = (video.captureStream ? video.captureStream() : video.mozCaptureStream());
  const audio_track = vid_stream.getAudioTracks()[0];
  vid_stream.getVideoTracks()[0].stop(); // no need to keep capturing video
  
  recording = true;
  drawToCanvas();
  const canvas_track = canvas.captureStream().getVideoTracks()[0];
  const merged_stream = new MediaStream([canvas_track, audio_track]);
  const chunks = [];
  const recorder = new MediaRecorder(merged_stream);
  recorder.ondataavailable = ({ data }) => chunks.push(data);
  recorder.onstop = (evt) => {
    exportVid( chunks );
    audio_track.stop();
    canvas_track.stop();
    recording = false;
  };
  recorder.start(1000);  
  btn.textContent = "stop recording";
  btn.onclick = (evt) => recorder.stop();
  // force recording at least 5 seconds
  btn.disabled = true;
  setTimeout(()=>  btn.disabled = false, 5000);
};

function drawToCanvas() {
  ctx.drawImage(video, 0, 0);
  if( recording ) {
    setTimeout(drawToCanvas, 40); // ~25FPS
  }
}
function exportVid( data ) {
  const output = document.createElement("video");
  output.controls = true;
  output.src = URL.createObjectURL(new Blob(data));
  btn.replaceWith(output);
  video.pause();
}

video { max-width: 49vw; max-height: 100vh }

<button id="btn">start recording</button>

然而，这个 API 还不是在所有地方都可用，而且有很多错误。例如，在当前的 Firefox 中，它会停止捕获视频的音频，但希望他们能尽快修复它。