How to use html_rtsp_player in angular app 6

[tungle2017]

I want use library html_rtsp_play in angular app 6 . Help me

[victorgrenke]

need integrate it, write me to email streamedian.player@gmail.com

[gaetancollaud]

I can't show you all my code but here is the most important piece. By the way I use the videojs plugin.

Hopefully it can help you. But it's not more complicated as integrating any js lib in typescript.

Before the component declaration

declare const videojs: any;
declare const streamedianPlayer: any;

/* tslint:disable:no-var-keyword */
var videojsPlayerIndex: number = 0;

(<any> videojs).getTech('Html5').registerSourceHandler({
    canHandleSource: (source: Source) => {
        if (source.type.indexOf('rtsp') !== -1) {
            return 'propably';
        }
        return '';
    },
    handleSource: (source: Source, tech: any) => {
        let socket = 'ws://youreproxyserver.com/ws-stream-proxy'; // todo define from somewhere
        let el = tech.el();
        let wsPlayer = streamedianPlayer(el, socket, source.src);
        return wsPlayer;
    },
}, 0);

In the component (component template is empty as I create the video element here, not sure it's the best things to do).

    protected initializePlayer(): Observable<any> {
        let subject: Subject<any> = new Subject();

        let options: PlayerOptions = {};
        options.controls = false;
        options.autoplay = false;
        options.preload = 'auto';
        // options.fluid = true;
        options.techOrder = ['html5'];
        options.children = ['mediaLoader', 'posterImage', 'textTrackDisplay', 'textTrackSettings'];
        options.plugins = {};

        const video = document.createElement('video');
        video.setAttribute('id', this.videojsPlayerId);
        video.setAttribute('class', 'videojs-player');
        this.elementRef.nativeElement.appendChild(video);

        this.videojsPlayer = videojs(video, options);

        this.videojsPlayer.ready(() => {
            this.zone.run(() => {
                this.log.debug('Videojs is ready');
                subject.next(this.videojsPlayer);
            });
        });

        this.log.trace('Creating videojs');
        return subject;
    }

[tungle2017]

thank you for help

On Thu, May 17, 2018 at 8:15 PM, Gaétan Collaud notifications@github.com wrote:

I can't show you all my code but here is the most important piece. By the way I use the videojs plugin.

Before the component declaration

declare const videojs: any;declare const streamedianPlayer: any; / tslint:disable:no-var-keyword /var videojsPlayerIndex: number = 0;

( videojs).getTech('Html5').registerSourceHandler({ canHandleSource: (source: Source) => { if (source.type.indexOf('rtsp') !== -1) { return 'propably'; } return ''; }, handleSource: (source: Source, tech: any) => { let socket = 'ws://youreproxyserver.com/ws-stream-proxy'; // todo define from somewhere let el = tech.el(); let wsPlayer = streamedianPlayer(el, socket, source.src); return wsPlayer; }, }, 0);

In the component (component template is empty as I create the video element here, not sure it's the best things to do).

protected initializePlayer(): Observable { let subject: Subject = new Subject();

  let options: PlayerOptions = {};
  options.controls = false;
  options.autoplay = false;
  options.preload = 'auto';
  // options.fluid = true;        options.techOrder = ['html5'];
  options.children = ['mediaLoader', 'posterImage', 'textTrackDisplay', 'textTrackSettings'];
  options.plugins = {};

  const video = document.createElement('video');
  video.setAttribute('id', this.videojsPlayerId);
  video.setAttribute('class', 'videojs-player');
  this.elementRef.nativeElement.appendChild(video);

  this.videojsPlayer = videojs(video, options);

  this.videojsPlayer.ready(() => {
      this.zone.run(() => {
          this.log.debug('Videojs is ready');
          subject.next(this.videojsPlayer);
      });
  });

  this.log.trace('Creating videojs');
  return subject;

}

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Streamedian/html5_rtsp_player/issues/86#issuecomment-389862120, or mute the thread https://github.com/notifications/unsubscribe-auth/Ac6OSt4-7F-POae8GRz59ivfJ00toqM9ks5tzXfzgaJpZM4T9ZZs .