feat: VLC streaming player supporting RTSP, RTMP and other protocols

README.md

@@ -24,6 +24,7 @@
 - [@nstudio/nativescript-plaid](packages/nativescript-plaid/README.md)
 - [@nstudio/nativescript-qr](packages/nativescript-qr/README.md)
 - [@nstudio/nativescript-tracking-transparency](packages/nativescript-tracking-transparency/README.md)
+- [@nstudio/nativescript-vlc-player](packages/nativescript-vlc-player/README.md)
 - [@nstudio/nativescript-walletconnect](packages/nativescript-walletconnect/README.md)
 - [@nstudio/nativescript-web-server](packages/nativescript-web-server/README.md)
 

apps/demo-angular/package.json

@@ -2,7 +2,7 @@
 	"main": "./src/main.ts",
 	"dependencies": {
 		"@nativescript/core": "file:../../node_modules/@nativescript/core",
-		"@nstudio/nativescript-loading-indicator": "file:../../dist/packages/nativescript-loading-indicator",
+		"@nstudio/nativescript-vlc-player": "file:../../dist/packages/nativescript-vlc-player",
 		"@nstudio/nativescript-airship": "file:../../dist/packages/nativescript-airship",
 		"@nstudio/nativescript-airship-adm": "file:../../dist/packages/nativescript-airship-adm",
 		"@nstudio/nativescript-airship-fcm": "file:../../dist/packages/nativescript-airship-fcm",
@@ -23,6 +23,7 @@
 		"@nstudio/nativescript-freshchat": "file:../../dist/packages/nativescript-freshchat",
 		"@nstudio/nativescript-input-mask": "file:../../dist/packages/nativescript-input-mask",
 		"@nstudio/nativescript-intercom": "file:../../dist/packages/nativescript-intercom",
+		"@nstudio/nativescript-loading-indicator": "file:../../dist/packages/nativescript-loading-indicator",
 		"@nstudio/nativescript-onfido": "file:../../dist/packages/nativescript-onfido",
 		"@nstudio/nativescript-persona": "file:../../dist/packages/nativescript-persona",
 		"@nstudio/nativescript-plaid": "file:../../dist/packages/nativescript-plaid",

apps/demo-angular/src/app-routing.module.ts

@@ -4,36 +4,37 @@ import { NativeScriptRouterModule } from '@nativescript/angular';
 import { HomeComponent } from './home.component';
 
 const routes: Routes = [
-   { path: '', redirectTo: '/home', pathMatch: 'full' },
-   { path: 'home', component: HomeComponent },
-	{ path: 'nativescript-airship', loadChildren: () => import('./plugin-demos/nativescript-airship.module').then(m => m.NativescriptAirshipModule) },
-	{ path: 'nativescript-airship-adm', loadChildren: () => import('./plugin-demos/nativescript-airship-adm.module').then(m => m.NativescriptAirshipAdmModule) },
-	{ path: 'nativescript-airship-fcm', loadChildren: () => import('./plugin-demos/nativescript-airship-fcm.module').then(m => m.NativescriptAirshipFcmModule) },
-	{ path: 'nativescript-airship-hms', loadChildren: () => import('./plugin-demos/nativescript-airship-hms.module').then(m => m.NativescriptAirshipHmsModule) },
-	{ path: 'nativescript-appcues', loadChildren: () => import('./plugin-demos/nativescript-appcues.module').then(m => m.NativescriptAppcuesModule) },
-	{ path: 'nativescript-aptabase', loadChildren: () => import('./plugin-demos/nativescript-aptabase.module').then(m => m.NativescriptAptabaseModule) },
-	{ path: 'nativescript-barcodescanner', loadChildren: () => import('./plugin-demos/nativescript-barcodescanner.module').then(m => m.NativescriptBarcodescannerModule) },
-	{ path: 'nativescript-blur', loadChildren: () => import('./plugin-demos/nativescript-blur.module').then(m => m.NativescriptBlurModule) },
-	{ path: 'nativescript-camera-plus', loadChildren: () => import('./plugin-demos/nativescript-camera-plus.module').then(m => m.NativescriptCameraPlusModule) },
-	{ path: 'nativescript-cardview', loadChildren: () => import('./plugin-demos/nativescript-cardview.module').then(m => m.NativescriptCardviewModule) },
-	{ path: 'nativescript-carousel', loadChildren: () => import('./plugin-demos/nativescript-carousel.module').then(m => m.NativescriptCarouselModule) },
-	{ path: 'nativescript-checkbox', loadChildren: () => import('./plugin-demos/nativescript-checkbox.module').then(m => m.NativescriptCheckboxModule) },
-	{ path: 'nativescript-dynatrace', loadChildren: () => import('./plugin-demos/nativescript-dynatrace.module').then(m => m.NativescriptDynatraceModule) },
-	{ path: 'nativescript-embrace', loadChildren: () => import('./plugin-demos/nativescript-embrace.module').then(m => m.NativescriptEmbraceModule) },
-	{ path: 'nativescript-exoplayer', loadChildren: () => import('./plugin-demos/nativescript-exoplayer.module').then(m => m.NativescriptExoplayerModule) },
-	{ path: 'nativescript-fancyalert', loadChildren: () => import('./plugin-demos/nativescript-fancyalert.module').then(m => m.NativescriptFancyalertModule) },
-	{ path: 'nativescript-filterable-listpicker', loadChildren: () => import('./plugin-demos/nativescript-filterable-listpicker.module').then(m => m.NativescriptFilterableListpickerModule) },
-	{ path: 'nativescript-freshchat', loadChildren: () => import('./plugin-demos/nativescript-freshchat.module').then(m => m.NativescriptFreshchatModule) },
-	{ path: 'nativescript-input-mask', loadChildren: () => import('./plugin-demos/nativescript-input-mask.module').then(m => m.NativescriptInputMaskModule) },
-	{ path: 'nativescript-intercom', loadChildren: () => import('./plugin-demos/nativescript-intercom.module').then(m => m.NativescriptIntercomModule) },
-	{ path: 'nativescript-loading-indicator', loadChildren: () => import('./plugin-demos/nativescript-loading-indicator.module').then(m => m.NativescriptLoadingIndicatorModule) },
-	{ path: 'nativescript-onfido', loadChildren: () => import('./plugin-demos/nativescript-onfido.module').then(m => m.NativescriptOnfidoModule) },
-	{ path: 'nativescript-persona', loadChildren: () => import('./plugin-demos/nativescript-persona.module').then(m => m.NativescriptPersonaModule) },
-	{ path: 'nativescript-plaid', loadChildren: () => import('./plugin-demos/nativescript-plaid.module').then(m => m.NativescriptPlaidModule) },
-	{ path: 'nativescript-qr', loadChildren: () => import('./plugin-demos/nativescript-qr.module').then(m => m.NativescriptQrModule) },
-	{ path: 'nativescript-tracking-transparency', loadChildren: () => import('./plugin-demos/nativescript-tracking-transparency.module').then(m => m.NativescriptTrackingTransparencyModule) },
-	{ path: 'nativescript-walletconnect', loadChildren: () => import('./plugin-demos/nativescript-walletconnect.module').then(m => m.NativescriptWalletconnectModule) },
-	{ path: 'nativescript-web-server', loadChildren: () => import('./plugin-demos/nativescript-web-server.module').then(m => m.NativescriptWebServerModule) }
+	{ path: '', redirectTo: '/home', pathMatch: 'full' },
+	{ path: 'home', component: HomeComponent },
+	{ path: 'nativescript-airship', loadChildren: () => import('./plugin-demos/nativescript-airship.module').then((m) => m.NativescriptAirshipModule) },
+	{ path: 'nativescript-airship-adm', loadChildren: () => import('./plugin-demos/nativescript-airship-adm.module').then((m) => m.NativescriptAirshipAdmModule) },
+	{ path: 'nativescript-airship-fcm', loadChildren: () => import('./plugin-demos/nativescript-airship-fcm.module').then((m) => m.NativescriptAirshipFcmModule) },
+	{ path: 'nativescript-airship-hms', loadChildren: () => import('./plugin-demos/nativescript-airship-hms.module').then((m) => m.NativescriptAirshipHmsModule) },
+	{ path: 'nativescript-appcues', loadChildren: () => import('./plugin-demos/nativescript-appcues.module').then((m) => m.NativescriptAppcuesModule) },
+	{ path: 'nativescript-aptabase', loadChildren: () => import('./plugin-demos/nativescript-aptabase.module').then((m) => m.NativescriptAptabaseModule) },
+	{ path: 'nativescript-barcodescanner', loadChildren: () => import('./plugin-demos/nativescript-barcodescanner.module').then((m) => m.NativescriptBarcodescannerModule) },
+	{ path: 'nativescript-blur', loadChildren: () => import('./plugin-demos/nativescript-blur.module').then((m) => m.NativescriptBlurModule) },
+	{ path: 'nativescript-camera-plus', loadChildren: () => import('./plugin-demos/nativescript-camera-plus.module').then((m) => m.NativescriptCameraPlusModule) },
+	{ path: 'nativescript-cardview', loadChildren: () => import('./plugin-demos/nativescript-cardview.module').then((m) => m.NativescriptCardviewModule) },
+	{ path: 'nativescript-carousel', loadChildren: () => import('./plugin-demos/nativescript-carousel.module').then((m) => m.NativescriptCarouselModule) },
+	{ path: 'nativescript-checkbox', loadChildren: () => import('./plugin-demos/nativescript-checkbox.module').then((m) => m.NativescriptCheckboxModule) },
+	{ path: 'nativescript-dynatrace', loadChildren: () => import('./plugin-demos/nativescript-dynatrace.module').then((m) => m.NativescriptDynatraceModule) },
+	{ path: 'nativescript-embrace', loadChildren: () => import('./plugin-demos/nativescript-embrace.module').then((m) => m.NativescriptEmbraceModule) },
+	{ path: 'nativescript-exoplayer', loadChildren: () => import('./plugin-demos/nativescript-exoplayer.module').then((m) => m.NativescriptExoplayerModule) },
+	{ path: 'nativescript-fancyalert', loadChildren: () => import('./plugin-demos/nativescript-fancyalert.module').then((m) => m.NativescriptFancyalertModule) },
+	{ path: 'nativescript-filterable-listpicker', loadChildren: () => import('./plugin-demos/nativescript-filterable-listpicker.module').then((m) => m.NativescriptFilterableListpickerModule) },
+	{ path: 'nativescript-freshchat', loadChildren: () => import('./plugin-demos/nativescript-freshchat.module').then((m) => m.NativescriptFreshchatModule) },
+	{ path: 'nativescript-input-mask', loadChildren: () => import('./plugin-demos/nativescript-input-mask.module').then((m) => m.NativescriptInputMaskModule) },
+	{ path: 'nativescript-intercom', loadChildren: () => import('./plugin-demos/nativescript-intercom.module').then((m) => m.NativescriptIntercomModule) },
+	{ path: 'nativescript-loading-indicator', loadChildren: () => import('./plugin-demos/nativescript-loading-indicator.module').then((m) => m.NativescriptLoadingIndicatorModule) },
+	{ path: 'nativescript-onfido', loadChildren: () => import('./plugin-demos/nativescript-onfido.module').then((m) => m.NativescriptOnfidoModule) },
+	{ path: 'nativescript-persona', loadChildren: () => import('./plugin-demos/nativescript-persona.module').then((m) => m.NativescriptPersonaModule) },
+	{ path: 'nativescript-plaid', loadChildren: () => import('./plugin-demos/nativescript-plaid.module').then((m) => m.NativescriptPlaidModule) },
+	{ path: 'nativescript-qr', loadChildren: () => import('./plugin-demos/nativescript-qr.module').then((m) => m.NativescriptQrModule) },
+	{ path: 'nativescript-tracking-transparency', loadChildren: () => import('./plugin-demos/nativescript-tracking-transparency.module').then((m) => m.NativescriptTrackingTransparencyModule) },
+	{ path: 'nativescript-vlc-player', loadChildren: () => import('./plugin-demos/nativescript-vlc-player.module').then((m) => m.NativescriptVlcPlayerModule) },
+	{ path: 'nativescript-walletconnect', loadChildren: () => import('./plugin-demos/nativescript-walletconnect.module').then((m) => m.NativescriptWalletconnectModule) },
+	{ path: 'nativescript-web-server', loadChildren: () => import('./plugin-demos/nativescript-web-server.module').then((m) => m.NativescriptWebServerModule) },
 ];
 
 @NgModule({

apps/demo-angular/src/home.component.ts

@@ -6,89 +6,92 @@ import { Component } from '@angular/core';
 })
 export class HomeComponent {
 	demos = [
-	{
-		name: 'nativescript-airship'
-	},
-	{
-		name: 'nativescript-airship-adm'
-	},
-	{
-		name: 'nativescript-airship-fcm'
-	},
-	{
-		name: 'nativescript-airship-hms'
-	},
-	{
-		name: 'nativescript-appcues'
-	},
-	{
-		name: 'nativescript-aptabase'
-	},
-	{
-		name: 'nativescript-barcodescanner'
-	},
-	{
-		name: 'nativescript-blur'
-	},
-	{
-		name: 'nativescript-camera-plus'
-	},
-	{
-		name: 'nativescript-cardview'
-	},
-	{
-		name: 'nativescript-carousel'
-	},
-	{
-		name: 'nativescript-checkbox'
-	},
-	{
-		name: 'nativescript-dynatrace'
-	},
-	{
-		name: 'nativescript-embrace'
-	},
-	{
-		name: 'nativescript-exoplayer'
-	},
-	{
-		name: 'nativescript-fancyalert'
-	},
-	{
-		name: 'nativescript-filterable-listpicker'
-	},
-	{
-		name: 'nativescript-freshchat'
-	},
-	{
-		name: 'nativescript-input-mask'
-	},
-	{
-		name: 'nativescript-intercom'
-	},
-	{
-		name: 'nativescript-loading-indicator'
-	},
-	{
-		name: 'nativescript-onfido'
-	},
-	{
-		name: 'nativescript-persona'
-	},
-	{
-		name: 'nativescript-plaid'
-	},
-	{
-		name: 'nativescript-qr'
-	},
-	{
-		name: 'nativescript-tracking-transparency'
-	},
-	{
-		name: 'nativescript-walletconnect'
-	},
-	{
-		name: 'nativescript-web-server'
-	}
-];
-}
+		{
+			name: 'nativescript-airship',
+		},
+		{
+			name: 'nativescript-airship-adm',
+		},
+		{
+			name: 'nativescript-airship-fcm',
+		},
+		{
+			name: 'nativescript-airship-hms',
+		},
+		{
+			name: 'nativescript-appcues',
+		},
+		{
+			name: 'nativescript-aptabase',
+		},
+		{
+			name: 'nativescript-barcodescanner',
+		},
+		{
+			name: 'nativescript-blur',
+		},
+		{
+			name: 'nativescript-camera-plus',
+		},
+		{
+			name: 'nativescript-cardview',
+		},
+		{
+			name: 'nativescript-carousel',
+		},
+		{
+			name: 'nativescript-checkbox',
+		},
+		{
+			name: 'nativescript-dynatrace',
+		},
+		{
+			name: 'nativescript-embrace',
+		},
+		{
+			name: 'nativescript-exoplayer',
+		},
+		{
+			name: 'nativescript-fancyalert',
+		},
+		{
+			name: 'nativescript-filterable-listpicker',
+		},
+		{
+			name: 'nativescript-freshchat',
+		},
+		{
+			name: 'nativescript-input-mask',
+		},
+		{
+			name: 'nativescript-intercom',
+		},
+		{
+			name: 'nativescript-loading-indicator',
+		},
+		{
+			name: 'nativescript-onfido',
+		},
+		{
+			name: 'nativescript-persona',
+		},
+		{
+			name: 'nativescript-plaid',
+		},
+		{
+			name: 'nativescript-qr',
+		},
+		{
+			name: 'nativescript-tracking-transparency',
+		},
+		{
+			name: 'nativescript-vlc-player',
+		},
+		{
+			name: 'nativescript-walletconnect',
+		},
+		{
+			name: 'nativescript-web-server',
+		},
+	];
+}

