未捕获（承诺中）DOMException：无法启动视频源

Question

我正在尝试实现实时群组视频聊天；当第一个浏览器打开页面时一切正常，但是当我想作为第二个用户打开该页面时，它会出现此错误。 我正在尝试实现实时群组视频聊天；当第一个浏览器打开页面时一切正常，但是当我想作为第二个用户打开该页面时，它会出现此错误。

并且它不广播共享屏幕

谁能帮我解决这个问题

这是我正在使用的代码：

const socket = io('http://localhost:3001');

function App() {
  const [roomId, setRoomId] = useState('');
  const [userId, setUserId] = useState('');
  const [messages, setMessages] = useState([]);
  const [peers, setPeers] = useState([]);
  const userVideoRef = useRef();
  const peersRef = useRef([]);

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then((stream) => {
        userVideoRef.current.srcObject = stream;

        socket.emit('join-room', roomId, userId);

        socket.on('user-connected', (newUserId) => {
          connectToNewUser(newUserId, stream);
        });

        socket.on('user-disconnected', (disconnectedUserId) => {
          const peer = peersRef.current.find((p) => p.userId === disconnectedUserId);
          if (peer) {
            peer.peer.destroy();
          }
          setPeers((prevPeers) => prevPeers.filter((p) => p.userId !== disconnectedUserId));
        });

        socket.on('receive-message', ({ userId, message }) => {
          setMessages((prevMessages) => [...prevMessages, `${userId}: ${message}`]);
        });

        socket.on('user-share-screen', ({ userId, screenStream }) => {
          connectToNewUser(userId, screenStream, true);
        });
      });

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const connectToNewUser = (newUserId, userStream, isScreen = false) => {
    const peer = new Peer({
      initiator: true,
      trickle: false,
      stream: userStream,
    });
  
    peer.on('signal', (offer) => {
      socket.emit('offer', roomId, newUserId, offer);
    });
  
    peer.on('data', (data) => {
      console.log('Data received:', data);
    });
  
    peer.on('stream', (userVideoStream) => {
      setPeers((prevPeers) => [...prevPeers, { userId: newUserId, stream: userVideoStream, isScreen }]);
    });
  
    socket.on('receive-answer', (answerUserId, answer) => {
      if (answerUserId === newUserId) {
        peer.signal(answer);
      }
    });
  
    socket.on('receive-ice-candidate', (iceCandidateUserId, iceCandidate) => {
      if (iceCandidateUserId === newUserId) {
        peer.signal(iceCandidate);
      }
    });
  
    peersRef.current.push({ userId: newUserId, peer });
  };
  

  const sendMessage = (message) => {
    socket.emit('send-message', message);
    setMessages((prevMessages) => [...prevMessages, `You: ${message}`]);
  };

  const shareScreen = async () => {
    try {
      console.log('screen is groing sharing');
      const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
      console.log('Screen stream:', screenStream);
  
      // Stop the existing user media stream
      const userMediaStream = userVideoRef.current.srcObject;
      if (userMediaStream) {
        const tracks = userMediaStream.getTracks();
        tracks.forEach((track) => track.stop());
      }
  
      userVideoRef.current.srcObject = screenStream;
  
      peersRef.current.forEach((peer) => {
        if (peer.peer._isInitiator) {
          const sender = peer.peer._pc.getSenders().find((s) => s.track.kind === 'video');
          if (sender) {
            sender.replaceTrack(screenStream.getVideoTracks()[0]);
          } else {
            console.error('No video sender found.');
          }
        }
      });
  
      socket.emit('share-screen', screenStream);
    } catch (error) {
      console.error('Error sharing screen:', error.message);
    }
  };
  
  
  return (
    <div>
      <div>
        <label>Room ID:</label>
        <input
          type="text"
          value={roomId}
          onChange={(e) => setRoomId(e.target.value)}
          placeholder="Enter Room ID"
        />
      </div>
      <div>
        <label>User ID:</label>
        <input
          type="text"
          value={userId}
          onChange={(e) => setUserId(e.target.value)}
          placeholder="Enter User ID"
        />
      </div>
      <video ref={userVideoRef} autoPlay muted style={{ width: '200px' }} />
      <div>
        <h3>Peers:</h3>
        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
          {peers.map((peer) => (
            <video key={peer.userId} autoPlay playsInline style={{ width: '200px', margin: '5px' }} ref={(el) => el && (el.srcObject = peer.stream)} />
          ))}
        </div>
      </div>
      <div>
        <button onClick={shareScreen}>Share Screen</button>
      </div>
      <div>
        <h3>Chat:</h3>
        <ul>
          {messages.map((message, index) => (
            <li key={index}>{message}</li>
          ))}
        </ul>
        <input
          type="text"
          placeholder="Type your message..."
          onKeyPress={(e) => e.key === 'Enter' && sendMessage(e.target.value)}
        />
      </div>
    </div>
  );
}

export default App;

Answer 1

在 Windows 中，大多数网络摄像头驱动程序都被阻止，这意味着无法同时多次访问一个网络摄像头。您可以考虑使用虚拟网络摄像头作为第二个网络摄像头或连接第二个物理网络摄像头。