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

本文介绍了未捕获(承诺)DOMException:无法启动视频源，未捕获错误:您提供的错误不包含堆栈跟踪的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

嘿伙计们正在尝试使用 react、node、socket 和 peerjs 运行 webrtc 视频通话，如果我尝试使用 chrome 开始视频聊天，它会起作用，如果我将 chrome 设为私有运行并使用视频链接作为第二个用户连接它工作，但如果我尝试使用相同的视频链接从另一个浏览器连接，例如边缘或歌剧它不工作，而是控制台记录错误..

我的代码

从 'react' 导入 React从socket.io-client"导入 io从 'peerjs' 导入 Peer导入'./ClassWall.css'const socket = io.connect('http://localhost:4000/')类 LiveClass 扩展了 React.Component{构造函数(){极好的()this.state = {用户身份 :''，类状态:''，}}异步 componentDidMount(){const videoGrid = document.getElementById('video-grid')const Myvideo = document.createElement('video')Myvideo.muted = 真//设置登录用户的用户ID尝试 {const response = await fetch('http://localhost:4000/Auth//UserID/id',{标头:{令牌:localStorage.token}})const Parse = 等待 response.json()this.setState({userId:Parse})} 捕捉(错误){}//获取用户ID以通过peer连接const myPeer = new Peer(this.state.userId,{主持人: '/'，端口:4001})//连接并共享视频流尝试 {navigator.mediaDevices.getUserMedia({视频:真实，音频:真}).then(stream=>{this.AddVideoStream(Myvideo,stream)socket.on('用户连接',userId=>{连接到新用户(用户 ID，流)console.log('新用户',userId)})})myPeer.on('open',id =>{socket.emit('join-class',this.props.match.params.id,id)})} 捕捉(错误){console.log('错误',错误)}this.checkIfClassTrue()//获取新用户视频流并连接异步函数 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',()=>{视频.remove()})console.log('已连接用户')}}//检查它的类checkIfClassTrue = async()=>{const response = await fetch(`http://localhost:4000/liveclass/${this.props.match.params.id}`)const Parse = 等待 response.json()this.setState({classStatus:Parse})}//添加视频流AddVideoStream = async(video,stream) =>{const videoGrid = document.getElementById('video-grid')video.srcObject = 流video.addEventListener('loadedmetadata', () =>{视频播放()})videoGrid.append(视频)}使成为(){返回(<div>{this.state.classStatus === '未找到'?'未找到':<div id="video-grid"></div>}
)}}导出默认 LiveClass

连接其他浏览器时出错

Error1: Uncaught Error: 您提供的错误不包含堆栈跟踪.错误 2:未捕获(承诺)DOMException:无法启动视频源

解决方案

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

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

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

解决方案

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.

这篇关于未捕获(承诺)DOMException:无法启动视频源，未捕获错误:您提供的错误不包含堆栈跟踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！