apps/demo-angular/src/plugin-demos/nativescript-vlc-player.component.html

@@ -0,0 +1,8 @@
+<ActionBar title="nativescript-vlc-player" class="action-bar"> </ActionBar>
+<StackLayout class="p-20">
+	<ScrollView class="h-full">
+		<StackLayout>
+			<Button text="Test nativescript-vlc-player" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
+		</StackLayout>
+	</ScrollView>
+</StackLayout>

apps/demo-angular/src/plugin-demos/nativescript-vlc-player.component.ts

@@ -0,0 +1,17 @@
+import { Component, NgZone } from '@angular/core';
+import { DemoSharedNativescriptVlcPlayer } from '@demo/shared';
+import {} from '@nstudio/nativescript-vlc-player';
+
+@Component({
+	selector: 'demo-nativescript-vlc-player',
+	templateUrl: 'nativescript-vlc-player.component.html',
+})
+export class NativescriptVlcPlayerComponent {
+	demoShared: DemoSharedNativescriptVlcPlayer;
+
+	constructor(private _ngZone: NgZone) {}
+
+	ngOnInit() {
+		this.demoShared = new DemoSharedNativescriptVlcPlayer();
+	}
+}

apps/demo-angular/src/plugin-demos/nativescript-vlc-player.module.ts

