首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >重新连接断开的视频元素音频节点

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

Stack Overflow用户
提问于 2021-02-15 04:19:53
回答 1查看 87关注 0票数 0

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

代码语言:javascript
代码运行次数:0
运行
复制
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);

然后使用web audio api将视频音频连接到流。

代码语言:javascript
代码运行次数:0
运行
复制
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。

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

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

有没有简单的方法可以把它重新连接回来?因为视频元素中的视频将不再播放,除非我将其静音。

EN

回答 1

Stack Overflow用户

发布于 2021-02-15 15:23:48

对于createMediaElementSource应用编程接口来说,这确实是一个很大的流程,元素无法找回它的图形。

这是无法修复的,因为现在有一种更好的方法将HTMLMediaElement连接到AudioContext:HTMLMediaElement.captureStream

您可以从返回的MediaStream创建一个MediaStreamSource,但在您的示例中,您甚至不再需要AudioContext,只需直接获取音轨:

代码语言:javascript
代码运行次数:0
运行
复制
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();
}
代码语言:javascript
代码运行次数:0
运行
复制
video { max-width: 49vw; max-height: 100vh }
代码语言:javascript
代码运行次数:0
运行
复制
<button id="btn">start recording</button>

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66199745

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档