javascriptvue.jsvitepusher-jssimple-peer

Uncaught (in promise) TypeError: Stream is undefined


I am following this tutorial to create a video chat https://mupati.medium.com/adding-video-chat-to-your-laravel-app-9e333c8a01f3 and after granting permissions to access mic and camera I am getting the following error:

Uncaught (in promise) TypeError: Stream is undefined
    Readable _stream_readable.js:178
    Duplex _stream_duplex.js:51
    _Peer index.js:34
    placeVideoCall VideoChat.vue:241
    onClick VideoChat.vue:10
...

Relevant code fragments:

function getMediaPermission() {
    return getPermissions()
      .then((stream) => {
        videoCallParams.stream = stream;
        if (userVideo) {
          userVideo.srcObject = stream;
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };
export const getPermissions = () => {
return new Promise((resolve, reject) => {
        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(stream => {
                resolve(stream);
            })
            .catch(err => {
                reject(err);
                //   throw new Error(`Unable to fetch stream ${err}`);
            });
    });
};
await getMediaPermission();
    videoCallParams.peer1 = new Peer({   // <-- ERROR HERE
      initiator: true,
      trickle: false,
      stream: videoCallParams.stream,
      config: {
        iceServers: [
          {
            urls: props.turn_url,
            username: props.turn_username,
            credential: props.turn_credential,
          },
        ],
      },
    });

The stream is initialised and defined in videoCallParams.stream after getMediaPermission. What could be the problem?

I was trying to make a call with Peer passing stream from navigator.mediaDevices.getUserMedia and getting the error that Stream is undefined in _stream_readable.js.


Solution

  • The issue is somewhat explained here https://github.com/nodejs/readable-stream/issues/321. simple-peer uses it's own outdated version of readable-stream dependency for some reason I deleted npm_modules/simple-peer/npm_modules folder completely and it seems to use global readable-stream module now and the issue is gone