ui-router 状态更改后销毁 hls.js 流

Posted 2023-03-07

【中文标题】ui-router 状态更改后销毁 hls.js 流

【英文标题】：destroy hls.js stream after ui-router state change

【发布时间】：2018-05-25 11:49:51

【问题描述】：

在我的应用中，我使用视频流。我从我的 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 中，我从 API 获取 URL 并传递给 <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);
    
    );

一切正常，但是当我在网络控制台中更改状态时，我仍然看到正在加载流数据...

如何销毁它？ 谢谢

【问题讨论】：

使用hls.destroy()

查看 AngularJS 常见问题 - $rootScope exists, but it can be used for evil

对于 AngularJS，document.getElementById 的使用是 code smell，这是一个更深层次问题的症状。代码应附加到带有custom directives 的元素。

@georgeawg thnx，这只是我使用这种方法的地方......但是，如果你知道如何为此编写指令，请告诉我。谢谢

问题中的代码非常脱节。 XHR 将数据推送到 $rootScope 并使用来自全局窗口的数据 (monitorsIdsStreamWin)。它使用 ui-router 更改视图。太纠结了，写不出合适的答案。

【参考方案1】：

这是一个通用指令：

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';
)