presentation-capacitor

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

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()
• 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>(message: T) => Promise<T>

Param	Type
message	T

Returns: Promise<T>

terminate()

terminate() => Promise<void>

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; } )