标签: webrtc

getUserMedia() 的分辨率限制无法正常工作 (WebRTC)

我是 WebRTC 新手,正在 Chrome 中测试一个简单的视频流应用程序。我有三种不同类型的约束,具有以下解决方案:

qvga:320 x 240,vga:640 x 480,hdVga:1280 x 720。

当我捕获媒体时,它运行良好。但是,当我从分辨率开始qvga并单击任何其他按钮时,它会很好地加载对象,我什至可以观察约束console.log。另外两个分辨率设置,vgahdVga它不反映窗口中的任何变化。同样,当我重新加载页面并从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)

javascript google-chrome constraints webrtc getusermedia

1
推荐指数
1
解决办法
3702
查看次数

我应该使用 websockets 还是 webRTC 进行 4 人游戏

我目前正在使用node.js 和socket.io 制作html5 游戏。游戏的基本原理是 4 个人绕圈移动,试图互相攻击……

我的问题是我应该使用 Websockets 还是 WebRTC?对于这种沟通来说,什么是最好的?4 名玩家点对点还是通过服务器?

请随意分享您的想法,我对这些东西还很陌生。

html javascript websocket node.js webrtc

1
推荐指数
2
解决办法
3172
查看次数

WebRTC 数据通道连接已建立,但未收到消息

我在接收两个对等点之间的 WebRTC 数据通道消息时遇到问题。

\n\n

下面是一个 MVP,其中两个对等点位于同一页面,并且信号通道被替换为纯 JavaScript 对象交换。

\n\n

我不会选择使用trickle ICE,并且我知道不使用它的缺点,我不认为它会以任何方式干扰我下面的 MVP。

\n\n

代码的行为完全符合预期,并且所有日志消息都会通过。唯一缺少的是用于数据通道消息处理的消息,就好像消息从未从任一对等方发送到另一方一样。这是尝试发送Test 的事件处理程序。发送方法调用失败并出现空引用错误,我无法跟踪其根本原因。

\n\n

我遵循《Untangling the WebRTC Flow》来获得这个 MVP。您可以在这里实时查看它,因此您不必亲自运行它。

\n\n
class 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 rtcdatachannel

1
推荐指数
1
解决办法
2539
查看次数

用于高带宽应用的 WebRTC 数据通道

我想通过 WebRTC 数据通道发送单向流数据,并且正在寻找最佳配置选项(高带宽、低延迟/抖动)和其他人在此类应用程序中使用预期比特率的经验。

我的测试程序发送 2k 块,bufferedAmountLowThreshold 事件回调为 2k,并再次调用 send,直到 bufferedAmount 超过 16k。在 Chrome 中使用它,我在 LAN 上实现了 ~135Mbit/s,从/到远程连接实现了 ~20Mbit/s,两端都有 100Mbit/s WAN 连接。

这里的限制因素是什么?

如何查看数据是否真正直接点对点传输,或者是否使用了 TURN 服务器?

我的最终应用程序将使用 Android 上的 google-webrtc 库 - 我只使用 JS 进行原型设计。我可以在库中设置选项以加快比特率,而在官方 JS API 中无法做到吗?

webrtc rtcdatachannel webrtc-android

1
推荐指数
1
解决办法
2509
查看次数

WebRTC 示例在本地运行时在 Chrome 和 Firefox 上失败

在尝试将视频流式传输到对等连接的 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 上本地运行此示例?

windows p2p sample webrtc

1
推荐指数
1
解决办法
544
查看次数

Heroku 托管页面抛出错误 - navigator.mediaDevices 未定义

以下代码在从 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 无济于事。你有过类似的经历并解决了吗?

firefox webrtc peerjs

1
推荐指数
1
解决办法
1170
查看次数

navigator.getUserMedia 不是使用 WebRTC 的函数

我尝试与一些人建立视频组会议流,我使用 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)

websocket node.js webrtc simplewebrtc

1
推荐指数
1
解决办法
2775
查看次数

Chrome 上的 getUserMedia 经常无法返回最佳分辨率

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 如何导致它失败。

我需要做什么才能完成这项工作?

google-chrome webrtc getusermedia

1
推荐指数
1
解决办法
3099
查看次数

使用 JSSIP / WebRTC 发起 SIP 呼叫延迟 40 秒

我正在开发一个与 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)

javascript voip sip webrtc jssip

1
推荐指数
1
解决办法
1928
查看次数

使用 HTML5 和 WebRTC 将网络摄像头广播到(YouTube、Twitch、Facebook)

我正在做一个项目,我需要 使用 HTML5、rtmp、webrtc、nodejs在youtubetwitchFacebook或我的网站上的其他平台上广播实时视频......

所以我想从我的网站开始播放视频,而不是去 youtube 开始直播视频

但我是 webrtc 和直播的新手,我不知道该怎么做或如何开始,所以如果有人对如何做到这一点有任何想法或建议,请与我联系或在此处发表评论

这就是我所做的

服务器端(NodeJs)


io.on('connection', (socket) =>{

    socket.on('stream', stream =>{
        console.log(stream)
        socket.broadcast.emit('stream', stream);
      
            
    });

})

Run Code Online (Sandbox Code Playgroud)

客户端

Html (video.html)

<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)

broadcast rtmp webrtc youtube-livestreaming-api

1
推荐指数
1
解决办法
1478
查看次数