![]() The first step is to initialize the Capacitor Plugin builder in your terminal and go through the prompts. Lucky for us, HLS is natively supported by Apple in iOS, so it’s simple to implement. ![]() It’s widely supported and can be used on web, iOS, and Android, but the implementation requires us to implement it at the device level or use libraries to get it to work. In this tutorial, the video format I’m using is HLS, a protocol developed by Apple. Different steps are required to get the streaming videos working depending on the streaming protocol that you are using. Let’s discuss why hls.js doesn’t work on mobile beyond the fact that it’s a JavaScript library: Every platform handles media differently, and major tech companies are fighting for control in the streaming space. In the meantime, you will be able to find the completed plugin project here and the test application here so feel free to check it out or follow along. Be sure to check back as I will be updating all the related blog posts as I build the plugin. I plan on creating a few blog posts around this topic to show how this Capacitor plugin will work for web and Android as well. My goal for this tutorial is to be an extension of those by making a few updates to address Capacitor plugin changes and demonstrate how to utilize video libraries that aren’t normally shown. This tutorial was heavily inspired by Simon Grimm’s video on creating Capacitor plugins and the Ionic Capacitor plugin documentation. In this tutorial, I’ll walk you through how to create your own Capacitor plugin for iOS that interfaces with UIKit, AVKit, and AVFoundation to demonstrate how to get streaming videos playing in your own applications. While this may seem like an insurmountable challenge, you are able to get video streaming working in a cross-platform Capacitor application by building a custom Capacitor plugin. ![]() However, while using libraries like hls.js are great for PWAs, you might have noticed something if you tried to make that demo app cross-platform: hls.js doesn’t work on mobile. By utilizing libraries like hls.js in our PWAs, it empowers us to effortlessly create media-rich apps. If you read my recent blog post on Progressive Web Apps, I covered how performant Ionic and Capacitor can be when creating media-heavy projects like video streaming apps.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |