Question

大家好，我想使用react，node，socket和peerjs进行webrtc视频通话，如果我尝试使用chrome启动视频聊天，如果我以私人身份运行chrome并以第二个用户使用视频链接进行连接，可以，但是如果我尝试使用相同的视频链接（例如边缘或歌剧）从其他浏览器进行连接，则无法正常运行，而是控制台记录错误。

我的代码

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

Answer 1

在大多数操作系统中，不能同时打开两个不同的进程的相机。一种直接的选择是购买多台相机。

对于测试，Firefox media.navigator.streams.fake（在about：config中）和Chrome的--use-fake-device-for-media-stream选项很有用。

未捕获（承诺）DOMException：无法启动视频源，未捕获错误：您提供的错误不包含堆栈跟踪

1 个答案: