带有 socket.io 的 WebRTC/nodejs 中的屏幕共享问题

Posted

技术标签:

【中文标题】带有 socket.io 的 WebRTC/nodejs 中的屏幕共享问题【英文标题】:Screen sharing issue in WebRTC/nodejs with socket.io 【发布时间】:2021-11-03 06:17:00 【问题描述】:

我正在开发一个视频会议应用程序,但我似乎无法让屏幕共享工作,出现错误“mediaTypeError:无法读取未定义的属性(正在读取'getSender')”。屏幕共享能够启动,但没有共享任何内容

这是我的服务器文件。

const express = require("express");
const app = express();
const server = require("http").Server(app);
const  v4: uuidv4  = require("uuid");
const io = require("socket.io")(server);
// Peer

const  ExpressPeerServer  = require("peer");
const peerServer = ExpressPeerServer(server, 
  debug: true,
);

app.set("view engine", "ejs");
app.use(express.static("public"));
app.use("/peerjs", peerServer);

app.get("/", (req, rsp) => 
  rsp.redirect(`/$uuidv4()`);
);

app.get("/:room", (req, res) => 
  res.render("room",  roomId: req.params.room );
);

io.on("connection", (socket) => 
  socket.on("join-room", (roomId, userId) => 
    socket.join(roomId);
    socket.to(roomId).emit("user-connected", userId);

    socket.on("message", (message) => 
      io.to(roomId).emit("createMessage", message);
    );
  );
);

server.listen(process.env.PORT || 3030);

getSender 似乎存在问题的屏幕共享代码

       share__Btn.addEventListener("click", (e) => 
        navigator.mediaDevices.getDisplayMedia(
            video: 
                cursor: "always"
            ,
            audio: 
                echoCancellation: true,
                noiseSuppression: true
            
        ).then((stream) => 
            let videoTrack = stream.getVideoTracks()[0];
            let sender = currentPeer.getSender().find(function (s) 
                return s.track.kind == videoTrack.kind
            )
            sender.replaceTrack(videoTrack)
        ).catch((err) => 
            console.log("unable to get display media" + err)
        )
    )
 );

peer.on("call", function (call) 
    getUserMedia(
         video: true, audio: true ,
        function (stream) 
            call.answer(stream); // Answer the call with stream.
            const video = document.createElement("video");
            call.on("stream", function (remoteStream) 
                if (!peerList.includes(call.peer)) 
                    addVideoStream(video, remoteStream);
                    currentPeer = call.peerConnection
                    peerList.push(call.peer);
                
            );
        ,
        function (err) 
            console.log("Failed to get local stream", err);
        
    );
);

完整代码的 Github 链接:https://github.com/sucxh/simLearn

【问题讨论】:

【参考方案1】:

我假设currentPeerRTCPeerConnection,如下所述:https://peerjs.com/docs.html#dataconnection-peerconnection。在这种情况下,这是一个简单的错字。该方法称为getSenders() 而不是getSender()。添加缺少的“s”应该会使错误消失。

【讨论】:

以上是关于带有 socket.io 的 WebRTC/nodejs 中的屏幕共享问题的主要内容,如果未能解决你的问题,请参考以下文章

带有express和socket.io的节点js-找不到socket.io.js

带有 nginx 的 Socket.io

ExpressJS - 带有路由分离的 Socket.IO

带有 iOS 的 Socket.io 未在移动客户端上连接

带有快速生成器的 socket.io

带有 socket.io 和后端 php 的 Angular