问题
Hey guys am trying to run a webrtc video call using react, node, socket and peerjs, if i try starting a video chat with chrome it works, if i run chrome as private and connect as second user using the video link it works but if i try connecting from another browser using same video link e.g edge or opera it doesn't work instead it console log an error..
My code
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
Error connecting with a different browser
Error1: Uncaught Error: The error you provided does not contain a stack trace.
Error 2: Uncaught (in promise) DOMException: Could not start video source
回答1:
In most operating system, two different processes can not have the camera open at the same time. One straightforward option is to buy multiple cameras.
For testing, Firefox media.navigator.streams.fake (in about:config) and Chrome's --use-fake-device-for-media-stream option are useful.
来源:https://stackoverflow.com/questions/63542923/uncaught-in-promise-domexception-could-not-start-video-source-uncaught-erro