是否有任何使用 nodeJS + peerJS 的工作示例?
Is there any working example that uses nodeJS + peerJS?
我花了一整天的时间尝试使用 peer 设置我的应用程序,但到目前为止还没有成功。
这是我的服务器 js 文件的样子:
const path = require('path');
const express = require('express');
const { ExpressPeerServer } = require('peer');
const app = express();
const PORT = process.env.PORT || 3000;
// set your static server
app.use(express.static(path.resolve(`${__dirname}/public`)));
// views
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'views/index.html'));
});
// start listening
const server = app.listen(PORT);
console.log('Server is running localhost on port: ' + PORT);
// peerjs
const peerServer = ExpressPeerServer(server, {
debug: true,
});
app.use('/peerjs', peerServer);
// listeners
peerServer.on('connection', (client) => {
console.log("Server: Peer connected with ID:", client.id);
});
peerServer.on('disconnect', (client) => {
console.log("Server: Peer disconnected with ID:", client.id);
});
当我 运行 应用程序时,它显示服务器:Peer connected with ID: ff1b23c0-9b67-49e3-8461-35405397d3b2
但一分钟后它显示 Server: Peer disconnected with ID: ff1b23c0-9b67-49e3-8461-35405397d3b2
.
此外,我未能使服务器连接到客户端。 peer.on('connection', function(conn) {}
函数永远不会被调用。我可能遗漏了一些东西。
所以我试图找到一个有效的示例代码,但到目前为止我还没有找到任何有效的示例(使用 nodeJS、express、peerJS)。
任何人都可以向我介绍使用 peer 的节点应用程序的任何工作示例吗?
我只想首先检查服务器-客户端连接。 (没有自动断开连接)
这是一个小例子,我自己试过了。
您的后端 Express 服务器:
const express = require('express');
const { ExpressPeerServer } = require('peer');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/', (req, res, next) => res.send('Hello world!'));
const server = app.listen(9000);
const peerServer = ExpressPeerServer(server, {
debug: true
});
app.use('/peerjs', peerServer);
peerServer.on('connection', (client) => { console.log('client connected');});
peerServer.on('disconnect', (client) => { console.log('client disconnected');});
以及用于连接上述对等服务器的前端代码:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/peerjs@0.3.20/dist/peer.min.js"></script>
</head>
<body>
<script>
const peer = new Peer('someid', {
host: 'localhost',
port: 9000,
path: '/peerjs'
});
</script>
</body>
</html>
我刚刚在 github here:
提交了 peerjs 与 nodejs 一起工作的完整工作示例
。我浪费了很多时间尝试学习许多教程,none 似乎对我有用。通过使用它并在 peerjs 客户端电报组中阅读人们通过在随机位置使用代码阻塞睡眠功能添加延迟来使应用程序工作,我知道这是一个时间问题。但有趣的是,我的大脑是如何工作的,像往常一样,我在半夜醒来时发现了解决方案。
这是大多数教程中发生在我身上的事情。要响应调用,他们需要首先设置事件侦听器 peer.on('call',(call) => {...})
,然后他们需要在该函数内使用 call.answer(stream)
响应调用。
由于他们需要本地流来接听电话,所以我找到的所有示例都调用了
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
/* use the stream */
})
.catch(function(err) {
/* handle the error */
});
或者他们使用 async/await 构造并调用:
async function getMedia(constraints) {
let stream = null;
try {
stream = await navigator.mediaDevices.getUserMedia(constraints);
/* use the stream */
} catch(err) {
/* handle the error */
}
}
然后在 .then 的情况下 returned 之后或在异步函数的情况下非阻塞 await 之后,他们启动事件侦听器,如本例中的教程所示'适用于我的设置:
navigator.mediaDevices
.getUserMedia({
audio: true,
video: true,
})
.then((stream) => {
myVideoStream = stream;
addVideoStream(myVideo, stream);
peer.on(“call”, (call) => {
call.answer(stream);
const video = document.createElement(“video”);
call.on(“stream”, (userVideoStream) => {
addVideoStream(video, userVideoStream);
});
});
socket.on(“user-connected”, (userId) => {
connectToNewUser(userId, stream);
});
});
有什么问题?很简单,当目标客户端响应发起客户端时,它首先通知对等服务器它想要连接到同一个房间,通知发起客户端目标客户端想要连接的信令机制自行到达发起客户端速度。来自发起方客户端的响应是使用对等服务器通过信令机制提供的 id 来呼叫目的地。发起者客户端需要它的 video/audio 流对象来进行呼叫,这是它在第一次创建房间时已经获得的东西,在通过信令机制接收到房间里有其他人要呼叫的通知之前。
因此调用可以非常快地发生(或者如果信号很慢,则非常慢,为了本次讨论我们将假设信号非常快),因此在几毫秒内从发起者客户端向目标客户端进行调用.但是,不能保证发起方客户端已准备好接收此调用,它很可能处于刚开始的情况,连接到对等服务器以获取和标识,现在正在等待 getUserMedia() 的承诺return 的方法。因此,无法保证调用将在目标客户端获得可用的流并因此设置 'call' 事件处理程序后到达。因此可以在处理程序存在之前接收事件。然后,目标客户端将永远等待(就像我在教程中发生的那样),使它看起来没有任何效果。
我为了让它工作所做的更改是使 peer.on('call', async (call) => {... 立即,因此,在任何服务器之前启动 'call' 事件处理程序发生连接。然后,在事件处理程序中,等待流的 return,如下所示:
peer.on("call", async (call) => {
let stream = null;
console.log('*** "call" event received, calling call.answer(strem)');
// Obtain the stream object
try {
stream = await navigator.mediaDevices.getUserMedia(
{
audio: true,
video: true,
});
// Set up event listener for a peer media call -- peer.call, returns a mediaConnection that I name call
// Answer the call by sending this clients video stream --myVideo-- to calling remote user
call.answer(stream);
// Create new DOM element to place the remote user video when it comes
const video = document.createElement('video');
// Set up event listener for a stream coming from the remote user in response to this client answering its call
call.on("stream", (userVideoStream) => {
console.log('***"stream" event received, calling addVideoStream(UserVideoStream)');
// Add remote user video stream to this client's active videos in the DOM
addVideoStream(video, userVideoStream);
});
} catch (err) {
/* handle the error */
console.log('*** ERROR returning the stream: ' + err);
};
});
希望这会有所帮助,这样其他人就不必再经历这个了!
我花了一整天的时间尝试使用 peer 设置我的应用程序,但到目前为止还没有成功。
这是我的服务器 js 文件的样子:
const path = require('path');
const express = require('express');
const { ExpressPeerServer } = require('peer');
const app = express();
const PORT = process.env.PORT || 3000;
// set your static server
app.use(express.static(path.resolve(`${__dirname}/public`)));
// views
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'views/index.html'));
});
// start listening
const server = app.listen(PORT);
console.log('Server is running localhost on port: ' + PORT);
// peerjs
const peerServer = ExpressPeerServer(server, {
debug: true,
});
app.use('/peerjs', peerServer);
// listeners
peerServer.on('connection', (client) => {
console.log("Server: Peer connected with ID:", client.id);
});
peerServer.on('disconnect', (client) => {
console.log("Server: Peer disconnected with ID:", client.id);
});
当我 运行 应用程序时,它显示服务器:Peer connected with ID: ff1b23c0-9b67-49e3-8461-35405397d3b2
但一分钟后它显示 Server: Peer disconnected with ID: ff1b23c0-9b67-49e3-8461-35405397d3b2
.
此外,我未能使服务器连接到客户端。 peer.on('connection', function(conn) {}
函数永远不会被调用。我可能遗漏了一些东西。
所以我试图找到一个有效的示例代码,但到目前为止我还没有找到任何有效的示例(使用 nodeJS、express、peerJS)。
任何人都可以向我介绍使用 peer 的节点应用程序的任何工作示例吗?
我只想首先检查服务器-客户端连接。 (没有自动断开连接)
这是一个小例子,我自己试过了。
您的后端 Express 服务器:
const express = require('express');
const { ExpressPeerServer } = require('peer');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/', (req, res, next) => res.send('Hello world!'));
const server = app.listen(9000);
const peerServer = ExpressPeerServer(server, {
debug: true
});
app.use('/peerjs', peerServer);
peerServer.on('connection', (client) => { console.log('client connected');});
peerServer.on('disconnect', (client) => { console.log('client disconnected');});
以及用于连接上述对等服务器的前端代码:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/peerjs@0.3.20/dist/peer.min.js"></script>
</head>
<body>
<script>
const peer = new Peer('someid', {
host: 'localhost',
port: 9000,
path: '/peerjs'
});
</script>
</body>
</html>
我刚刚在 github here:
提交了 peerjs 与 nodejs 一起工作的完整工作示例。我浪费了很多时间尝试学习许多教程,none 似乎对我有用。通过使用它并在 peerjs 客户端电报组中阅读人们通过在随机位置使用代码阻塞睡眠功能添加延迟来使应用程序工作,我知道这是一个时间问题。但有趣的是,我的大脑是如何工作的,像往常一样,我在半夜醒来时发现了解决方案。
这是大多数教程中发生在我身上的事情。要响应调用,他们需要首先设置事件侦听器 peer.on('call',(call) => {...})
,然后他们需要在该函数内使用 call.answer(stream)
响应调用。
由于他们需要本地流来接听电话,所以我找到的所有示例都调用了
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
/* use the stream */
})
.catch(function(err) {
/* handle the error */
});
或者他们使用 async/await 构造并调用:
async function getMedia(constraints) {
let stream = null;
try {
stream = await navigator.mediaDevices.getUserMedia(constraints);
/* use the stream */
} catch(err) {
/* handle the error */
}
}
然后在 .then 的情况下 returned 之后或在异步函数的情况下非阻塞 await 之后,他们启动事件侦听器,如本例中的教程所示'适用于我的设置:
navigator.mediaDevices
.getUserMedia({
audio: true,
video: true,
})
.then((stream) => {
myVideoStream = stream;
addVideoStream(myVideo, stream);
peer.on(“call”, (call) => {
call.answer(stream);
const video = document.createElement(“video”);
call.on(“stream”, (userVideoStream) => {
addVideoStream(video, userVideoStream);
});
});
socket.on(“user-connected”, (userId) => {
connectToNewUser(userId, stream);
});
});
有什么问题?很简单,当目标客户端响应发起客户端时,它首先通知对等服务器它想要连接到同一个房间,通知发起客户端目标客户端想要连接的信令机制自行到达发起客户端速度。来自发起方客户端的响应是使用对等服务器通过信令机制提供的 id 来呼叫目的地。发起者客户端需要它的 video/audio 流对象来进行呼叫,这是它在第一次创建房间时已经获得的东西,在通过信令机制接收到房间里有其他人要呼叫的通知之前。 因此调用可以非常快地发生(或者如果信号很慢,则非常慢,为了本次讨论我们将假设信号非常快),因此在几毫秒内从发起者客户端向目标客户端进行调用.但是,不能保证发起方客户端已准备好接收此调用,它很可能处于刚开始的情况,连接到对等服务器以获取和标识,现在正在等待 getUserMedia() 的承诺return 的方法。因此,无法保证调用将在目标客户端获得可用的流并因此设置 'call' 事件处理程序后到达。因此可以在处理程序存在之前接收事件。然后,目标客户端将永远等待(就像我在教程中发生的那样),使它看起来没有任何效果。 我为了让它工作所做的更改是使 peer.on('call', async (call) => {... 立即,因此,在任何服务器之前启动 'call' 事件处理程序发生连接。然后,在事件处理程序中,等待流的 return,如下所示:
peer.on("call", async (call) => {
let stream = null;
console.log('*** "call" event received, calling call.answer(strem)');
// Obtain the stream object
try {
stream = await navigator.mediaDevices.getUserMedia(
{
audio: true,
video: true,
});
// Set up event listener for a peer media call -- peer.call, returns a mediaConnection that I name call
// Answer the call by sending this clients video stream --myVideo-- to calling remote user
call.answer(stream);
// Create new DOM element to place the remote user video when it comes
const video = document.createElement('video');
// Set up event listener for a stream coming from the remote user in response to this client answering its call
call.on("stream", (userVideoStream) => {
console.log('***"stream" event received, calling addVideoStream(UserVideoStream)');
// Add remote user video stream to this client's active videos in the DOM
addVideoStream(video, userVideoStream);
});
} catch (err) {
/* handle the error */
console.log('*** ERROR returning the stream: ' + err);
};
});
希望这会有所帮助,这样其他人就不必再经历这个了!