- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这个错误已经有一段时间了
一直在尝试使用 async 来等待本地描述的更新,但由于我的代码现在的工作方式,它无法集成它,而且我听说 socket.on 本身已经执行了 async。
我也尝试过在 vs code 中使用断点来调试运行不佳的代码。
如果有人知道解决此问题的方法,将不胜感激。代码附在下面
'use strict';
var localStream;
var remoteStream;
var isInitiator;
var configuration = {
iceServers: [
{
urls: 'stun:stun.l.google.com:19302'
}
]
};
var pc = new RTCPeerConnection(configuration);
// Define action buttons.
const callButton = document.getElementById('callButton');
const hangupButton = document.getElementById('hangupButton');
/////////////////////////////////////////////
window.room = prompt('Enter room name:');
var socket = io.connect();
if (room !== '') {
console.log('Message from client: Asking to join room ' + room);
socket.emit('create or join', room);
}
socket.on('created', function(room) {
console.log('Created room ' + room);
isInitiator = true;
startVideo();
});
socket.on('joined', function(room) {
console.log('joined: ' + room);
startVideo();
});
socket.on('log', function(array) {
console.log.apply(console, array);
});
////////////////////////////////////////////////
function sendMessage(message) {
socket.emit('message', message);
}
// This client receives a message
socket.on('message', function(message) {
try {
if (message.type === 'offer') {
pc.setRemoteDescription(new RTCSessionDescription(message));
// const stream = navigator.mediaDevices.getUserMedia({
// audio: true,
// video: true
// });
// stream.getTracks().forEach(track => pc.addTrack(track, localStream));
pc.setLocalDescription(
pc.createAnswer(setLocalAndSendMessage, function(err) {
console
.log(err.name + ': ' + err.message)
.then(pc.setLocalDescription);
})
);
} else if (message.type === 'answer') {
console.log('This is to check if answer was returned');
pc.setRemoteDescription(new RTCSessionDescription(message));
} else if (message.type === 'candidate') {
pc.addIceCandidate(candidate);
}
} catch (err) {
console.error(err);
}
});
////////////////////////////////////////////////////
const localVideo = document.querySelector('#localVideo');
const remoteVideo = document.querySelector('#remoteVideo');
// Set up initial action buttons status: disable call and hangup.
callButton.disabled = true;
hangupButton.disabled = true;
// Add click event handlers for buttons.
callButton.addEventListener('click', callStart);
hangupButton.addEventListener('click', hangupCall);
function startVideo() {
navigator.mediaDevices
.getUserMedia({
audio: true,
video: true
})
.then(function(mediaStream) {
localStream = mediaStream;
localVideo.srcObject = mediaStream;
})
.catch(function(err) {
console.log('getUserMedia() error: ' + err.name);
});
callButton.disabled = false;
}
function callStart() {
createPeerConnection();
//pc.addTrack(mediaStream);
//stream.getTracks().forEach(track => pc.addTrack(track, localStream));
callButton.disabled = true;
hangupButton.disabled = false;
if (isInitiator) {
console.log('Sending offer to peer');
pc.createOffer(setLocalAndSendMessage, function(err) {
console.log(err.name + ': ' + err.message).then(pc.setLocalDescription);
});
}
}
/////////////////////////////////////////////////////////
function createPeerConnection() {
try {
pc = new RTCPeerConnection(null);
pc.onicecandidate = ({ candidate }) => sendMessage({ candidate });
pc.ontrack = event => {
if (remoteVideo.srcObject) return;
remoteVideo.srcObject = event.streams[0];
};
console.log('Created RTCPeerConnnection');
} catch (e) {
console.log('Failed to create PeerConnection, exception: ' + e.message);
alert('Cannot create RTCPeerConnection object.');
return;
}
}
function setLocalAndSendMessage(sessionDescription) {
console.log('setLocalAndSendMessage sending message', sessionDescription);
pc.setLocalDescription(sessionDescription);
sendMessage(sessionDescription);
}
function hangupCall() {
pc.close();
pc = null;
}
最佳答案
理解异步代码没有解决方法。您正在此处剪切和粘贴。
如果您不打算使用 async/await ,那么你需要应对 JavaScript 是单线程的,并且永远不会阻塞等待异步操作完成,所以你永远不能直接使用异步方法的返回值,就像你试图在这里做:
createAnswer
是一个异步方法,返回一个 promise ,不是答案,所以这是错误的:
pc.setLocalDescription( // <-- wrong
pc.createAnswer(setLocalAndSendMessage, function(err) { //
console
.log(err.name + ': ' + err.message)
.then(pc.setLocalDescription);
})
);
您正在调用 setLocalDescription(promise)
,这会给出您提到的错误,因为 promise 不是有效的描述。相反,a promise is an object you attach callbacks to :
const promise = pc.createAnswer();
promise.then(setLocalAndSendMessage, function(err) {
console.log(err.name + ': ' + err.message);
});
或者简单地说:
pc.createAnswer()
.then(setLocalAndSendMessage, function(err) {
console.log(err.name + ': ' + err.message);
});
我们甚至可以连续使用then
来组成promise chain :
pc.createAnswer()
.then(function(answer) {
return pc.setLocalDescription(answer);
})
.then(function() {
sendMessage(pc.localDescription);
})
.catch(function(err) {
console.log(err.name + ': ' + err.message);
});
此外,我不应该告诉你 console.log()
不返回 promise !
遗憾的是,您正在复制 really old code在这里,RTCPeerConnection
有一些遗留的 API 并且做了一些技巧,有时让调用者在没有真正的 promise 链或检查错误的情况下调用这些协商方法。但这不可避免地会带来麻烦。
关于javascript - 无法在 'RTCPeerConnection 上执行 'setLocalDescription',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53359703/
我最近一直在研究 webRTC,并且正在创建一个抽象层,以便通过网状网络架构轻松获得多个客户端通信。 我的问题是关于创建数据通道。目前我执行以下操作: var pc = new RTCPeerConn
我知道网络浏览器对同时 http 请求的数量等有限制。但是对于打开的 RTCPeerConnection 的网页可以拥有的数量也有限制吗? 并且有些相关:RTCPeerConnection 允许通过
我正在尝试检测 RTCPeerConnection 的另一端何时断开连接。目前我正在对我的 RTCPeerConnection 对象执行以下操作: rtcPeerConnection.onicecon
有谁知道有什么好的RTCPeerConnection教程? 我想在浏览器之间直播网络摄像头。我有 websocket从我的服务器到所有客户端的连接,所以它应该相当容易 - 但到目前为止我在该主题上发现
我正在尝试检测 RTCPeerConnection 的另一端何时断开连接。目前我正在对我的 RTCPeerConnection 对象执行以下操作: rtcPeerConnection.onicecon
我可以使用以下代码创建一个新的对等连接对象: var peer = new RTCPeerConnection(); 发生这种情况时,chrome 在 chrome://webrtc-internal
建立首次成功的 RTC 连接的最佳方法是什么? 下面的代码有时有效,有时无效。我认为这是在 createAnswer 之前或之后调用 addIceCandidate 的问题,而且我不知道哪个更好,或者
我开始用 rtcPeerConnection 做一些测试,我是这个技术的初学者,我想知道它是否正常:在控制台中,当调用方法 onicecandidate 时,我打印了 ice candidate,但我
我正在我的 chrome 浏览器中运行 WebRTC 演示,我已经可以设置视频 session 了。但是,如果其中一个对等点断开连接(例如刷新浏览器),我不知道如何在另一端检测到它(并且可能会警告“对
如何更改代码,使计算机1的代码连接到计算机2的代码(计算机1和计算机2不是同一台计算机,但在同一网络上)。 它在本地工作,但在两台不同的计算机上不工作 用于连接的计算机 1 和计算机 2 代码定义如下
这是著名的 Chromium bug:https://bugs.chromium.org/p/chromium/issues/detail?id=825576 错误是:无法构造“RTCPeerConn
我正在 Javascript 中运行一些 RTC(在 Chrome 上),我希望能够看到所有打开的 RTCPeerCONnections(或任何处于任何事件状态的)。显然我可以将它们列为已创建的,但我
下面我摘录了this link关于 RTCPeerConnection.onicecandidate 并希望根据我的理解提出两个问题,如果我的概念正确与否,则需要帮助。对我来说有点复杂 The RTC
我正在创建一个应用程序,它将使用 WebRTC 将相机视频共享到多个对等连接。服务器只是为用户提供了一个房间,房间里的所有用户都会看到摄像头视频。唯一不起作用的是 onicecandidate 没有触
这个问题已经有答案了: RTCPeerConnection.createAnswer callback returns undefined object in mozilla for WebRTC c
我有一个非常简单的 RTCPeerConnection 应用在运行。使用 Firebase 发送信号。 RTCPeerConnections 建立,然后我获取流,并对其执行以下操作: let stre
有没有人看到过这个错误,字面意思是: “Uncaught DOMException: Failed to construct 'RTCPeerConnection': Cannot create so
我得到了一个RTCPeerConnection,建立连接后我想断开与网络服务器的连接。 如何检查已建立的连接? readyState 始终是 undefined 并且 onopen 从未触发。 最佳答
我接触 WebRTC 时遇到了一个问题,即 RTCPeerConnection.ontrack 事件不会在创建新的 MediaStreamTrack 对象时触发(通过 RTCPeerConnectio
我的简单 WebRTC javascript 代码没有按预期工作。事实上,音频通话并没有建立(请注意,我对 WebRTC 了解最少,我是通过查看互联网上的示例创建的)。该页面应启动两个参与者之间的音频
我是一名优秀的程序员,十分优秀!