@@ -0,0 +1,10 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+import { NativescriptVlcPlayerComponent } from './nativescript-vlc-player.component';
+
+@NgModule({
+	imports: [NativeScriptCommonModule, NativeScriptRouterModule.forChild([{ path: '', component: NativescriptVlcPlayerComponent }])],
+	declarations: [NativescriptVlcPlayerComponent],
+	schemas: [NO_ERRORS_SCHEMA],
+})
+export class NativescriptVlcPlayerModule {}

apps/demo-angular/tsconfig.json

@@ -34,7 +34,8 @@
 			"@nstudio/nativescript-freshchat": ["../../packages/nativescript-freshchat/index.d.ts"],
 			"@nstudio/nativescript-persona": ["../../packages/nativescript-persona/index.d.ts"],
 			"@nstudio/nativescript-walletconnect": ["../../packages/nativescript-walletconnect/index.d.ts"],
-			"@nstudio/nativescript-web-server": ["../../packages/nativescript-web-server/index.d.ts"]
+			"@nstudio/nativescript-web-server": ["../../packages/nativescript-web-server/index.d.ts"],
+			"@nstudio/nativescript-vlc-player": ["../../packages/nativescript-vlc-player/index.d.ts"]
 		}
 	},
 	"files": ["./references.d.ts", "./src/main.ts", "./src/polyfills.ts"],

