Привет, ребята, я пытаюсь запустить видеовызов webrtc, используя реакцию, узел, сокет и peerjs, если я попытаюсь запустить видеочат с хромом, он работает, если я запускаю хром как частный и подключаюсь как второй пользователь, используя ссылку на видео, это работает, но если я пытаюсь подключиться из другого браузера, используя ту же ссылку на видео, например, Edge или Opera, это не работает, вместо этого консоль регистрирует ошибку.
Мой код
import React from 'react'
import io from 'socket.io-client'
import Peer from 'peerjs'
import './ClassWall.css'
const socket = io.connect('http://localhost:4000/')
class LiveClass extends React.Component{
constructor(){
super()
this.state = {
userId :'',
classStatus: '',
}
}
async componentDidMount(){
const videoGrid = document.getElementById('video-grid')
const Myvideo = document.createElement('video')
Myvideo.muted = true
//set user id of logged in user
try {
const response = await fetch('http://localhost:4000/Auth//UserID/id',{
headers:{token:localStorage.token}
})
const Parse = await response.json()
this.setState({userId:Parse})
} catch (error) {
}
//get user id to connect through peer
const myPeer = new Peer(this.state.userId,{
host: '/',
port:4001
})
//connect and share video stream
try {
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then(stream=>{
this.AddVideoStream(Myvideo,stream)
socket.on('user-connected',userId=>{
connectToNewUser(userId,stream)
console.log('new user',userId)
})
})
myPeer.on('open',id =>{
socket.emit('join-class',this.props.match.params.id,id)
})
} catch (error) {
console.log('error',error)
}
this.checkIfClassTrue()
//get new user video stream and connect
async function connectToNewUser(userId,stream){
const call = await myPeer.call(userId,stream)
const video = document.createElement('video')
call.on('stream',userVideostream=>{
this.AddVideoStream(video,userVideostream)
})
call.on('close',()=>{
video.remove()
})
console.log('connected with user')
}
}
//check if its class
checkIfClassTrue = async()=>{
const response = await fetch(`http://localhost:4000/liveclass/${this.props.match.params.id}`)
const Parse = await response.json()
this.setState({classStatus:Parse})
}
//Add video stream
AddVideoStream = async(video,stream) =>{
const videoGrid = document.getElementById('video-grid')
video.srcObject = stream
video.addEventListener('loadedmetadata', () =>{
video.play()
})
videoGrid.append(video)
}
render(){
return(
<div>
{
this.state.classStatus === 'Not found'?
'not found':<div id="video-grid"></div>
}
</div>
)
}
}
export default LiveClass
Ошибка подключения с другим браузером
Error1: Uncaught Error: The error you provided does not contain a stack trace.
Error 2: Uncaught (in promise) DOMException: Could not start video source