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.
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