CarPlay and Android Auto

[D-Marc1]

Plugin Request

Name: Capacitor CarPlay Android Auto (alternatively, just Capacitor Car)
Package: @capacitor-community/carplay-android-auto (alternatively, just @capacitor-community/car)

Platform(s)

iOS and Android

Existing Solutions

React Native has a nice CarPlay plugin and separate Android Auto plugin (with vastly different APIs). Would love to have a single plugin with both for CapacitorJS. The only existing solutions currently are to either develop natively or with React Native.

Description

Use both iOS CarPlay and Android Auto, which greatly improve the experience for music and map -based apps for example.

[antonioberetini]

This is absolutely needed

[piotrpazola]

Agreed, if anyone could help, it'll be great

[mgscox]

There's an abandoned cordova plugin, which does work as far as it's been implemented
https://github.com/mike-nelson/cordova-carplay-android-auto

I've used it under Cordova, and can confirm it works for iOS.

[armenr]

I came here to say "+1" - I really need this plugin. I'd literally donate money (not kidding) to the Capacitor team if it meant we could get this feature/request delivered.

In the meantime, in addition to @mgscox REALLY AWESOME and REALLY USEFUL link, this also looks promising (if you're on capacitor v2):

https://capacitorjs.com/docs/v2/cordova/using-cordova-plugins

I'm going to attempt a small boilerplate/example repo where I spin up a capacitor2 + Vue3 (TypeScript) app & successfully build the project for iOS and Android (and get it working in the car - luckily my car does CarPlay and Android Auto, and I've got both types of devices sitting around the house).

I'll post back with working code if I get the job done!

[antonioberetini]

Why capacitor 2 when v3 is out already? Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Armen Rostamian ***@***.***> Sent: Friday, May 28, 2021 6:51:19 PM To: capacitor-community/proposals ***@***.***> Cc: Tony Beretini ***@***.***>; Comment ***@***.***> Subject: Re: [capacitor-community/proposals] CarPlay and Android Auto (#94) In addition to @mgscox<https://github.com/mgscox> REALLY AWESOME and REALLY USEFUL link, this also looks promising (if you're on capacitor v2): https://capacitorjs.com/docs/v2/cordova/using-cordova-plugins I'm going to attempt a small boilerplate/example repo where I spin up a capacitor2 + Vue3 app & successfully build the project for iOS and Android (and get it working in the car - luckily my car does CarPlay and Android Auto, and I've got both types of devices sitting around the house). I'll post back with working code if I get the job done! — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#94 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APUUMIDJSVRY4MTKDMJWBZTTQAT7PANCNFSM4XKBL7MA>.

[advplyr]

When launching an android auto app from the head unit the capacitor app is never mounted.

Without communication between the native android auto activity and your capacitor app, a plugin would be useless.

In testing this out on the demo head unit, if you manually open your app before launching it on the head unit, then you can communicate, but it's not a viable solution.

[josexs]

something new?

[armenr]

Back to +1 this again.

[paliuca]

have anyone found a solution for this ? even a paid one.
Thanks

[iskizreal]

Yes, such a plugin would be great!

[JonasBeking]

Currently working on an android-automotive specific solution. Accessing CarProperties and UxRestrictions is already working great with ionic-angular. Problem is Capacitor is likely not gonna work for production, as Google does not like Webviews being used as the main-app for Android Automotive and Android Auto.

[TheHolyRoger]

Having also worked on this myself, it's a no-go for Capacitor. As @JonasBeking said android auto does not allow webviews.

What I've done myself is write a cordova plugin for my app, with another app inside. You need to pretty much create a whole new app in java with mediabrowser then let capacitor wrap it in, to use it in android auto.

[fromage9747]

@TheHolyRoger Could you provide a bit more detail around this? I have built the below app: https://www.reddit.com/r/llamafin/ and have been perusing around regarding Android Auto and Car Play. As I don't have such capable Devices, I initially thought it was just a normal app with the view for those resolutions. After researching a bit more, I discovered that it's a mirroring/cast type of functionality.

I have come to the following conclusions. Scrap my current app and rewrite in Flutter as Flutter has Android Auto and Car Play functionality, or try and build a custom plugin that has its own UI that can cast to Android Auto and Car Play. Both will require learning some skills.

However, from what you have stated, sounds a bit easier. As if you are creating your own custom wrapper and chucking your app inside it in order to be able to make use of Car Play and Android Auto?

[TheHolyRoger]

@fromage9747 I've never used flutter so can't comment on that, same for carplay I'm afraid

Regarding android auto, I've got quite a bit of experience with it now :)

Android have fairly successfully discouraged any custom UI in android auto, if you attempt to use a webview (required for capacitor) you'll hugely limit the functionality of your app. I saw something that someone worked on here https://github.com/daspook99/WebViewAuto but didn't bother going down that path.

To get the best android auto experience, it's best to do everything "their way" which means the SDK handles the UI entirely.

E.g. for my media app, I'm using all the standard android components for the browser, player etc

This means I have two independent apps with some shared code, config/preferences between the capacitor app and the android auto app

There is no way to integrate capacitor without using your own webview, and then you're essentially breaking android auto. There's no guarantee how long it would work for, if it does even still work today :)

