Streaming Media - Object(...) is not a function

#1

Hi.
I already added “/ngx” to related imports but I still get ;

TypeError: Object(...) is not a function
    at StreamingMedia.playVideo (http://localhost:8100/build/vendor.js:82539:147)
    at HomePage.webpackJsonp.262.HomePage.play (http://localhost:8100/build/main.js:67:29)
    at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:37:27)
    at handleEvent (http://localhost:8100/build/vendor.js:13914:155)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15423:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:15010:12)
    at dispatchEvent (http://localhost:8100/build/vendor.js:10329:25)
    at http://localhost:8100/build/vendor.js:10954:38
    at HTMLButtonElement.<anonymous> (http://localhost:8100/build/vendor.js:40350:53)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Stream Media
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button (click) = "play()">Play</button>
</ion-content>

home.ts

import { Component } from '@angular/core';
import {StreamingMedia,StreamingVideoOptions} from "@ionic-native/streaming-media/ngx";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(private streamingMedia:StreamingMedia) {

  }
  play(){
    let options: StreamingVideoOptions = {
      successCallback: () => { console.log('Video played') },
      errorCallback: (e) => { console.log('Error streaming') },
      orientation: 'landscape',
      shouldAutoClose: true,
      controls: false
    };

    this.streamingMedia.playVideo('https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4', options);
  }
}

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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import {StreamingMedia} from "@ionic-native/streaming-media/ngx";

@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 {}

Thanks.

#2

In your package.json, all ionic-native dependencies are up-to-date?

#3

Also there is a mistake regarding other libs in your code, these aren’t using /ngx

#4

The libraries you mentioned are not using /ngx, that’s why I didn’t add.

Also,

{
  "name": "LiveStream",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic-native/streaming-media": "^5.2.0",
    "@ionic/storage": "2.2.0",
    "@ngx-translate/core": "^9.1.1",
    "cordova-android": "7.1.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^3.1.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-streaming-media": "2.2.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic": "^4.10.3",
    "ionic-angular": "3.9.3",
    "ionicons": "3.0.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-streaming-media": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Looks are up to date, isn’t it?

#5

No

"@ionic-native/core": "~4.18.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic-native/streaming-media": "^5.2.0",

4.18.0 = not good
5.2.0 = good

always sync the same version across all your ionic-native libs

1 Like
#6

Thanks! I updated the packages which you mentioned then the problem is solved.

1 Like