Tauri Plugin: Native Video Player
A Tauri v2 plugin that provides a native video player, launched from your webview. Ideal for playing fullscreen video streams (like M3U8) on mobile devices without the overhead or limitations of a web-based player.
π€ Why This Plugin?
Web-based video players are fantastic, but they can struggle on mobile, especially with certain stream formats or when dealing with performance-intensive tasks. This plugin solves that by handing off the video playback to the operating system's native player.
On Android, this means launching a new, fullscreen Activity powered by androidx.media3 (the successor to ExoPlayer), the same powerful media engine used by apps like YouTube and Netflix.
The core benefit is performance and stability. It also ensures a clean separation of concerns and robust lifecycle managementβthe stream is guaranteed to terminate when the user switches apps, a critical feature for single-stream services.
β¨ Features
- β
Native Android Playback: Utilizes a fullscreen
Activitywithandroidx.media3(ExoPlayer). - β
Simple API: A single
playVideo(url)function to launch the player. - β HLS/M3U8 Support: Built to handle streaming playlists out of the box.
- β Robust Lifecycle Management: Automatically stops and releases the player when the user navigates away (e.g., switches app, goes to home screen), ensuring stream connections are properly terminated.
- β Tauri v2 Ready: Built from the ground up for the modern Tauri v2 architecture, including the new permission system.
π¦ Compatibility
This plugin is currently in its early stages and supports:
| Platform | Supported |
|---|---|
| Android | β |
| iOS | β |
| Windows | β |
| macOS | β |
| Linux | β |
This plugin is only compatible with Tauri v2.
π οΈ Installation
Integrating the plugin into your Tauri v2 application involves four steps:
1. Install the JavaScript Package:
# Using npm
# Using yarn
2. Add the Rust Crate:
Add the crate to your app's src-tauri/Cargo.toml dependencies:
[]
# ... other dependencies
= "0.1.0"
3. Register the Plugin:
In your app's src-tauri/src/lib.rs (or main.rs), register the plugin with the Tauri builder:
4. Configure Permissions:
The plugin requires permission to be called from the frontend. Add "videoplayer:default" to your app's capabilities file at src-tauri/capabilities/default.json:
Note: If you're adding the plugin to a new project, your IDE might show an error on this line initially. Run
yarn tauri devonce to force Tauri to regenerate its permission schemas, and the error will disappear.
π Usage
Using the plugin in your frontend code is straightforward. Import the playVideo function and call it with a valid video URL.
import { playVideo } from 'tauri-plugin-videoplayer-api';
function MyComponent() {
const handlePlayButtonClick = () => {
const m3u8_url = 'https://your-stream-provider.com/stream.m3u8';
console.log(`Requesting native playback for: ${m3u8_url}`);
// This will launch the native fullscreen player on Android
playVideo(m3u8_url);
};
return (
<button onClick={handlePlayButtonClick}>
Play Video Natively
</button>
);
}
On Android, this will launch the fullscreen native player. The user can return to your app by using the standard system back button.