I include my android auto app as a cordova plugin for my project, which means it's still nicely put together by gradle etc.

Maybe flutter is worth looking at, but I am 99% sure it will still discourage custom UI in android auto

[fromage9747]

@TheHolyRoger

Since my previous message, I have been working on it and have been successful.

I can play audio through Android Auto, and it all updates in my app and vice versa.

Still got lots more to do but everything I have found online stating that it can't be done, well, I am doing it and it works. 🙂

[TheHolyRoger]

@fromage9747 nice sounds good :) is that with flutter or capacitor?

[fromage9747]

@TheHolyRoger With capacitor. I wasn't intending to rewrite my entire app just for this functionality, so I just dug deeper and found a way to make it work.

[TheHolyRoger]

@fromage9747 well done :) hopefully they don't break it if you're using a webview. How does it work with the recent AA versions that do the framed layouts?

If you're looking for a dev I'm available for hire ;)

My cordova plugin is here https://github.com/TheHolyRogerCoin/RogerRadioApp/tree/master/lib-cordova/cordova-plugin-rogerradio-auto_230829

But probably not helpful to you if you're full-capacitor

[TheHolyRoger]

@fromage9747 :)

[fromage9747]

@TheHolyRoger Without giving away too much as what I have learnt is that the Android dev community is very cagey and that they should be with the horrendous state of the Android documentation. With the amount of frustration in trying to get anything to work, nobody would want to give away their secrets 😀

It's all using the Android documentation with creating the media browser service as well as a Media session for creating the player on the AA side. Then I just use capacitor to communicate data and events between the web view and the native code.

This allows the AA to control the web view and the web view to control the AA. So when I click next or play on AA, it clicks next in the web view and vice versa.

[TheHolyRoger]

@fromage9747 right I've got you, it sounds like we're doing similar things but I didn't need actual communication with the capacitor app since my users will only use one at a time - they do use shared preferences though.

I get you about being cagey :) all my code is open source in that repo though ;)

[fromage9747]

@TheHolyRoger Whilst researching all of this and trying to figure out how to implement it, I did also come across the same thing as you have done with having two separate apps that don't talk to each other.

Jellyfin Android Auto is like that, and one user encountered an issue when something wasn't playing, and he tried to then sort it out on the phone side, but that just ended up playing the track through his phone instead of updating it in AA.

Now, Plexamp, which I have used as my inspiration for my app is written in React Native and apparently has it all working as it should be with two-way communication, so I had to have the same functionality. Especially as I have had users state that they will drop Plex if I can bring AA into my app. Wouldn't be worth it if it couldn't do the same thing as Plexamp.

PITA to get working, but it's working. Now I am just busy with populating the views for each tab to navigate the music library.

Coming along, one Java fight at a time.

I've learnt a lot and have ended up fixing other areas of my app in the process with native and created two other custom plugins in the process.

[TheHolyRoger]

@fromage9747 ha a very similar learning experience :) I've not used plexamp, i'm familiar with plex though - so is your app an alternative frontend for plex then?

Custom plugins are definitely the way to go :) I might add 2 way communication at some point, i should be able to do it via cordova quite easily as that's my main framework now, not doing a whole lot with capacitor tbh

I think we're pretty much doing the same thing except you went capacitor and I went cordova and didn't quite tidy up all the loose ends

[fromage9747]

@TheHolyRoger I dropped Plex earlier this year as I wasn't happy with the unnecessary amount of metadata consuming my SSD drive. Jellyfin will use local metadata, which is great. In migrating over, I took a look at the vast array of music player alternatives that the Jellyfin community had created, and they all had something missing from the Plexamp experience. This is when I thought I should just create my own.

I even had the co-founder of Plex, Elan Feingold, comment on my post on Reddit. 🤣 I didn't know who he was at the time.

Yeah, custom plugins are definitely the way to go. As I am getting more and more comfortable with Java, things get easier. I still don't like Java very much. Extremely comfortable with Typescript.

It all depends on the need. If your users don't need it, then no need.

At least it can be put to rest that this can't be done as it can be done. 😆

[TheHolyRoger]

@fromage9747 interesting :) maybe I should check out jellyfin and give your app a spin :)

messaged you via reddit :)

[fromage9747]

Sup chaps. Nothing is impossible. Built a custom plugin for my app and have Android Auto working with ionic/capacitor.

Check it out here for further details:
https://www.reddit.com/r/llamafin/comments/173kexf/android_auto_is_here_version_182_released_get_it/

[KClough]

@fromage9747 is your capacitor plugin for Android Auto open source?

[fromage9747]

@KClough Sorry mate, not open source. It's really something that is specific to the direct usage. Difficult to create an all-in-one plugin that can be easily used elsewhere. Mine needs some work as well as I have learnt new things along the way, but unfortunately work takes precedence and I haven't had much time to work on my project.