DEV Community

Eli
Eli

Posted on • Originally published at eli-xciv.github.io

Supporting Apple Devices on the Web...

I'm a System Admin by trade and Software Developer by heart. I've primarily been focused on system side development and automation. Primarily Python, some Java and a lot of scripting. About a year or two ago I decided to foray into Web Development. Why? It was completely different for me, and why not? All the cool kids are doing it. So I tried React, I did NOT have any Javascript experience and the learning curve was wayyy to steep. I almost stopped doing web side projects because of React (No, I'm not blaming React). React has it's uses but it's not for me (At least right now). By happenstance I stumbled upon Svelte. I felt at home. Everything just made sense for me using the framework. After working with Svelte and actually moving the needle on a side web project or two, at this point I have a much tighter grasp on the front end environment and the entire framework of frameworks. But this post isn't about React or Svelte..... this is much bigger than that.

One of my side projects was trying to conduct webcam capture and making a video stream all client side. Turns out prior to the MediaRecorder API this was done primarily server side? Before full client side support everything was done using WebRTC which from my research requires server side. Which would not fit my requirements. So anywho, I'm an adventurous person, lets go. I develop a sample app using the MediaRecorder API. I primarily use Chrome as a browser so I did all my development based upon Chrome. As soon as I get a prototype I figure it's time to make sure there's cross-browser compatibility. Edge (because it's now based on Chrome engine) worked well, no problems. Then using Safari on my iMac nothing works. So I launch the developer tools and there is no MediaRecorder API, it's undefined. Now mind you, I'm new to web development but I've known there's been some cross-compatability issues, which is why there are polyfills. But this is different. After some research I found this blog post from the WebKit website. Cool hopefully it'll be supported soon? It says that it's in the iOS 14.3 Beta... Wait I didn't even think about mobile.

Now, I borrowed my parents android tablet to test my prototype... it worked. The MediaRecorder API was supported in Chrome on Android. Cool lets try Apple. I tried Safari though I knew it wasn't going to work. It didn't. Though I can turn it on in the Technology Preview Section.... but I wouldn't want my users to have to do that. Then I used Chrome on iOS..... naively I expected this to work. It also didn't. I was taken aback. Time to research again. Turns out Apple forces all browsers on their platform to use the same underlying engine, of which is also based upon WebKit. Great.

Now here's the kicker for me, I have a side project and prototype that I wanted to release and now I'm faced with either dropping support entirely for Apple Safari on desktop and all.. yes all! iOS devices, or at least waiting until the MediaRecorder API is supported and established. Which is who knows when. I can implement a server side capability to bypass this issue, but I don't want to do that and have to manage another thing. I did find an audio polyfill for this, but it didn't support video....

All in all, why does it take so long for Apple to support API's that seem like they should be standard? I already know a lot of the answers....

But, if anyone has any suggestions on being able to accomplish MediaRecorder capabilities without the API please let me know. Or else my side project will just gather dust thanks to Apple.

P.S. I'm an avid Apple user.... and an avid Linux User. I used both my iMac and a laptop running Arch Linux. This blog was written on my Arch machine...

Discussion (2)

Collapse
vatsal2210 profile image
Vatsal Shah

This is very touching. I am also in the same boat. Also, tried implementing Polyfill to support iOS Safari but it creates more issues than solving one.

Hoping to see some updates soon on iOS Media recorder APIs.

Collapse
eli_xciv profile image
Eli Author

I tried finding a polyfill for that as well but the only one I found was the audio polyfill. I thought about creating my own recorder using the Media Stream (which is available) but it was too much work to invest into a side project.