apps/demo/package.json

@@ -3,7 +3,7 @@
 	"description": "NativeScript Application",
 	"dependencies": {
 		"@nativescript/core": "file:../../node_modules/@nativescript/core",
-		"@nstudio/nativescript-loading-indicator": "file:../../packages/nativescript-loading-indicator",
+		"@nstudio/nativescript-vlc-player": "file:../../packages/nativescript-vlc-player",
 		"@nstudio/nativescript-airship": "file:../../packages/nativescript-airship",
 		"@nstudio/nativescript-airship-adm": "file:../../packages/nativescript-airship-adm",
 		"@nstudio/nativescript-airship-fcm": "file:../../packages/nativescript-airship-fcm",
@@ -24,6 +24,7 @@
 		"@nstudio/nativescript-freshchat": "file:../../packages/nativescript-freshchat",
 		"@nstudio/nativescript-input-mask": "file:../../packages/nativescript-input-mask",
 		"@nstudio/nativescript-intercom": "file:../../packages/nativescript-intercom",
+		"@nstudio/nativescript-loading-indicator": "file:../../packages/nativescript-loading-indicator",
 		"@nstudio/nativescript-onfido": "file:../../packages/nativescript-onfido",
 		"@nstudio/nativescript-persona": "file:../../packages/nativescript-persona",
 		"@nstudio/nativescript-plaid": "file:../../packages/nativescript-plaid",

apps/demo/src/main-page.xml

@@ -31,6 +31,7 @@
         <Button text="nativescript-plaid" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="nativescript-qr" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="nativescript-tracking-transparency" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
+        <Button text="nativescript-vlc-player" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="nativescript-walletconnect" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
         <Button text="nativescript-web-server" tap="{{ viewDemo }}" class="btn btn-primary view-demo"/>
       </StackLayout>

apps/demo/src/plugin-demos/nativescript-vlc-player.ts

@@ -0,0 +1,22 @@
+import { Observable, EventData, Page } from '@nativescript/core';
+import { DemoSharedNativescriptVlcPlayer } from '@demo/shared';
+import { VLCPlayer } from '@nstudio/nativescript-vlc-player';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new DemoModel();
+}
+
+export class DemoModel extends DemoSharedNativescriptVlcPlayer {
+	video: VLCPlayer;
+	loaded(args) {
+		this.video = args.object;
+	}
+	play() {
+		this.video.play();
+	}
+
+	pause() {
+		this.video.pause();
+	}
+}

