Ionic 3 aplikacija za audio i video stream

Ionic 3 aplikacija za audio i video stream

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

$ ionic start Ionic3MediaStream blank --v2
$ cd Ionic3MediaStream

Sada možemo instalirati Streaming Media plugin

$ 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

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.

Ionic 3 aplikacija za audio i video stream

<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

Ionic 3 aplikacija za audio i video stream

Pokretanjem startAudio() dobijemo sljedeće ovisno o tome jesmo li odabrali bgImage ili bgColor.

Ionic 3 aplikacija za audio i video stream

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.

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.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *