Video share over the internet. #1330

blackshadowsoftwareltd · 2025-04-19T10:26:29Z

blackshadowsoftwareltd
Apr 19, 2025

I am trying to create a Screen video sharing project with peerjs.
But I am unable to show the shared video over the internet. When I run it on my local machine, I can see it's sharing in 2 browsers. But it's not working with 2 different PCs with different internet connections.

This is my implementation :

<!DOCTYPE html>
<html>
<head>
  <title>PeerJS Video Chat + Screen Share</title>
  <style>
    #my-video {
      width: 150px;
      border: 1px solid #333;
      margin: 10px;
    }
  
    #remote-video {
      width: 45%;
      border: 1px solid #333;
      margin: 10px;
    }
  </style>
  
  </style>
</head>
<body>
  <h2>PeerJS Video Chat & Screen Share</h2>

  <p>Your ID: <span id="my-id">...</span></p>
  <input type="text" id="peer-id" placeholder="Enter peer ID to call">
  <button onclick="startWebcamCall()">Call (Webcam)</button>
  <button onclick="startScreenShareCall()">Share Screen</button>

  <h3>My Stream</h3>
  <video id="my-video" autoplay muted playsinline></video>
  
  <h3>Remote Stream</h3>
  <video id="remote-video" autoplay playsinline></video>

  <!-- PeerJS CDN -->
  <script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>

  <script>
    const peer = new Peer(); // Uses default public PeerServer
    let currentCall;

    peer.on('open', (id) => {
      document.getElementById('my-id').textContent = id;
    });

    // Answer incoming calls with webcam by default
    peer.on('call', (call) => {
      navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then((stream) => {
          document.getElementById('my-video').srcObject = stream;
          call.answer(stream);
          call.on('stream', (remoteStream) => {
            document.getElementById('remote-video').srcObject = remoteStream;
          });
          currentCall = call;
        })
        .catch((err) => {
          alert('Failed to get webcam for answering call.');
          console.error(err);
        });
    });

    function startWebcamCall() {
      const peerId = document.getElementById('peer-id').value;
      if (!peerId) return alert("Enter a peer ID!");

      navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then((stream) => {
          document.getElementById('my-video').srcObject = stream;
          const call = peer.call(peerId, stream);
          call.on('stream', (remoteStream) => {
            document.getElementById('remote-video').srcObject = remoteStream;
          });
          currentCall = call;
        })
        .catch((err) => {
          alert('Failed to access webcam.');
          console.error(err);
        });
    }

    function startScreenShareCall() {
      const peerId = document.getElementById('peer-id').value;
      if (!peerId) return alert("Enter a peer ID!");

      navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
        .then((screenStream) => {
          document.getElementById('my-video').srcObject = screenStream;
          const call = peer.call(peerId, screenStream);
          call.on('stream', (remoteStream) => {
            document.getElementById('remote-video').srcObject = remoteStream;
          });
          currentCall = call;

          screenStream.getVideoTracks()[0].addEventListener('ended', () => {
            alert('Screen sharing stopped.');
            call.close();
          });
        })
        .catch((err) => {
          alert('Failed to access screen.');
          console.error(err);
        });
    }
  </script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PeerJS

Video share over the internet. #1330

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

PeerJS

Video share over the internet. #1330

Uh oh!

blackshadowsoftwareltd Apr 19, 2025

Replies: 0 comments

blackshadowsoftwareltd
Apr 19, 2025