S obzirom da je sredina ljeta i da su godišnji odmori u punom jeku što znači i manje zanimanja za ovakve teme danas idemo na jednu poprilično jednostavnu, a istovremeno korisnu.
Ako se odlučite raditi jednostavnu audio/video stram aplikaciju to možete učiniti pomoću Ionica i njegovog Ionic Native plugina pod nazivom Streaming Media.
Postavljanje aplikacije
Prvo ćemo kreirati novi Ionic projekt i pokrenuti ga
|
1 2 |
$ ionic start Ionic3MediaStream blank --v2 $ cd Ionic3MediaStream |
Sada možemo instalirati Streaming Media plugin
|
1 2 |
$ ionic cordova plugin add cordova-plugin-streaming-media $ npm install --save @ionic-native/streaming-media |
I naravno, kao što je slučaj sa bilo kojim drugim Ionic Native pluginom, trebamo ga dodati u app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { AppRate } from '@ionic-native/app-rate'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { StreamingMedia } from '@ionic-native/streaming-media'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, StreamingMedia ] }) export class AppModule {} |
Implementacija
Kreirat ćemo jednostavan ekran koji služi za prikaz kontrola za audio/video stream. Ovdje nema ništa posebno osim dva gumba koji služe za pokretanje audio tj. video streama.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ion-header> <ion-navbar> <ion-title> Ionic 3 - Media Streaming </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button (click)="startVideo()" ion-button icon-end> Start Video <ion-icon name="play"></ion-icon> </button> <button (click)="startAudio()" ion-button color="secondary" icon-end> Start Audio <ion-icon name="musical-notes"></ion-icon> </button> </ion-content> |
Funkcionalnost se nalazi unutar unutar home.ts.
Pokretanjem startVideo() dobijemo sljedeće
Pokretanjem startAudio() dobijemo sljedeće ovisno o tome jesmo li odabrali bgImage ili bgColor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { StreamingMedia, StreamingVideoOptions, StreamingAudioOptions } from '@ionic-native/streaming-media'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public _navCtrl: NavController, private _streamingMedia: StreamingMedia) { } startVideo() { let options: StreamingVideoOptions = { successCallback: () => { console.log('Finished Video') }, errorCallback: (e) => { console.log('Error: ', e) }, orientation: 'landscape' //portrait }; this._streamingMedia.playVideo('https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', options); } startAudio() { let options: StreamingAudioOptions = { bgImage: 'https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Sound.png', successCallback: () => { console.log('Finished Audio') }, errorCallback: (e) => { console.log('Error: ', e) }, initFullscreen: false // iOS only! }; this._streamingMedia.playAudio('https://traffic.libsyn.com/nineteennocturne/19Noc_MulberryHill.mp3', options); } |
Ovdje imamo dvije funkcije
startVideo() i
startAudio() od kojih se svaka sastoji od objekta
options.
Objekt
options se može sastojati od sljedećih mogućnosti iz kojih je moguće vidjeti koliko je zapravo ovaj plugin ograničenim mogućnostima.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
export interface StreamingVideoOptions { successCallback?: Function; errorCallback?: Function; orientation?: string; } export interface StreamingAudioOptions { bgColor?: string; bgImage?: string; bgImageScale?: string; initFullscreen?: boolean; successCallback?: Function; errorCallback?: Function; } |
Zaključak
I to je to! Napravili ste svoju prvu Ionic audio/video stream mobilnu aplikaciju. Još jednom napominjem, u slučaju da trebate kompleksnije rješenje možda je bolje da tražite dalje jer Streaming Media plugin služi za izradu jednostavnih audio/video stream aplikacija.
