首页 > 解决方案 > 通过socket io进行屏幕共享

问题描述

我在我的视频聊天 Web 应用程序中实现屏幕共享时遇到问题。控制台日志显示“无法将值转换为 'MediaStream'。这是程序的服务器部分:

const express = require('express')
const app = express()
const fs = require('fs')
var ss = require('socket.io-stream')
//const cors = require('cors')
//app.use(cors())
const server = require('http').Server(app)
const io = require('socket.io')(server)
const { ExpressPeerServer } = require('peer');
const { v4: uuidV4 } = require('uuid')
const peerServer = ExpressPeerServer(server, {
  debug: true
});

app.use('/peerjs', peerServer);

app.set('view engine', 'ejs')
app.use(express.static('public'))

app.get('/', (req, res) => {
  res.redirect(`/${uuidV4()}`)
})

app.get('/:room', (req, res) => {
  res.render('room', { roomId: req.params.room })
})

io.on('connection', socket => {
  socket.on('join-room', (roomId, userId, userName) => {
    socket.join(roomId)
    socket.to(roomId).broadcast.emit('user-connected', userId, userName);
    // messages
    socket.on('message', (message) => {
      //send message to the same room
      io.to(roomId).emit('createMessage', message, userName)
  }); 
    
    socket.on('screen-share', stream => {
      io.to(roomId).emit('screenShare', stream, userName)
    })

    socket.on('disconnect', () => {
      socket.to(roomId).broadcast.emit('user-disconnected', userId, userName)
    })
  })
})

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

脚本文件中的屏幕共享部分:

let myScreenStream;

const startButton = document.getElementById('startButton');
startButton.addEventListener('click', (e) => {
  if (adapter.browserDetails.browser == 'firefox') {
    adapter.browserShim.shimGetDisplayMedia(window, 'screen');
  }
  const myVideo=document.createElement('video')
  navigator.mediaDevices.getDisplayMedia({
    video: true
  }).then(stream => {
    myScreenStream = stream;
    socket.emit('screen-share', stream);
  });
    
})


socket.on('screenShare', (stream, userName) => {
    startButton.disabled = true;
    const video = document.createElement('video');
    addVideoStream(video, stream);
    $("ul").append(`<br><h6 style="color: MediumSeaGreen;"><i><li class="message">${userName}<b>-started screen sharing</b></li><i></h6><br>`);

})
 const addVideoStream = (videoEl, stream) => {
 videoEl.srcObject = stream;
 videoEl.addEventListener("loadedmetadata", () => {
   videoEl.play();
  });
}

是否无法使用套接字 io 发送视频?完整的 script.js 文件可以在这里找到。

谢谢你。

标签: javascriptnode.jssocket.iowebrtc

解决方案


推荐阅读