{"id":5191,"date":"2023-05-01T11:37:44","date_gmt":"2023-05-01T15:37:44","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5191"},"modified":"2023-05-01T11:37:45","modified_gmt":"2023-05-01T15:37:45","slug":"creating-your-own-media-plugin-for-capacitor-an-ios-tutorial","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/creating-your-own-media-plugin-for-capacitor-an-ios-tutorial","title":{"rendered":"Creating Your Own Media Plugin For Capacitor: An iOS Tutorial"},"content":{"rendered":"\n

If you read my recent blog post on Progressive Web Apps<\/a>, I covered how performant Ionic and Capacitor can be when creating media-heavy projects like video streaming apps. By utilizing libraries like hls.js in our PWAs, it empowers us to effortlessly create media-rich apps. 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\u2019t work on mobile.<\/p>\n\n\n\n

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<\/a> plugin. In this tutorial, I\u2019ll 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.<\/p>\n\n\n\n

Before We Begin<\/h1>\n\n\n\n

This tutorial was heavily inspired by Simon Grimm\u2019s video<\/a> on creating Capacitor plugins and the Ionic Capacitor plugin documentation<\/a>. 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\u2019t normally shown. 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. Be sure to check back as I will be updating all the related blog posts as I build the plugin. In the meantime, you will be able to find the completed plugin project here<\/a> and the test application here<\/a> so feel free to check it out or follow along.<\/p>\n\n\n\n

The Media Streaming Problem<\/h1>\n\n\n\n

Let\u2019s discuss why hls.js doesn\u2019t work on mobile beyond the fact that it\u2019s a JavaScript library: Every platform handles media differently, and major tech companies are fighting for control in the streaming space. Different steps are required to get the streaming videos working depending on the streaming protocol that you are using.<\/p>\n\n\n\n

In this tutorial, the video format I\u2019m using is HLS, a protocol developed by Apple. 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. Lucky for us, HLS is natively supported by Apple in iOS, so it’s simple to implement.<\/p>\n\n\n\n

Building The Plugin <\/h1>\n\n\n\n

The first step is to initialize the Capacitor Plugin builder in your terminal and go through the prompts. If you plan on publishing your plugin, be sure to make these values unique<\/a>:<\/p>\n\n\n\n

npm init @capacitor\/plugin<\/code><\/pre>\n\n\n\n
\"\"