Socket.io не работает на мобильном телефоне - PullRequest
Новая
       250

Socket.io не работает на мобильном телефоне

0 голосов
/ 05 августа 2020

Я пытаюсь создать простое приложение для видеочата, но проблема в том, что все работает нормально на портативном устройстве, но не на мобильном устройстве. Когда я пытаюсь запустить на мобильном устройстве, страница загружается, но разрешение камеры не запрашивается и видеопоток не включается в Google Chrome Android Это мой сервер. js

const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const {v4: uuidV4} = require('uuid')

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


app.get('/', (req, res) => {
    res.render('home')
})

app.get('/JoinRoom', (req, res) => {
    res.redirect('/ABCD')
})

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).broadcast.emit('user-connected', userId)

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

// server.listen(3000)
server.listen(3000, '0.0.0.0', function () {
    console.log('Listening to port:  ' + 3000);
});

Это это моя комната. e js

<html>
<head>
    <meta charset="'UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
</head>
<body>
<script>
    var ROOM_ID = "<%= roomID %>"
</script>
<script src="/socket.io/socket.io.js" defer></script>
<script src="script.js" defer></script>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<style>
    #video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 300px);
        grid-auto-rows: 300px;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
<h1 id="H1">ROOM ID = </h1>
<div id="video-grid">

</div>
</body>
<script>
    document.getElementById('H1').innerText = 'ROOM ID = ' + ROOM_ID;
</script>
</html>

Это мой пакет. json

{
  "name": "VideoCall",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "devStart": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "budo": "^11.6.4",
    "ejs": "^3.1.3",
    "express": "^4.17.1",
    "nodeman": "^1.1.2",
    "socket.io": "^2.3.0",
    "uuid": "^8.3.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

Это мой сценарий. js

const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, {
    host: '/',
    port: '3001'
})

const myVideo = document.createElement('video')
myVideo.muted = true;
const peers = {}
navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
}).then(stream => {
    addVideoStream(myVideo, stream)

    myPeer.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)
    })
})

socket.on('user-disconnected', userId => {
    if (peers[userId]) {
        peers[userId].close()
    }
})


myPeer.on('open', id => {
    socket.emit('join-room', ROOM_ID, id)
})

function addVideoStream(video, stream) {
    video.srcObject = stream
    video.addEventListener('loadedmetadata', () => {
        video.play()
    })
    videoGrid.append(video)
}

function connectToNewUser(userId, stream) {
    const call = myPeer.call(userId, stream)
    const video = document.createElement('video')
    call.on('stream', userVideoStream => {
        addVideoStream(video, userVideoStream)
    })
    call.on('close', () => {
        video.remove()
    })

    peers[userId] = call
}

Есть идеи, почему это не работает.

...