如何在 iPhone 中使用 Hls.js 流式传输视频

如何解决如何在 iPhone 中使用 Hls.js 流式传输视频

我一直在尝试使用 Hls.js 库流式传输我的相机（返回 m3u8），它在桌面（windows 和 mac）和 android 上运行良好。 但不能在 iPhone 上流式传输，也不能停止流式传输。请在这里帮助我，我的代码在下面

HTML 代码

<video #videoTag id="videoId" playsinline controls="controls" poster="{{imageName}}" preload="metadata" width="100%" height="250">
Your browser does not support HTML5 video.
</video>

<div id="video-controller-id" class="video-controller" fx fxLayoutAlign="space-between center">
    <div controls="controls">
         <mat-slide-toggle checked={{isToggle}} (change)="toggle($event)">
             {{cameraStatus}}
         </mat-slide-toggle>
    </div>
    <div fxLayout="row">
         <div fxLayout="row" class="volume">
              <mat-icon matTooltip="{{muteStatus}}" matTooltipHideDelay="500" matTooltipPosition="above" style="cursor: pointer; color: white;" (click)="videoVolume()">
                  {{volume}}</mat-icon>
              <input #volumeSlider class="volume-slider" id="volumeSlider" type="range" min="0" max="100" value="50" step="1" (input)="videoVolumeSlider(volumeSlider.value)">
         </div>
         <div>
              <mat-icon style="cursor: pointer; color: white;" (click)="fullScreen()">fullscreen</mat-icon>
         </div>
    </div>
</div>

TypeScript 代码

hlsObject
@ViewChild('videoTag') videoTag: ElementRef;
isToggle: boolean = false;
toggle(event: MatSlideToggleChange) {

    if (event.checked) {
        this.stationService.getCameraUrl(this.stationId,"hls").subscribe(
          data => {
            
            var urlData = data as any;

            // here in this URL I'm getting the m3u8 file.
            var url = urlData.url;

            if (Hls.isSupported()) {
              this.hlsObject = new Hls();
              this.hlsObject.attachMedia(this.videoTag.nativeElement);
              this.hlsObject.on(Hls.Events.MEDIA_ATTACHED,function () {
                this.hlsObject.loadSource(url);
                this.hlsObject.on(Hls.Events.MANIFEST_PARSED,function (event,data) {
                });
              });
            }
            console.log("Hey video is attached");
            this.videoTag.nativeElement.play();

        },error => {
          console.log(error);
        });
    }else {
        if (Hls.isSupported()) {
          console.log("Hey now inside else condition");
          // var hls = new Hls();
          this.hlsObject.detachMedia(this.videoTag.nativeElement);
          this.hlsObject.loadSource('');
          this.hlsObject.stopLoad();
          this.hlsObject.on(Hls.Events.DESTROYING,function () {
            console.log("Hls destroy.");
          });
          console.log("hls.stopLoad()");
        }
    }
}

解决方法

Hls.js 在 iPhone 上不受支持：https://github.com/video-dev/hls.js/issues/2367