相关疑难解决方法(0)

我正在开展一个项目,我想:

1. 加载视频js并将其显示在画布上.
2. 使用过滤器来改变画布的外观(以及视频).
3. 使用MediaStream captureStream()方法和MediaRecorder对象记录画布表面和原始视频的音频.
4. 在HTML视频元素中播放画布和音频的流.

我已经能够通过调整这个WebRTC演示代码在视频元素中显示画布记录:https://webrtc.github.io/samples/src/content/capture/canvas-record/

也就是说,我无法弄清楚如何在画布旁边录制视频的音频.是否可以从两个不同的源/元素创建包含MediaStreamTrack实例的MediaStream？

根据MediaStream API的规范,理论上应该有一些方法来实现这个目标:https: //w3c.github.io/mediacapture-main/#introduction

"MediaStream API中的两个主要组件是MediaStreamTrack和MediaStream接口.MediaStreamTrack对象表示源自用户代理中的一个媒体源的单一类型的媒体,例如由网络摄像头生成的视频.MediaStream用于分组几个MediaStreamTrack对象分成一个单元,可以在媒体元素中记录或渲染."

大多数Mediastream示例都是webCam-stream的解释.但我需要从本地视频文件(.webm或mp4)创建MediaStream.请告诉我.

我有一个使用canvas.captureStream()的画布流.我有来自webrtc视频通话的另一个视频流.现在我想将画布流与视频流的音轨混合在一起.我怎么能这样做？

我有一个在 p5 中创建的 html 画布，我想向其中添加一个音轨，以便我可以通过 webrtc 连接对其进行流式传输。我目前可以流式传输视频，但不能流式传输音频。

我将音频流添加到画布中，如下所示：

let canvasSource = document.getElementById('canvas-viz');

navigator.mediaDevices.getUserMedia({
      audio: true
    }).then(audioStream => {
      audioStream.getAudioTracks().forEach(
        track => { 
          canvasSource.captureStream().addTrack(track) 
        })
      console.log("canv source: ",canvasSource.captureStream().getAudioTracks()); // prints  []
    })

所以我的主要问题是，当我打电话时，canvasSource.captureStream().getAudioTracks()我得到了[]. 所以看来这addTrack不能正常工作。我尝试调用canvasSource.captureStream().getAudioTracks()开发工具，以防发生一些异步愚蠢的事情，并且还 go []。我还在开发工具中尝试了以下操作：

audioTracks = audioStream.getAudioTracks();
canvasSource.captureStream().addTrack(audioTracks[0]);

但这也不起作用，[]在查看时返回getAudioTracks()。当调用 时audioStream.getAudioTracks()，我得到一个大小为 1 的数组以及我的麦克风输入流。

我正在遵循以下所示的方法： how to add aaudiostreamoncanvasstreaminwebrtc

我正在 Chrome 中开发这个。就我的目的而言，目前它不需要在 Firefox 中交叉兼容。