Uncaught (in promise) DOMException: Could not start video source , Uncaught Error: The error you provided does not contain a stack trace

扶醉桌前 提交于 2021-02-11 07:51:54

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!