从 canvas 和视频元素创建 MediaStream
Creating MediaStream from canvas and video element
我正在创建一个 MediaStream 对象并使用 captureStream() 函数从 canvas 添加视频轨道。这很好用。
不过,我正在尝试将音频添加为与视频元素分开的单独轨道。我似乎找不到从 html 视频元素获取 AudioTrack 对象的方法。
目前 Chrome 不支持 HTMLMediaElement.audioTracks。根据 mozilla 开发者网站,我应该能够使用 HTMLMediaElement.captureStream() 到 return 一个 MediaStream 对象,我应该能够从中检索单独的轨道,但我只是得到 'captureStream is not a function' 错误。
也许我遗漏了一些非常明显的东西,但我将不胜感激任何对此的帮助。
下面是我当前的代码:
var stream = new MediaStream();
//Works fine for adding video source
var videotracks = myCanvas.captureStream().getTracks();
var videostream = videotracks[0];
stream.addTrack(videostream);
//Currently not supported in Chrome
var audiotracks = myVid.audioTracks;
var audiostream = audiotracks[0];
stream.addTrack(audiostream);
以跨浏览器的方式从视频元素获取音频流:
AudioContext API createMediaStreamDestination + createMediaElementSource.
// if all you need is the audio, then you should even probably load your video in an Audio element
var vid = document.createElement('video');
vid.onloadedmetadata = generateAudioStream;
vid.crossOrigin = 'anonymous';
vid.src = 'https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4';
function generateAudioStream() {
var audioCtx = new AudioContext();
// create a stream from our AudioContext
var dest = audioCtx.createMediaStreamDestination();
// connect our video element's output to the stream
var sourceNode = audioCtx.createMediaElementSource(this);
sourceNode.connect(dest)
// start the video
this.play();
// your audio stream
doSomethingWith(dest.stream)
}
function doSomethingWith(audioStream) {
// the audio element that will be shown in the doc
var output = new Audio();
output.srcObject = audioStream;
output.controls = true;
output.play();
document.body.appendChild(output);
}
将音频添加到 canvas 流:
我正在创建一个 MediaStream 对象并使用 captureStream() 函数从 canvas 添加视频轨道。这很好用。
不过,我正在尝试将音频添加为与视频元素分开的单独轨道。我似乎找不到从 html 视频元素获取 AudioTrack 对象的方法。
目前 Chrome 不支持 HTMLMediaElement.audioTracks。根据 mozilla 开发者网站,我应该能够使用 HTMLMediaElement.captureStream() 到 return 一个 MediaStream 对象,我应该能够从中检索单独的轨道,但我只是得到 'captureStream is not a function' 错误。
也许我遗漏了一些非常明显的东西,但我将不胜感激任何对此的帮助。
下面是我当前的代码:
var stream = new MediaStream();
//Works fine for adding video source
var videotracks = myCanvas.captureStream().getTracks();
var videostream = videotracks[0];
stream.addTrack(videostream);
//Currently not supported in Chrome
var audiotracks = myVid.audioTracks;
var audiostream = audiotracks[0];
stream.addTrack(audiostream);
以跨浏览器的方式从视频元素获取音频流:
AudioContext API createMediaStreamDestination + createMediaElementSource.
// if all you need is the audio, then you should even probably load your video in an Audio element
var vid = document.createElement('video');
vid.onloadedmetadata = generateAudioStream;
vid.crossOrigin = 'anonymous';
vid.src = 'https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4';
function generateAudioStream() {
var audioCtx = new AudioContext();
// create a stream from our AudioContext
var dest = audioCtx.createMediaStreamDestination();
// connect our video element's output to the stream
var sourceNode = audioCtx.createMediaElementSource(this);
sourceNode.connect(dest)
// start the video
this.play();
// your audio stream
doSomethingWith(dest.stream)
}
function doSomethingWith(audioStream) {
// the audio element that will be shown in the doc
var output = new Audio();
output.srcObject = audioStream;
output.controls = true;
output.play();
document.body.appendChild(output);
}
将音频添加到 canvas 流: