如何在 iPhone 中使用 Hls.js 播放 stream 视频

Question

I've been trying to stream my camera (Which returns m3u8 ) with the Hls.js library and it's work fine with Desktop (windows and mac) and android. But not streaming on iPhone and not stopping the stream . Please help me here, my codes are below

HTML code

<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 code

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

Hls.js is not supported on iPhone: https://github.com/video-dev/hls.js/issues/2367

Answer 2

First of all HLS is built in to the iPhone, you play directly with the HTML5 player. This should get you started, you need an else on the Hls is Supported if statement.

  //<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;
  };