Presentation API Capacitor Plugin

This Capacitor plugin provides seamless integration with the Presentation API, enabling developers to display content on secondary screens, such as projectors or external displays, directly from their mobile and web applications.

Features

• Multiple Screen Support: Easily present content on external displays or projectors.
• Customizable Content: Display custom HTML, videos, or other types of media.
• Cross-Platform Compatibility: Works on Android and web platforms.
• Simple Integration: Easily integrate with Capacitor and your existing project.
• Real-Time Updates: Send real-time content updates to the external screen.

Install

| Capacitor Version |Presentation Version| | ------------- | ----------------------------------------------------------- | | Capacitor v4 | 0.0.5| | Capacitor v6 | 0.1.x| | Capacitor v7 | 0.2.x|

npm install presentation-capacitor
npx cap sync

Example Video (Example App included in repo)

https://github.com/user-attachments/assets/a2dbb1f7-6075-4285-885d-39136bc90d9b

API

• open(...)
• sendMessage(...)
• terminate()
• getDeviceInfo()
• addListener('onSuccessLoadUrl', ...)
• addListener('onFailLoadUrl', ...)
• addListener('onMessage', ...)
• getDisplays()
• Type Aliases

open(...)

open(options: OpenOptions) => Promise<OpenResponse>

| Param | Type | | ------------- | --------------------------------------------------- | | options | OpenOptions |

Returns: Promise<OpenResponse>

sendMessage(...)

sendMessage<T>(options: { data: T; }) => Promise<T>

| Param | Type | | ------------- | ------------------------- | | options | { data: T; } |

Returns: Promise<T>

terminate()

terminate() => Promise<void>

getDeviceInfo()

getDeviceInfo() => Promise<{ name: string; osVersion: string; serialNumber: string; }>

Returns: Promise<{ name: string; osVersion: string; serialNumber: string; }>

addListener('onSuccessLoadUrl', ...)

addListener(eventName: 'onSuccessLoadUrl', listenerFunc: (data: any) => void) => any

| Param | Type | Description | | ------------------ | ----------------------------------- | ------------------------------------------------------- | | eventName | 'onSuccessLoadUrl' | | | listenerFunc | (data: any) => void | <br> Works only if type html of url or if browser |

Returns: any

addListener('onFailLoadUrl', ...)

addListener(eventName: 'onFailLoadUrl', listenerFunc: (data: any) => void) => any

| Param | Type | | ------------------ | ----------------------------------- | | eventName | 'onFailLoadUrl' | | listenerFunc | (data: any) => void |

Returns: any

addListener('onMessage', ...)

addListener(eventName: 'onMessage', listenerFunc: (data: any) => void) => any

| Param | Type | | ------------------ | ----------------------------------- | | eventName | 'onMessage' | | listenerFunc | (data: any) => void |

Returns: any

getDisplays()

getDisplays() => Promise<{ displays: number; }>

Returns: Promise<{ displays: number; }>

Type Aliases

OpenResponse

{ success?: any; error?: any; result?: any }

OpenOptions

{} & ( | { type: 'url'; url: string; } | { type: 'video'; videoOptions: { videoUrl: string; showControls?: boolean; }; } | { type: 'html'; html: string; } )