уничтожить поток hls.js после изменения состояния ui-роутера - PullRequest
Новая
       23

уничтожить поток hls.js после изменения состояния ui-роутера

0 голосов
/ 25 мая 2018

в моем приложении я использую видеопоток.Я вызываю этот поток из моего API и с помощью потоков отображения тегов видео в приложении angularjs. 

<video id="video" class="iframePreview" controls="true" autoplay
       type="application/x-mpegURL">
</video>
<button class="button_pv btn btn-default"
        ui-sref="camera({'streamID': monitorsIds[0] })">
   Recorded Events
</button>

, а в ctrl беру URL из API и перехожу на <video></video

return $http
    .get(serviceBase + "aaaaaa" + Id)
    .then(function(response) {
      $rootScope.monitorsIds = [];

      angular.forEach(response.data, function(key, value) {
        $rootScope.monitorsIds.push(key.monitor);
      });
    if(Hls.isSupported()) {

        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource(window.monitorsIdsStreamWin[0]);
        hls.attachMedia(video);
    }
    });

Все работает хорошо, но когда я меняю состояние в своей сетевой консоли, я все еще вижу загрузку потоковых данных ...

Как это уничтожить?Thnx

1 Ответ

0 голосов
/ 25 мая 2018

Вот директива общего назначения: 

app.directive("hlsSource", function() {
    return {
        link: postLink,
    };
    function postLink(scope, elem, attrs) {
        var hls;
        var video = elem[0];
        scope.$watch(attrs.hlsSource, function(value) {
            if (!value) return;
            //else
            hls && hls.destroy();
            hls = new Hls();
            hls.loadSource(value);
            hls.attachMedia(video);
            scope.$eval(attrs.onAttach({$hls: hls, $video: video});
        });
        scope.$onDestroy(function() {
            hls && hls.destroy();                
        });
    }
});

Использование: 

<video id="video" class="iframePreview" controls="true" autoplay
       type="application/x-mpegURL"
       hls-source="$ctrl.source" on-attach="$ctrl.onAttach($hls,$video)">
</video>

JS 

app.controller("videoController", function() {
    var current_hls;
    var current_video;
    this.onAttach = function(hls, video) {
        current_hls = hls;
        current_video = video;
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
           current_video.play();
        });
    };
    this.$onDestroy = function() {
        current_hls && current_hls.destroy();
    };
    this.source = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
})
...