How to build a live video streaming app

Ionic Framework ionic-v3
1

HI. I am looking to build a live streaming app with Ionic 2. Any ideas?

2

Checkout players such as https://www.jwplayer.com/, it has full support to HTTP pseudo and HLS streaming, it also provides javascript APIs to control the player. Integration is like integrating any other JS library.

https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/
https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_reference/

1 Like
3

So, I want to share a few more points from what I have researched recently

  • HLS streaming generally works on both Android chrome and iOS safari，player such as jwplayer seems to handle it well, though it was reported that in lower version Android HLS has various issues, I tested with Android 5.0
  • HTTP pseudostreaming works too, I haven’t gotten much time to compare with HLS, I suppose HLS should work slightly better since it has dynamic streaming capability
  • MPEG DASH seems to be the future, but it wont be until apple decides to support it in safari, if the mobile app is native, there’re solutions though, like http://castlabs.com/products/video-player-sdk/

Hope it’s useful.

4

Hi itir,

Good to know you have tested jwplayer.

Have you by chance tested it on iOS ?

5

Hi itlr,

By any chance you successfully used jw-player in an Ionic 2 app?

From what I understood one should

  1. Download the js file to host it in the app, from jwplayer site.
  2. Import it in the app
  3. Make a wrapper component to consume that js.

I am failing in the first step, when I try to import the js file, jwplayer in not defined anywhere. I am trying to import the js in the index.html as a script tag.

If you successfully used jwplayer in Ionic 2 app I would appreciate if you would share with me at least high level of what I should do.

I appreciate any help, thanks in advance.

6

1- index.html

<script src="jwplayer/jwplayer.js"></script>
  <script>jwplayer.key="YOUR_KEY";</script>

2- mediaPlayerComponent.html (your component template)

<div id="myMediaDiv">
</div>

3- media-player-service.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';

declare var jwplayer: any;

@Injectable()
export class MediaPlayerService {

  constructor() {
  }

  loadMedia(media, isAutoPlay) {
    var cfg = {
      title: media.Title,
      mediaid: media.Id,
      "preload": "none",
      "autostart": false,
      "controls": true,
      "mute": false,
      "useAudioTag": true,
      "file": media.Location,
      "skin": "bekle",
      "stretching": "exactfit",
      "width": "100%",
      "volume": 50,
      "aspectratio": "16:9",
      image: "assets/logo.png",
      "primary": "html5",
      hlshtml: true,
      enableFullscreen: 'false',
      "logo": {
        hide: true
      }
    };

    return Promise.resolve(
      jwplayer("myMediaDiv").setup(cfg))
      .then(
      playerInstance => {

        if (isAutoPlay) {
          setTimeout(() => {
            return playerInstance.play();
          }, 500);
        }
      }
      );
  }

}
7

Live sram don’t have a public API to the actual version. Look at this link

Contus Vplay have a set of readymade framework for video streaming app & library functionalities.

8

HI. I am looking to build a live video streaming app with Ionic 3
. Any ideas?

9

Hey can you help me making the live video streaming for ionic application .
https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/
this link is for playing the video or audio url but i want to record . Can you please help me regarding this issue??

11

Not quite sure about Ionic 2 specifically but I think this guide will help you learn how to create a live streaming app.