问题标签 [mediastream]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
714 浏览

video - WebRTC - 无法显示远程媒体流

这把我逼疯了。我一直在开发一个 webRTC 通信应用程序。基本用例让我失望了。

所以我可以很好地创建 RTCPeerConnection,向它添加一个新抓取的 mediaStream,对等方交换 offer/answer/iceCandidates,连接成功,当调用 .onaddstream 回调时,我可以看到 mediaStream 对象正确到达连接的另一端.

一切都很好,但现在我无法在视频元素中绘制媒体流。我尝试替换现有视频元素的 src 并从头开始创建新的视频元素。似乎没有任何效果。

以防万一我还检查了收到的 mediaStream 上的曲目。一切看起来都很好。一个用于音频,一个用于视频,并且都启用 = true。

有人碰到这个吗?

更新

提供:

回答:

在 RTCPeerConnenction 上正确调用了 addIceCandidates。

0 投票
0 回答
108 浏览

javascript - Chromium 58 canvas.captureStream

我正在通过 websockets 流式传输 MediaRecorder 数据,一切正常,但 Chromium 58 在客户端失败,较低版本按预期工作。视频标签保持空白,以下错误消息被垃圾邮件发送到控制台:

内部媒体给我:

客户端 sourceBuffer 使用以下设置:

我需要使用 Chromium 58,因为该错误已修复,我们在其上调用 captureStream 的画布不必再附加到主体上。

0 投票
1 回答
20699 浏览

ffmpeg - webRTC 使用 ffmpeg.js 将 webm 转换为 mp4

我正在尝试使用 ffmpeg.js 将 webM 文件转换为 mp4。我正在从画布(带有一些信息的覆盖层)录制视频并从视频中录制音频数据。

此代码按预期工作并返回 webm 视频

现在我想要一个 mp4 文件并检查来自 muaz-khan的ffmpeg.js 。这些示例仅展示了当您有 2 个单流(音频和视频)时如何转换为 mp4。但是我有一个带有附加音轨的流。我可以将这样的流转换为 mp4 吗?怎么可能呢?

0 投票
1 回答
2361 浏览

webrtc - StreamTrack 的 readyState 正在更改为已结束,就在播放流之前 (MediaStream - MediaStreamTrack - WebRTC)

jsfiddle ( https://jsfiddle.net/kalyansai99/mm1b74uy/22/ ) 包含用户可以在手机的前后摄像头之间切换的代码。

在少数手机(Moto g5 plus、Moto E3 等 - Chrome 浏览器)和少数手机(Mi Redimi Note 4 - Chrome 浏览器)中,当我切换到后置摄像头时,最初的流正在加载轨道“readyState”为“live”。但是当我要在视频播放器中播放流时,“readyState”正在更改为“结束”,并且视频标签上显示黑屏。

不知道发生了什么。有什么线索吗?

JSF中间代码

0 投票
0 回答
353 浏览

javascript - 将 MediaSource 用于带有 MediaRecord 的视频

我正在尝试用 javascript 从我的网络摄像头播放视频。我正在使用MediaStream从我的网络摄像头获取视频,MediaRecorder以块的形式录制此类视频(将传输到服务器),并组装这些块并在下面调用源MediaSource的视频容器中无缝播放它们。watchVideo

当我只捕获视频时,这一切都完美无缺,即,constraints = { video: true } ;但如果我添加音频,watchVideo则不会显示任何内容,并且控制台会显示以下错误:

这是代码的相关部分:

0 投票
0 回答
766 浏览

safari - Safari 11 mediaElement['srcObject'] = mediaStream 抛出类型错误

我正在尝试使用此库 ( RTCMulticonnectionType Error ) 实现 WebRTC,并且在尝试在 Safari Tech Preview 11 中的视频 mediaElement 上设置“srcObject”时遇到了一个问题。

相关代码:

当我打印mediaElement时,我得到:<video></video>

当我打印stream时,我得到一个MediaStream对象。

错误

Type Error被困在这个then/catch

0 投票
2 回答
4436 浏览

javascript - 如何将getusermedia记录的流实时发送到服务器nodejs

我能够使用 socket.io 将流 blob 发送到节点 js 服务器。但是,在更新视频播放器中的 blob 数据时它会闪烁。我希望它运行顺畅。如何在不闪烁视频播放器的情况下发送数据。这是我的服务器代码

这是我的客户端代码,

我已将 MediaStreamRecorder api 中的时间片值更改为默认值 500。因此,在 500 毫秒后向服务器发送数据。但在网页中闪烁。我必须这样做才能使其成为实时。任何帮助将不胜感激。

0 投票
2 回答
2679 浏览

javascript - 浏览器中音频 MediaStream 的当前带宽或质量是多少?(WebRTC)

我目前正在构建一个 WebRTC 应用程序,并希望收集一些统计数据以评估我的解决方案。我感兴趣的一个指标是接收到的音频(和视频)流的当前带宽。我能够在chrome://webrtc-internals/(OPUS) 找到当前使用的编解码器,但我无法找到有关流的当前质量/带宽的数字(例如 128kbit/s)。

我已经在 RTCPeerConnection 对象中搜索了这些数字,但没有找到。XXX.RTCconnection.getRemoteStreams()[0].getAudioTracks()[0].getConstraints()只返回

仅包含有关视频流的信息(有趣的是我请求了音频流)并且没有带宽详细信息。上面示例中的数组没有其他流。你知道我需要在哪里寻找 MediaStream 的当前质量/带宽吗?

0 投票
1 回答
1325 浏览

mediarecorder - 使用 MediaRecorder 录制流中可用的多音轨

我正在为 chrome 商店构建一个屏幕录像机插件。我正在将麦克风的音轨添加到包含(屏幕的视频轨道 + 系统音轨)的媒体流中。因此最终流包含 2 个音轨,一个是麦克风,另一个是系统音频。

当我将此流传递给 MediaRecorder(stream)时,在最终视频中,我只能收听stream.getAudioTracks()中索引为 0 的单个音频,即 MediaRecorder 仅录制单个音轨。

那么如何使用 MediaRecorder 录制包含多音轨的流呢?

0 投票
2 回答
4585 浏览

javascript - 如何在emberjs的chrome浏览器中获取停止共享按钮的事件处理程序

我正在使用 twilio API 在 emberjs 应用程序中实现屏幕共享,我成功地能够共享屏幕并切换停止它。这是我的代码->

我面临的问题是应用程序底部的停止共享按钮,如下面的屏幕截图所示 在此处输入图像描述

我需要一种方法来监听事件处理程序并在单击停止共享屏幕按钮后执行一些代码,我知道 MediaStreamTrack 文档中提到了一个 onended 事件处理程序,但我不知道如何使用它,任何帮助将不胜感激。

https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack