Hello! I trying to inserting and playing a live stream inside video tag. In chrome it works perfectly, video start playing as soon as possible, but in safari I can see when live stream is available and poster was removed(autoplay was successful triggered), but until I switch between browser tabs, I see only black screen where the video should be. Also I can see my livestream if I switch between applications windows e.g. I switch to slack then back to the safari and video will playing. During the study of the problem, I managed to find out that is not problem about webrtc or mediasoup (because on server I can see that producer sending bytes to client), and it’s not problem of html5 video tag, because autoplay (muted, of course) always triggered as expected. But this may be due to internal safari tricks with web pages, because only one thing happens when I switch between tabs/apps – it’s document.visibilityState. Anyone knows about this problem?
Probably a case of the stream being paused. If you can reproduce try resuming it and see if it fixes it.
The document visibility API is a pain, I’ve seen calling video pause when changing tab/window but it can lead to problems like this.
Oh, it’s first that I did. Unfortunately, but it’s not work(
Browsers have ruled out auto-play without first-time interaction for spam purposes. For RTC this violates things but the trick is to actually to run an audio context check, if it fails make the user click the page at least once before loading any of the videos/audio.
–
Many sites will run a captcha check and or a simple entry section for them to click every-time to avoid any issues here.
–
A fast way to check this without coding is to click the page while it’s loading to trigger this event before the elements load in with the videos/audio. (must be clicked before elements load in but after initiating refresh).
Unfortunately this not help( I was clicking page and all page elements before and after any video events was triggered, I think it’s bug of webkit
Just “clicking” into the page is not what you have been told above. Please, re-read carefully. AudioContext.
Ok, so what I have now:
- Video element (without sound ever) already in html
- Before any manipulating with video element I check, that AudioContext is supported, if not – I make click via document.getElementById(‘random-element’).click()
- Only now I append MediaStream to my video element
What’s wrong I do?
Step two can just be for the entire page not each element, so imagine a modal popup at first then continue to connect to your WSS after the click (is good enough).
That doesn’t seem to be the issue and it may be your code…
I know with the mediasoup client I didn’t off the bat get support for all browsers with my code, have you logged it?
I stopped guessing that the problem was in my code after I made sure that the bytes from the video were coming to the client and that the “autoplay” attribute itself was working as expected. Sorry that I probably still do not fully understand what I have to do to try to avoid the described bug.
What do you mean by logged? Have I turned on the logs? Yes, of course, I enabled the mediasoup logs and I enabled the socket.io logs, which I use for signaling and also I can see the webkit logs (courtesy of the safari console tool).
I’m afraid I misunderstood you again, but I have no way to display a modal while connecting to the server - is this the only option? Why then did we talk about audio context in the messages above?
To answer the audio context question, generally speaking it’s what holds users back from auto-play or the support to see camera’s each load without the need to click each camera open. (if that’s not the issue don’t worry but it is something that stumps many so worth a shot).
By log yes, both socket.io and mediasoup-client (additionally your client if it exists) to determine if you’re maybe stepping out of order, stuck in an await or something odd.
It can be a few things in all honesty, code/logs would probably be needed to get a better idea. 
Hello! Thank you for the help! To date, I discovered a very interesting feature: I add a control parameter to my video tag and I can see how the autoplay worked, but the video still remains a black screen! I pressed pause and back a thousand times, tried to turn on and off the sound (which is not there), change the volume, but this did not work for me. But! When I click on picture-in-picture, I can finally see my video and not a black screen.
I created a demo project that transferred all the logic used in my project, and it is probably some kind of magic, but the demo works fine even on safari, however, moving the code to my working project did not solve the problem. While I assume that the matter may be that the demo project uses localhost, both for the client and for the server, I will check this hypothesis today.
Hello! The error was on the side of the meteor framework. The problem and the solution is also described here: javascript - Meteor Safari Video Wont Display - Stack Overflow