Video is not displayed on screen while live streaming from ios devices

Live Streaming
1

Hey there,

First of all thank you for the amazing demo livestream.a.video for live streaming directly from browser. I’ve tried capturing live stream using the above mentioned demo and it works like a charm in android and desktop devices but when i tried to capture live stream from an ios device the video does not show up and also live stream didn’t work. Pasting some code from your demo which I’ve debugged.

function video_show(stream){
		if ("srcObject" in output_video) {
			output_video.muted = true;
			output_video.srcObject = stream;
		} else {
			output_video.src = window.URL.createObjectURL(stream);
		}
  	    .........................
        .........................
        .........................
	}

navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
		
		video_show(stream);//only show locally, not remotely
        .........................
        .........................
        .........................
});

I’ve debugged in ios device and the navigator.mediaDevices.getUserMedia is working in ios and also I am getting values in “stream” param. So when video_show function is called the video should be displayed on screen but it is not displaying anything in ios. Can you suggest me what’s the issue might be?

Thanks

2

Hello!

We’ve just tested the livestream.a.video demo on an IOS device (iPhone 8) and it seems that it’s working properly both locally and remotely. What device are you using?

In a other hand we’re currently working on a javascript project that will really ease the development of such applications. It’s composed of two javascript library: one for the backend side (with all the stuff related to ffmpeg), and another one for the frontend side. That’s still in beta but maybe you should give it a try. This project is here: GitHub - apivideo/api.video-browser-to-rtmp: Easily publish a webcam stream from browsers to a RTMP server

Regards,

Olivier

3

Hello!
We have tested it on iPhone XS with IOS 15.4. It seems when user give permission on iPhone for capturing video and microphone(audio) the preview for live streaming does not appear in only iPhone it works proper in other devices. So we’ve debugged that navigator.mediaDevices.getUserMedia also returns stream in iPhone but when we tried to put that stream to video src it’s just dont go into video source (src attribute) and that’s what we dont understand. So that’s how live video preview do not displayed in iPhone and it’s just blank screen there.

Also we have found this issue in Apple’s official forum and in stackoverflow. The issue was raised many years ago but still there are also users who have reported this issue recently so take a look below links.

  1. Does getUserMedia works on iOS? | Apple Developer Forums

  2. getUserMedia "Live Broadcast" when… | Apple Developer Forums

  3. javascript - iOS 11 getUserMedia not working? - Stack Overflow

We’ve tried solution given in all three but none worked. Can you suggest solution and help us with this one?

I’m also pasting code in case you want to take a look and suggest something.

<video id="videoElement" autoplay muted playsinline>
</video>

var video = document.getElementById("videoElement"); 
// Fix for iOS Safari from https://leemartin.dev/hello-webrtc-on-safari-11-e8bcb5335295
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');

var constraints = {
            video: {
                facingMode: 'user',
                width: 1280,
                height: 720
            },
            audio: {
                echoCancellation: true
            }
        }

        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(constraints)
            .then(function(stream) {
                mediaStream = stream;
                if ('srcObject' in video) {
                    video.srcObject = stream;
                    //Note : We've debugged here in iPhone stream param is working proper and also containing values 
                } else {
                    video.src = window.URL.createObjectURL(stream);
                }
            })
            .catch(function(error) {
                console.log("Something went wrong!", error);
            });
        }

Thanks.

4

Hello,

That’s really weird. I can’t reproduce the issue on my side using your code. The video is properly displayed on my iphone.
Have you tried forcing the video to play with something like that:

        // ...
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
            video.play()
        }

?

Olivier

5

Hello,

Yes, that’s really weird issue there. We also don’t know why is this issue occurring when it is working for you and also when we checked it on different website which use similar navigator functionality.

Yes, We’ve just tried to force the video to play like you’ve mentioned in the code but unfortunately it doesn’t work and video doesn’t play. It’s just blank container there with no video. Not sure what is causing this issue because it is working proper in android and desktop.