VgDa sh на Videogular2 проблема с реализацией (DA SH Media на Angular2) ОШИБКА MediaPlayer не инициализирована - PullRequest
Новая
       93

VgDa sh на Videogular2 проблема с реализацией (DA SH Media на Angular2) ОШИБКА MediaPlayer не инициализирована

0 голосов
/ 25 марта 2020

Я работаю над новым проектом, в котором я хочу реализовать плеер Videogular2. Видеофайлы представляют собой файлы DA SH (.mpd). Итак, согласно документации, я пытаюсь реализовать модуль VgDA SH, но у меня проблема с запуском всего этого. Я очень новичок, и я бы попросил помощи.

Вот официальный пример использования модуля da sh: https://github.com/videogular/videogular2-showroom/tree/master/src/app/streaming-player

На основании этого я написал свой приложение - ссылка здесь: https://github.com/mass4/SWS

Когда я запускаю код, я получаю следующие ошибки в консоли в браузере Chrome:

PlayerComponent. html: 61 ERROR TypeError: 

 this.dash.getDebug(...).setLogToBrowserConsole is not a function
    at VgDASH.push../node_modules/videogular2/compiled/src/streaming/vg-dash/vg-dash.js.VgDASH.createPlayer (vg-dash.js:63)
    at VgDASH.push../node_modules/videogular2/compiled/src/streaming/vg-dash/vg-dash.js.VgDASH.ngOnChanges (vg-dash.js:37)
    at checkAndUpdateDirectiveInline (core.js:31906)
    at checkAndUpdateNodeInline (core.js:44367)
    at checkAndUpdateNode (core.js:44306)
    at debugCheckAndUpdateNode (core.js:45328)
    at debugCheckDirectivesFn (core.js:45271)
    at Object.eval [as updateDirectives] (PlayerComponent.html:61)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)

и

core. js: 6014 ERROR MediaPlayer не инициализирован!

Вот мой компонент (без ошибок в коде, использующем код Visual Studio):

player.component. html

  <vg-player (onPlayerReady)="onPlayerReady($event)">
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-controls>
        <vg-play-pause></vg-play-pause>

        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
        </vg-scrub-bar>

        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>

        <vg-quality-selector *ngIf="bitrates"
                             (onBitrateChange)="setBitrate($event)"
                             [bitrates]="bitrates">
        </vg-quality-selector>

        <vg-mute></vg-mute>
        <vg-volume></vg-volume>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video #media 
            #vgDash="vgDash"
           [vgMedia]="media"
           [vgDash]="currentStream.source"
           id="singleVideo"
           crossorigin>
    </video>
</vg-player>

<label>
    Media Url: <input type="text" [(ngModel)]="currentStream.source">
</label>

player .component.ts 

import { Component, OnInit, ViewChild } from '@angular/core';
import {BitrateOption, VgAPI} from 'videogular2/compiled/core';
import { TimerObservable } from 'rxjs/observable/TimerObservable';
import { Subscription } from 'rxjs';
import { IDRMLicenseServer } from 'videogular2/compiled/streaming';
import { VgDASH } from 'videogular2/compiled/src/streaming/vg-dash/vg-dash';

export interface IMediaStream {
  type: 'vod' | 'dash';
  source: string;
  label: string;
  token?: string;
  licenseServers?: IDRMLicenseServer;
}

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.scss']
})
export class PlayerComponent implements OnInit {
  @ViewChild(VgDASH, {static: false}) vgDash: VgDASH;

  currentStream: IMediaStream;
  api: VgAPI;

  bitrates: BitrateOption[];

  streams: IMediaStream[] = [
    {
      type: 'dash',
      label: 'DASH: Media Stream test',
      source: 'http://livesim.dashif.org/livesim/testpic_2s/Manifest.mpd'
    }
  ];

  constructor() { }

  onPlayerReady(api: VgAPI){
    this.api = api;
  }

  ngOnInit() {
    this.currentStream = this.streams[0];
  }

  setBitrate(option: BitrateOption) {
    switch (this.currentStream.type) {
        case 'dash':
            this.vgDash.setBitrate(option);
            break;
    }
  }


  onClickStream(stream: IMediaStream) {
    this.api.pause();
    this.bitrates = null;

    let timer: Subscription = TimerObservable.create(0, 10).subscribe(
        () => {
            this.currentStream = stream;
            timer.unsubscribe();
        }
    );
  }
}

Может кто-нибудь подсказать, где я могу ошибиться, или отправить правильную реализацию vgDa sh в компоненте. (вверху я разместил ссылку на свой проект на github, если это могло бы помочь)

Пример basi c от videogular2, где проигрыватель воспроизводит файл mp4 работает для меня без проблема, когда я вставляю его в player.component. html: 

<vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-scrub-bar [vgSlider]="true">
      <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
      <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>

    <vg-controls>
      <vg-play-pause></vg-play-pause>
      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
      <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
      <vg-mute></vg-mute>
      <vg-volume></vg-volume>
      <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
    </video>
</vg-player>

Но меня волнует поддержка DA SH в компоненте, а не html.

1 Ответ

0 голосов
/ 04 апреля 2020

В последнем пакете da shjs отсутствует указанная c функция.

Переход на более раннюю версию: 

npm install dashjs@2.9.3 --save

Потрачено слишком много время, когда я пытался это выяснить, у меня была точно такая же проблема.

...