如何在 iPhone 中使用 Hls.js 播放 stream 視頻

Question

我一直在嘗試 stream 我的相機（返回m3u8 ）與 Hls.js 庫，它在桌面（windows 和 mac）和 android 上工作正常。但不是在 iPhone 上流式傳輸，也沒有停止 stream 。 請在這里幫助我，我的代碼在下面

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()");
        }
    }
}

Answer 1

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

Answer 2

首先iPhone內置了HLS，你直接用HTML5播放器玩。 這應該可以幫助您入門，您需要在 Hls is Supported if 語句上添加一個 else。

  //<video id="videoId"></video>
  var video = document.getElementById('videoId');
  function initializeHLS() {
    video.removeAttribute('src');
    // Set you path to m3u8
    var sourceM3u8 = '../../streams/' + selectedSongName + '/' + selectedSongName + '_playlist.m3u8';
    ///////////////////////////////////////////
    // FOR DOCUMENTION OF HLS EVENTS: 
    // https://github.com/video-dev/hls.js/blob/master/docs/API.md
    ///////////////////////////////////////////
    if (Hls.isSupported()) {
      // Note the video element can be placed anywhere in the html and it is mandatory
      // HLS uses the HTML video element to insert the player via API
      hls = new Hls();
      try {
        hls.loadSource(sourceM3u8);
      } catch (err) {
        // If it gets back and was rejected, here we will console log the error to see what exactly failed
        // In your case, the IP address you used failed to load the music. 
        console.log('Error Loading Media!!! ' + err);
        return false;
      }
      hls.attachMedia(video);
      hls.on(Hls.Events.MEDIA_ATTACHED, function() {
        // fired when MediaSource has been succesfully attached to media element
        console.log('MEDIA_ATTACHED');
        console.log("Hey now inside else condition");
        // Enable all Player Controls
        //enableAllControls(mediaPlayerContainer);
      });
      //... your remaining hls events code goes here if needed 
    } else {
      // You reached here because the device does not support hls.js library
      // Check device for iphone or ipad, if found play directly in video element src
      // HLS is built into iOS.
      var mobileInformation = isMobile().toLowerCase();
      if (mobileInformation.includes("iphone") || mobileInformation.includes("ipad")) {
        alert("Apple Mobile Device Detected");
        video.setAttribute('src', sourceM3u8); // The media starts playing on iphone right here
      }
    }
  }
  initializeHLS(); // Call initialize to start
  // Whatever method you want to detect device, here is what I use:
  function isMobile() {
    var check = false;
    (function(a) {
      if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))
        check = true;
    })(navigator.userAgent || navigator.vendor || window.opera);
    return navigator.userAgent;
  };