Safari on iPhone and MacOS cannot read the webcam but can send it.

[Madriix]

Hi

For about 15 days it has been in production on my site for the people. I just noticed that it did not work in reception to Safari on an iPhone8. It sends the webcam fine and Safari/Chrome/Firefox can read. But when Firefox sends the camera, Safari on Iphone does not receive. Where could the problem come from?

cordially

[miroslavpejic85]

instead of

elem.srcObject = stream

replace it with something like this

// if audio
let track = stream.getAudioTracks()[0]
// if video
let track = stream.getVideoTracks()[0]

const newStream = new MediaStream()
newStream.addTrack(track)
elem.srcObject = newStream

Or create a function like

    // call
    this.attachMediaStream(elem, stream, 'audio')
    this.attachMediaStream(elem, stream, 'video')
    
    attachMediaStream(elem, stream, type) {
        let track = (type == 'audio' ? stream.getAudioTracks()[0] : stream.getVideoTracks()[0])
        const newStream = new MediaStream()
        newStream.addTrack(track)
        elem.srcObject = newStream
        console.log('Success attached media ' + type)
    }

[Madriix]

@miroslavpejic85 I solved the problem :

https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms/blob/master/public/RoomClient.js#L421

About 15 days ago I modified this whole part, and I just have to put a elem.play(); on the <video> and Safari on iOS reads fine now

[Dalvii]

@Madriix @miroslavpejic85 Hello, I solved this problem by changing/adding this code (at RoomClient.js#L421 and 357)

elem = document.createElement('video')
let track = stream.getVideoTracks()[0]
const newStream = new MediaStream()
newStream.addTrack(track)
elem.srcObject = newStream

elem.playsinline = true
elem.autoplay = true
elem.setAttribute('webkit-playsinline', 'webkit-playsinline');
elem.allowsInlineMediaPlayback = true;
elem.setAttribute('playsinline', 'playsinline')
elem.play()