- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我在 Chrome 中使用 WebRTC 时,我注意到这些流的持久性仍然有些不稳定。我需要在显示它的元素显示之前创建一个视频流(从技术上讲,我最初只需要音轨,但没有 replaceTrack() 的重新协商本身就是一个问题,所以我现在同时启用两者).
元素随后由 JavaScript 动态呈现,需要开始接收 WebRTC 视频。问题是,在 WebRTC 创建时,我想要显示的视频元素尚不存在。我没有看到告诉 WebRTC 在流开始后更改正在呈现的视频元素的方法,这可能吗?我主要玩的是 SimpleWebRTC,但我对直接使用 WebRTC 持开放态度——通过查看文档,我也找不到使用原始 WebRTC 的方法。我还尝试将原始视频元素移动到新元素中,但这会导致视频流中断/停止:
newElement.appendChild(originalWebRTCVideoTag);
除了终止整个流并重新启动,我还有什么选择?
更新:
对于这两种方法,videoTag 是一个通用的 DOM 视频标签,webrtc 是 WebRTC
对象的一个实例,它具有通过 SimpleWebRTC(simpleWebRtc.webrtc,SimpleWebRTC 环绕)建立的工作连接。我现在正在为那些想要查看实际代码的人整理一个 JSFiddle,但这应该足以重现它。
// this doesn't seem to be working in stackoverflow, probably because it rejects video camera capture
var simplertc = new SimpleWebRTC({
localVideoEl: 'webrtc-local',
remoteVideosEl: 'webrtc-remote',
media: {"audio": true, "video": {
"optional": [{"minWidth": "640"}, {"minHeight": "480"}], "mandatory": {}
}},
autoRequestMedia: true
});
var webrtc = simplertc.webrtc;
// this portion is overly simplified, in this case there is no point
// in creating this dynamically, in the app I'm working on this element
// is generated much later
$('#dynamic').appendTo('<video id="dynamic-video"></video>');
var videoTag = $('#dynamic-video')[0];
simplertc.on('readyToCall', function() {
simplertc.joinRoom('my-room-875385864'); // random name
// by this time the local video should be ready, we don't need remote ones for our test
// test case 1 (replace with logic from test case 2 if needed)
videoTag.srcObject = webrtc.localStreams[0];
// end test case
});
video {
border: 1px solid red;
width: 200px;
}
/* overlap with original video is intentional to show hardware acceleration effect */
#dynamic {
position: absolute;
border: 1px solid black;
width: 200px;
height: 200px;
left: 100px;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://simplewebrtc.com/latest-v2.js"></script>
<div id='webrtc'>
<video id='webrtc-local'></video>
<div id='webrtc-remote'></div>
</div>
<div id='dynamic'>
</div>
方法 1,在尝试方法 2 时偶然发现了这个
尝试了以下方法,它有效但比我想要的慢得多,大约 5 FPS:
// note that I can just as easily use remote streams here
videoTag.srcObject = webrtc.localStreams[0]
具有讽刺意味的是,虽然我更多地搞砸了这种方法,但我不小心重叠了 webRTC 元素和生成的视频区域 (videoTag),即使 webRTC 在后台,videoTag 重叠的那个 Angular 落确实实时运行,与继续以 3-5 FPS 运行的元素的其余部分不同。这让我相信这里的问题是硬件加速。我能以某种方式为 videoTag 启用它吗?
方法二
var media = new MediaSource();
videoTag.src = URL.createObjectURL(media);
// guessing mimetype from a few WebRTC tutorials I stumbled upon
var srcBuf = media.addSourceBuffer(‘video/webm;codecs=”vp8, vorbis”’);
// need to convert webrtc.localStreams[0] or its video track to a buffer somehow???
srcBuf.appendBuffer(/* buffer */);
进一步研究
这可能是 Chrome 中的一个错误,一个似乎有效的黑客式解决方法是确保新生成的视频元素与原始视频元素完全重叠(即使原始视频元素设置为在后面的背景上呈现所有其他元素(以及在非透明背景后面)。这似乎启动了硬件加速。
最佳答案
您可以使用 MediaSource
、sourceopen
事件、.addSourceBuffer()
、.appendBuffer()
。参见 HTML5 audio streaming: precisely measure latency? , Unable to stream video over a websocket to Firefox
关于javascript - WebRTC 在不停止流的情况下更改/移动视频元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42180845/
是WebRTC Web 开发人员可以免费在网页上设置视频通话吗?为什么 Twilio 的视频通话定价为每分钟 25 美分,在网络托管服务器上管理视频通话对小家伙来说会不会太贵了? 任何深入 WebRT
webRTC 是根据 https://apprtc.appspot.com/ 实现的 PeerConnection webRTC 如何实现远程音视频流的同步? 最佳答案 使用 RTCP SR/RR 报
我正在尝试使用 webRTC,似乎对每条消息中可以发送的字节数有任意限制。 This guy我使用的示例选择了 100(加上一些)字节的限制。在我的测试中,它似乎接近 200 字节。但是从阅读 TCP
我目前正在测试 WebRTC 的功能,但我有一些脑逻辑问题。 WebRTC 究竟是什么? 我只读了“STUN”、“P2P”和其他...但是在技术方面什么是正确的 WebRTC(见下一个) 我需要什么
我目前正在使用 opentok 构建实时视频聊天医疗保健应用程序api,其技术主要建立在 WebRTC 上,并想知道如何处理整体安全方面。 最佳答案 简而言之,是的。所有 WebRTC 媒体流都经过加
WebRTC Reference App --> var errorMessages = []; var channelToken = 'AHRlWroGHj6YqW
我对浏览器中的点对点连接感兴趣。由于这对于 WebRTC 来说似乎是可能的,我想知道它是如何精确工作的。 我已经阅读了一些解释并看到了相关图表,现在我很清楚,连接建立是通过服务器进行的。服务器似乎在愿
我是 WebRTC 的初学者,我想知道是否需要导入任何内容才能使用 JavaScript API。 最佳答案 不,您不需要导入任何库。 webRTC 包含在 Chrome 和 Firefox 中(以及
我正在使用 WebRTC 来开发我的应用程序之一。 WebRTC 是否原生支持视频数据包的自适应比特率流,目前尚不清楚? VP8/VP9 是否支持自适应比特率编码? bitrate_controlle
是否可以通过 webRTC 捕获桌面屏幕共享。我们知道它只是捕获浏览器选项卡上的屏幕,但是否可以捕获整个桌面屏幕,例如浏览计算机上的文件或打开和查看文件,例如pdf等.. 最佳答案 目前,RTCWeb
我可以有两个单独的服务器用于托管和发送信号吗?还是仅在托管服务器中配置信令服务器更好? 最佳答案 托管 webrtc 信令服务器没有具体限制。如果需要,您可以将信令服务器与 Web 应用程序服务器分开
我想知道 WebRTC api 是否会自动更改带宽以增加体验。据我所知,WebRTC 具有更改和限制最大值的功能。带宽如我们所愿。我寻求答案的问题是我们应该手动执行此操作还是 WebRTC 无论如何都
如果在本地网络中的两个对等方之间建立了 WebRTC 连接,我们可以在失去与互联网的连接后维持它吗?这似乎是可能的,因为它是点对点的。 最佳答案 是的,有可能。对等方使用同一网络中的专用 IP 地址直
我正在尝试创建一个应用程序,该应用程序要求用户使用 webRTC 将其本地视频流发送到多个对等方。据我所知,我负责管理多个 PeerConnection 对象,因为 PeerConnection 一次
我想创建自己的视频聊天应用程序。我使用 WebRTC 框架。我阅读了一些教程,每个主题都假定存在信令 channel 。如何实现自己的信令 channel ? 最佳答案 由于目前没有为 WebRTC
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 想改进这个问题?将问题更新为 on-topic对于堆栈溢出。 6年前关闭。 Improve this qu
假设我有 2 个同行与 webRTC 交换视频。现在我需要将两个流都保存为中央服务器中的视频文件。是否可以实时进行? (存储/上传来自同行的视频不是一种选择)。 我想建立一个 3 节点 webRTC
WebRTC 信号让我发疯。我的用例非常简单:信息亭和控制室 webapp 之间的双向音频对讲。两台计算机都在同一个网络上。两者都没有互联网访问权限,所有机器都有已知的静态 IP。 我阅读的所有内容都
我知道我可以将宽度和高度设置为本地视频的约束。但是,我不确定如何通过 RTCPeerConnection 获取远程视频的宽度和高度。我用谷歌搜索了很多,但似乎没有得到任何有用的信息。我认为这应该是一个
我是 WebRTC 的新手,并试图弄清楚如何在浏览器之外创建一个程序,该程序接收 WebRTC 音频流并将其输出到扬声器上。 是否有适用于 Java 或 C# 的 WebRTC 库? 该接收器将在 l
我是一名优秀的程序员,十分优秀!