apps/demo/src/plugin-demos/nativescript-vlc-player.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" xmlns:vlc="@nstudio/nativescript-vlc-player">
+  <Page.actionBar>
+    <ActionBar title="nativescript-vlc-player" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+  <GridLayout rows="*,auto,auto,*">
+    <vlc:VLCPlayer row="1" autoPlay="true" src="rtsp://807e9439d5ca.entrypoint.cloud.wowza.com:1935/app-rC94792j/068b9c9a_stream2" width="300" height="300" loaded="{{ loaded }}"></vlc:VLCPlayer>
+    <GridLayout row="2" columns="*,auto,auto,*" class="p-5">
+      <Button col="1" text="Play" tap="{{play}}" class="m-r-5" />
+      <Button col="2" text="Pause" tap="{{pause}}" class="m-l-5" />
+      </GridLayout>
+  </GridLayout>
+</Page>

apps/demo/tsconfig.json

@@ -36,7 +36,8 @@
 			"@nstudio/nativescript-freshchat": ["../../packages/nativescript-freshchat/index.d.ts"],
 			"@nstudio/nativescript-persona": ["../../packages/nativescript-persona/index.d.ts"],
 			"@nstudio/nativescript-walletconnect": ["../../packages/nativescript-walletconnect/index.d.ts"],
-			"@nstudio/nativescript-web-server": ["../../packages/nativescript-web-server/index.d.ts"]
+			"@nstudio/nativescript-web-server": ["../../packages/nativescript-web-server/index.d.ts"],
+			"@nstudio/nativescript-vlc-player": ["../../packages/nativescript-vlc-player/index.d.ts"]
 		}
 	}
 }