- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在创建一个 MediaStream 对象,并使用 captureStream() 函数从 Canvas 向其添加视频轨道。这很好用。
但是我正在尝试将音频添加为与视频元素分开的轨道。我似乎找不到从 html 视频元素获取 AudioTrack 对象的方法。
目前 HTMLMediaElement.audioTracks 在 Chrome 中不受支持。根据 mozilla 开发人员网站,我应该能够使用 HTMLMediaElement.captureStream() 返回一个 MediaStream 对象,我应该能够从中检索单独的轨道,但我只是收到“captureStream 不是函数”错误。
也许我遗漏了一些非常明显的东西,但我将非常感谢这方面的任何帮助。
下面是我当前的代码:
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 流:
关于javascript - 从 Canvas 和视频元素创建 MediaStream,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41261716/
我正在尝试记录远程用户的媒体流。从远程用户传递的Media Stream对象似乎与从getUserMedia生成的本地Media Stream对象非常相似,但是将其传递到Media Stream可视化
情况 我需要做以下事情: 从 获取视频在里面玩 将来自 Canvas 的流记录为 Blob 就是这样。第一部分没问题。 对于第二部分,我设法记录了一个 Blob。问题是 Blob 是空的。 View
大多数 Mediastream 示例由 webCam-stream 解释。但我需要从本地视频文件(.webm 或 mp4)创建 MediaStream。请告诉我。 最佳答案 2017 年 5 月 4
我想要一些关于如何在 Chrome/Canary 中最好地获取音频 MediaStreamTrack javascript 对象的麦克风事件级别的建议。 MediaStreamTrack 对象是 ge
好的,我将尝试尽可能清楚地说明我的问题,但我很困惑,所以如果我没有传达信息,请告诉我。 我正在尝试使用 getUserMedia 来使用网络摄像头,然后使用这个 http://www.w3.org/T
我需要使用来自不同 MediaStreams 的音频和视频创建一个 MediaStream。在 Firefox 中,我可以从轨道数组中实例化一个新的 MediaStream: var output
在 Electron 中,我可以获得 MediaStream 对象,但如何将其转换为可读流。 MediaStream 没有管道方法,如何读取? const { desktopCapturer } =
我目前正在构建一个 WebRTC 应用程序,并希望收集一些统计数据来评价我的解决方案。我感兴趣的一个指标是接收到的音频(和视频)流的当前带宽。我能够在 chrome://webrtc-internal
我目前正在构建一个 WebRTC 应用程序,并希望收集一些统计数据来评价我的解决方案。我感兴趣的一个指标是接收到的音频(和视频)流的当前带宽。我能够在 chrome://webrtc-internal
在我的网络应用程序中,我获得了 MediaStream通过getUserMedia或 getDisplayMedia .在某些情况下,该流的视频轨道可以改变其大小。例如,如果 getDisplayMe
我正在尝试从网站用户的手机捕获音频,并将其传输到远程 RTCPeerConnection。 假设我有一个获取本地MediaStream的函数: function getLocalAudioStream
我正在创建一个 MediaStream 对象,并使用 captureStream() 函数从 Canvas 向其添加视频轨道。这很好用。 但是我正在尝试将音频添加为与视频元素分开的轨道。我似乎找不到从
我创建了一个非常基本的 WebRTC 视频聊天界面(仅限 Chrome 测试)。我通过 websockets 向 SDP 发送信号,并使用 Twilio 服务进行 STUN/TURN 配置。 “off
我目前有一个函数可以从 navigator.getUserMedia() 接收 MediaStream,效果很好。我想提供上传音频文件并通过相同功能模拟它的选项。我想知道是否可以上传一个音频文件并创建
我有多个 NodeJS Node 捕获一系列图像。有时他们需要通过 WebRTC 发送数据对一些浏览器同行。 我目前正在通过对图像进行 Base64 编码来处理问题,通过 DataChannel 发送
我对 WebRTC 和 Node.js 完全陌生,我试图使用教程 http://www.tutorialspoint.com/webrtc/webrtc_media_stream_apis.htm 构
我有一个远程 MediaStream 对象,通过远程WebRTC Peer Connection 获得。 我想检查远程何时 MediaStream 变为非事件状态(独立于原因)。 我已经读到,为此我应
简而言之:我正在尝试更改 MediaStream 对象的 VideoTrack。 (文档:https://developer.mozilla.org/en-US/docs/WebRTC/MediaSt
我正在从事一个项目,我想: 加载视频 js 并将其显示在 Canvas 上。 使用滤镜改变 Canvas (以及视频)的外观。 使用 MediaStream captureStream() 方法和 M
我想从音频/视频流更改为“屏幕共享”流: peerConnection.removeStream(streamA) // __o_j_sep... in Screenshots below peerC
我是一名优秀的程序员,十分优秀!