javascript - 通过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 文件可以在这里找到。
谢谢你。
解决方案
推荐阅读
- c# - ODBC 驱动程序忽略 SQL Anywhere 10 的端口参数
- reactjs - Webpack v4,弹出 create-react-app。如何配置自动前缀?
- reactjs - 使用 React、Express 的初始获取获取请求缓慢
- python - 将列表与字典的每个值进行比较(字符串列表)
- com - 注册 Visual Fox Pro 时 DllRegisterServer 失败,错误代码 0x80004005
- python - 如何在 pyglet 中制作 3D?
- python - Py2Neo 没有正确创建日期时间数据类型?
- javascript - 文档事件“onload”总是被触发?
- typescript - 创建地图实例
- javascript - 如何转换 ReadonlyArray
去任何[]?