'stream works in Firefox only

I'm trying to build a video chat app with JavaScript and PeerJS I want to allow user to join with both video and camera or either of them or neither,
everything is working perfectly with both or neither of them but when users try to join with camera only or microphone only the stream doesn't work except in Firefox browser


let stream;

const setVideoStream = (video, _stream) => {
        video.srcObject = _stream
        video.onloadedmetadata = _ => {
            video.play();
        }
    }

const localVideo = document.getElementById('localVideo')

    const createEmptyAudioTrack = () => {
        const ctx = new AudioContext();
        const oscillator = ctx.createOscillator();
        const dst = oscillator.connect(ctx.createMediaStreamDestination());
        oscillator.start();
        const track = dst.stream.getAudioTracks()[0];
        return Object.assign(track, { enabled: false });
    };

    const createEmptyVideoTrack = ({ width, height }) => {
        const canvas = Object.assign(document.createElement('canvas'), { width, height });
        canvas.getContext('2d').fillRect(0, 0, width, height);
        const fakestream = canvas.captureStream();
        const track = fakestream.getVideoTracks()[0];
        return Object.assign(track, { enabled: false });
    };

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((localstream) => {
        stream = localstream
        setVideoStream(localVideo, stream)
        startMeeting()

    })
        .catch(_ => {
            navigator.mediaDevices.getUserMedia({ video: true }).then((localstream) => {
                const audioTrack = createEmptyAudioTrack();
                const _myStream = new MediaStream([audioTrack, localstream.getVideoTracks()[0]])
                stream = _myStream
                setVideoStream(localVideo, stream)
                startMeeting()
            })
                .catch(_ => {
                    navigator.mediaDevices.getUserMedia({ audio: true }).then((localstream) => {
                        const videoTrack = createEmptyVideoTrack({ width: 640, height: 480 });
                        const _myStream = new MediaStream([localstream.getAudioTracks()[0], videoTrack])
                        stream = _myStream
                        setVideoStream(localVideo, stream)
                        startMeeting()
                    })
                        .catch((e) => {
                            stream = new MediaStream([createEmptyAudioTrack(), createEmptyVideoTrack({ width: 640, height: 480 })])
                            localVideo.parentElement.innerHTML = `<h1>No feed</h1>`
                            startMeeting()
                        })
                })
        })

const ShareScreenBtn = e => {
        navigator.mediaDevices.getDisplayMedia({ video: true }).then((_stream) => {
            e.classList.toggle("text-green-500")
            const videoTracks = stream.getVideoTracks()[0]
                stream = new MediaStream([stream.getAudioTracks()[0], _stream.getVideoTracks()[0]])
                
                setVideoStream(localVideo, stream)

                stream.getVideoTracks()[0].onended = _ => {
                    e.classList.toggle("text-green-500")
                    stream = new MediaStream([stream.getAudioTracks()[0], videoTracks])
                    setVideoStream(localVideo, stream)
                    for (var i = 0; i < peers.length; i++) {
                        peers[i].peerConnection.getSenders().map(function (sender) {
                            return sender.replaceTrack(stream.getVideoTracks()[0]).catch((err) => console.log(err))
                        });
                    }    
                }
                
                for (var i = 0; i < peers.length; i++) {
                    peers[i].peerConnection.getSenders().map(function (sender) {
                        return sender.replaceTrack(stream.getVideoTracks()[0]).catch((err) => console.log(err))
                    });
                }
            }).catch((err) => console.log(`${err}`))
    }

I can't even display the feed in the same page, there is no errors just no feed, but it works in FireFox but noticed if tried to join with only microphone and then shared screen both audio and video will work and audio will continue working even after stop the share



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source