Uncaught (в обещании) DOMException: не удалось запустить источник видео, Uncaught Error: предоставленная вами ошибка не содержит трассировки стека

Привет, ребята, я пытаюсь запустить видеовызов 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

person prince randy    schedule 23.08.2020    source источник


Ответы (1)


В большинстве операционных систем два разных процесса не могут одновременно открывать камеру. Один простой вариант — купить несколько камер.

Для тестирования Firefox media.navigator.streams.fake (в about:config) и Chrome --use-fake-device-for-media-stream полезны.

person Philipp Hancke    schedule 23.08.2020