我是 WebRTC 新手,正在 Chrome 中测试一个简单的视频流应用程序。我有三种不同类型的约束,具有以下解决方案:
qvga:320 x 240,vga:640 x 480,hdVga:1280 x 720。
当我捕获媒体时,它运行良好。但是,当我从分辨率开始qvga并单击任何其他按钮时,它会很好地加载对象,我什至可以观察约束console.log。另外两个分辨率设置,vga即hdVga它不反映窗口中的任何变化。同样,当我重新加载页面并从hdVga按钮开始时,它反映了vga屏幕上的分辨率,而对象属性显示了约束hdVga,我无法找出问题。
HTML:
<head>
<!--<link rel="stylesheet" href="style.css" type="text/css"/>-->
</head>
<body>
<video id="localVideo" controls poster="images/posterImage.png" ></video>
<div id="buttons">
<button id="qvga">320x240</button>
<button id="vga">640x480</button>
<button id="hd">1280x720</button>
</div>
<video id="remoteVideo" poster="images/posterImage.png" ></video>
</script src="videoplayer.js"></script>
<script src="adapter.js"></script>
<script>
var qVga = document.querySelector("button#qvga");
var vga = document.querySelector("button#vga");
var hdVga = document.querySelector("button#hd");
var qVgaConstraints = {video:{
mandatory:{
maxWidth: 320,
maxHeight: 240
} …Run Code Online (Sandbox Code Playgroud) 我目前正在使用node.js 和socket.io 制作html5 游戏。游戏的基本原理是 4 个人绕圈移动,试图互相攻击……
我的问题是我应该使用 Websockets 还是 WebRTC?对于这种沟通来说,什么是最好的?4 名玩家点对点还是通过服务器?
请随意分享您的想法,我对这些东西还很陌生。
我在接收两个对等点之间的 WebRTC 数据通道消息时遇到问题。
\n\n下面是一个 MVP,其中两个对等点位于同一页面,并且信号通道被替换为纯 JavaScript 对象交换。
\n\n我不会选择使用trickle ICE,并且我知道不使用它的缺点,我不认为它会以任何方式干扰我下面的 MVP。
\n\n代码的行为完全符合预期,并且所有日志消息都会通过。唯一缺少的是用于数据通道消息处理的消息,就好像消息从未从任一对等方发送到另一方一样。这是尝试发送Test 的事件处理程序。发送方法调用失败并出现空引用错误,我无法跟踪其根本原因。
\n\n我遵循《Untangling the WebRTC Flow》来获得这个 MVP。您可以在这里实时查看它,因此您不必亲自运行它。
\n\nclass Peer {\n constructor(name) {\n this.name = name;\n }\n offer() {\n const peerConnection = new webkitRTCPeerConnection({ iceServers: [ { url: "stun:stun.l.google.com:19302" } ] });\n peerConnection.onnegotiationneeded = event => console.debug(this.name, "onnegotiationneeded");\n peerConnection.onsignalingstatechange = event => console.debug(this.name, "onsignalingstatechange", peerConnection.signalingState);\n peerConnection.onicegatheringstatechange = event => console.debug(this.name, "onicegatheringstatechange", peerConnection.iceGatheringState);\n peerConnection.oniceconnectionstatechange = event => console.debug(this.name, "oniceconnectionstatechange", peerConnection.iceConnectionState);\n …Run Code Online (Sandbox Code Playgroud) 我想通过 WebRTC 数据通道发送单向流数据,并且正在寻找最佳配置选项(高带宽、低延迟/抖动)和其他人在此类应用程序中使用预期比特率的经验。
我的测试程序发送 2k 块,bufferedAmountLowThreshold 事件回调为 2k,并再次调用 send,直到 bufferedAmount 超过 16k。在 Chrome 中使用它,我在 LAN 上实现了 ~135Mbit/s,从/到远程连接实现了 ~20Mbit/s,两端都有 100Mbit/s WAN 连接。
这里的限制因素是什么?
如何查看数据是否真正直接点对点传输,或者是否使用了 TURN 服务器?
我的最终应用程序将使用 Android 上的 google-webrtc 库 - 我只使用 JS 进行原型设计。我可以在库中设置选项以加快比特率,而在官方 JS API 中无法做到吗?
在尝试将视频流式传输到对等连接的 WebRTC 示例时:
https://github.com/webrtc/samples/tree/gh-pages/src/content/capture/video-pc
在 Firefox 中,我只看到右侧视频中呈现的黑色视频 :-(
在 Chrome 中,我遇到了一个跨域错误:Uncaught DOMException: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data at HTMLVideoElement.maybeCreateStream
我没有进行任何代码更改,我只是克隆了 repo 并打开了 index.html。我还尝试在没有看到视频的情况下提供页面。
如何使用 Chrome 或 Firefox 在 Windows 上本地运行此示例?
以下代码在从 localhost 提供服务时工作正常,但在部署到 Heroku 时失败说明:TypeError: navigator.mediaDevices is undefined
navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(function(stream){
video = $('#myVid')[0];
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
Run Code Online (Sandbox Code Playgroud)
包含来自 WebRtC 的 adapter.js 无济于事。你有过类似的经历并解决了吗?
我尝试与一些人建立视频组会议流,我使用 WebRTC(来自:https : //github.com/anoek/webrtc-group-chat-example),作为服务器,我使用安装了 node js 的 VPS Centos 7当我尝试启动我的 webrtc 服务器时,在浏览器中,我在使用端口访问 ip 时看到此错误
这个错误:
(index):260 Uncaught TypeError: navigator.getUserMedia is not a function
at setup_local_media ((index):260)
at Socket.<anonymous> ((index):50)
at Socket.Emitter.emit (socket.io-1.4.5.js:3)
at Socket.emit (socket.io-1.4.5.js:3)
at Socket.onconnect (socket.io-1.4.5.js:3)
at Socket.onpacket (socket.io-1.4.5.js:3)
at Manager.<anonymous> (socket.io-1.4.5.js:3)
at Manager.Emitter.emit (socket.io-1.4.5.js:3)
at Manager.ondecoded (socket.io-1.4.5.js:2)
at Decoder.<anonymous> (socket.io-1.4.5.js:3)
Run Code Online (Sandbox Code Playgroud)
JS代码:
/*************/
/*** SETUP ***/
/*************/
var express = require('express');
var bodyParser = require('body-parser')
var cors = require('cors')
var main = express()
main.use(cors())
var server …Run Code Online (Sandbox Code Playgroud) 我navigator.mediaDevices.getUserMedia()在 Linux 上的 Chrome 80 上使用。为了获得最高质量,我运行了一系列约束,检查错误,或检查实际上不是所需大小的流。至少对于我的一台相机,它经常只能获得 640x480 的尺寸,而不是它能够达到的 1280x720。如果我调用getUserMedia()不同的设备,然后返回并为原始设备调用它,它通常(但并非总是)会获得 1280x720 版本。我不确定如何强制 Chrome 使用正确的尺寸。
这些是我让它使用的约束(按顺序):
// OverconstrainedError (deviceId)
{"audio":false,"video":{"deviceId":{"exact":"cd059d931e1c4554faee7a5722ab8db810cec27316cc085512fcf5815dac3a98"},"frameRate":30,"width":{"min":1920,"ideal":1920,"max":1920},"height":{"min":1080,"ideal":1080,"max":1080}}}
// succeeds, but returns 640x480
{"audio":false,"video":{"deviceId":{"exact":"cd059d931e1c4554faee7a5722ab8db810cec27316cc085512fcf5815dac3a98"},"frameRate":30,"width":{"ideal":1920},"height":{"ideal":1080}}}
// OverconstrainedError (deviceId)
{"audio":false,"video":{"deviceId":{"exact":"cd059d931e1c4554faee7a5722ab8db810cec27316cc085512fcf5815dac3a98"},"frameRate":30,"width":{"min":1920},"height":{"min":1080}}}
// OverconstrainedError (deviceId)
{"audio":false,"video":{"deviceId":{"exact":"cd059d931e1c4554faee7a5722ab8db810cec27316cc085512fcf5815dac3a98"},"frameRate":30,"width":{"exact":1920},"height":{"exact":1080}}}
// succeeds, but returns 640x480
{"audio":false,"video":{"deviceId":{"exact":"cd059d931e1c4554faee7a5722ab8db810cec27316cc085512fcf5815dac3a98"},"frameRate":30,"width":1920,"height":1080}}
Run Code Online (Sandbox Code Playgroud)
然后是 1600x1200、1280x720、800x600 和 640x480 的相同模式。最后一个最终成功,因为它匹配从getUserMedia().
这在 Firefox 上运行良好。它适用于某些设备。如果我在第一个设备加载了低尺寸后选择了不同的设备,它有时会起作用。
事实上,有问题的OverconstrainedError约束deviceId有点令人担忧,但根据我读过的内容,它只返回第一个约束,不一定是失败的约束。无论如何,当其他变体没有失败时,很难看出设备 ID 如何导致它失败。
我需要做什么才能完成这项工作?
我正在开发一个与 Asterisk SIP 服务器通信的基于 JavaScript 的 Web SIP 客户端。
SIP 客户端使用的是 JSSIP 3.4.2,我正在 Chrome 80 版上进行测试。
SIP 客户端和 SIP 服务器都在防火墙之后。我正在使用 STUN 服务器stun.l.google.com:19302。
呼叫建立良好,但在调用“呼叫”方法和建立呼叫(启动 RTP 会话)之间有40 秒的延迟。
SIP UA注册代码如下:
// SIP UA registration
var currentUserSipAccount = {
uri: '211',
pwd: 'secret'
};
var sipDomain = 'sip.my-domain.com';
var sipServerUrl = 'wss://' + sipDomain + ':8089/ws';
var socket = new JsSIP.WebSocketInterface(sipServerUrl);
var connectionParams = {};
connectionParams.sockets = [socket];
connectionParams.register = true;
connectionParams.uri = 'sip:' + currentUserSipAccount.uri + '@' + …Run Code Online (Sandbox Code Playgroud) 我正在做一个项目,我需要 使用 HTML5、rtmp、webrtc、nodejs在youtube、 twitch、Facebook或我的网站上的其他平台上广播实时视频......
所以我想从我的网站开始播放视频,而不是去 youtube 开始直播视频
但我是 webrtc 和直播的新手,我不知道该怎么做或如何开始,所以如果有人对如何做到这一点有任何想法或建议,请与我联系或在此处发表评论
这就是我所做的
io.on('connection', (socket) =>{
socket.on('stream', stream =>{
console.log(stream)
socket.broadcast.emit('stream', stream);
});
})
Run Code Online (Sandbox Code Playgroud)
<div id="videos">
<video id="video" autoplay>
</video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="js/video.js"></script>
Run Code Online (Sandbox Code Playgroud)
Javascript (video.js)
var socket = io();
navigator.mediaDevices.getUserMedia({
video : true,
audio: true
})
.then(stream =>{
document.getElementById('video').srcObject = stream
socket.emit("stream", stream);
})
socket.on('stream', stream=>{
video = document.createElement("video")
video.srcObject = stream
video.setAttribute('autoplay')
document.getElementById("videos").appendChild(video)
})
Run Code Online (Sandbox Code Playgroud) webrtc ×10
javascript ×3
getusermedia ×2
node.js ×2
websocket ×2
broadcast ×1
constraints ×1
firefox ×1
html ×1
jssip ×1
p2p ×1
peerjs ×1
rtmp ×1
sample ×1
simplewebrtc ×1
sip ×1
voip ×1
windows ×1