Source: Player.js

  1. /**
  2.  * Copyright (C) 2019.
  3.  * All Rights Reserved.
  4.  * @file Player.js
  5.  * @desc
  6.  * the player main stream
  7.  * load data by url -> get the data -> ts demux -> get h265 data -> Webassmebly decode -> YUV data -> draw yuv to Canvas -> image and audio synv -> audio stream -> AudioContext decode and play
  8.  * @author Jarry
  9.  */
  11. import getEvents from './toolkit/Events.js'
  12. import Element from './toolkit/Element.js'
  13. import AlertError from './error/AlertError'
  14. import { throwError } from './error/ThrowError'
  15. import BaseClass from './base/BaseClass.js'
  16. import LoaderController from './loader/LoaderController'
  17. import DataController from './data/DataController'
  18. import Action from './action/Action.js'
  19. import AudioPlayer from './audio/AudioPlayer.js'
  20. import { Config, READY } from './config/Config'
  21. import PlayerUtil from './utils/PlayerUtil'
  22. import ComponentsController from './components/ComponentsController'
  23. import ControlBarController from './control-bar/ControlBarController'
  24. import DataProcessorController from './data-processor/dataProcessorController'
  25. import StreamController from './action/StreamController.js'
  26. import ImagePlayer from './ImagePlayer/ImagePlayer.js'
  27. import webworkify from 'webworkify-webpack'
  28. import Events from './config/EventsConfig'
  30. class Player extends BaseClass {
  31.   mode = Config.mode
  32.   $container = null
  33.   componentsController = null
  34.   controlBarController = null
  35.   controlBarHeight = 50
  36.   alertError = null
  37.   dataController = null
  38.   demuxer = null
  39.   decoder = null
  40.   preload = true
  41.   startTime = 0
  42.   screenWidth = null
  43.   screenHeight = null
  44.   options = {}
  45.   #libPath = Config.libPath
  46.   readyStatus = { dataProcessor: false, firstData: false, audioPlayer: false }
  47.   reseting = false
  48.   #currentTime = 0
  49.   #seek = false
  50.   #playbackRate = 1
  51.   #muted = false
  52.   maxBufferLength = READY.MAXBUFFERLENGTH
  53.   seekSegmentNo = -1
  54.   status = 'init'
  55.   loader = null
  56.   currentIndex = null
  57.   startIndex = 1
  58.   loadData = null
  59.   paused = false
  60.   autoPlay = true
  61.   duration = 0
  62.   tsNumber = 0
  63.  /**
  64.   * @property {string} sourceURL - The url of the video to play
  65.   * @property {string} source - The url of the video to play
  66.   * @property {Object} defaultRate - The default value of playing rate
  67.   * @property {string} type - The type of the video, such as HLS
  68.   * @property {Object[]} rateList - The rate list of the player
  69.   * @example <caption>Example of rateList.</caption>
  70.   * // let options = {
  71. *        rateList:[
  72.            {"url":"http://localhost/20190902/01/a5/029f8fad8868a7116f20d8ae5b075996.m3u8","id":51,"name":"720P","value":"720"},
  73.            {"url":"http://localhost/20190902/f0/db/ee545466ced38973a9d60fe7f24ed409.m3u8","id":51,"name":"高清","value":"600"},
  74.            {"url":"http://localhost/20190902/78/6c/5a5a99476f4f792e2e7a701ba1f6d5ad.m3u8","id":264,"name":"极速","value":"jisu"},
  75.            {"url":"http://localhost/20190902/54/05/7e714a321d9e7d92c937582b2e439833.m3u8","id":265,"name":"流畅","value":"300"}]
  76.        }
  77.   * @property {Function} processURL - process the url of video source 
  78.   * @property {Number} maxBufferLength - The maximum value of the buffer, its default value is 5000(ms)
  79.   * @property {Boolean} autoPlay - If auto play after initializing the Player
  80.   * @property {string} libPath - The path of decoder
  81.   * @property {Boolean} preload - If pre load video before playing
  82.   * @property {Number} startTime - Start time to play the video
  83.   * @property {string} playbackRate - Playback speed
  84.   * @property {Number} controlBarHeight - The height of the control bar
  85.   * @property {AlertError} alertError - The alert info when error happens
  86.   * @property {Worker} httpWorker - set User's web worker
  87.   * @property {Function} afterLoadPlaylist - To handle operations after playlist is loaded
  88.  */
  89.   constructor (el, options = {}) {
  90.     super()
  91.     if (!el) {
  92.       this.logger.error('Please pass in a dom object as the display container')
  93.     }
  94.     this.el = el
  95.     Object.assign(this.options, options)
  96.     this.options.sourceURL = this.options.sourceURL || this.options.source
  97.     this.options.streamList = this.options.streamList || []
  98.     this.options.events = getEvents()
  99.     this.maxBufferLength = options.maxBufferLength !== undefined ? options.maxBufferLength : this.maxBufferLength
  100.     this.autoPlay = options.autoPlay !== undefined ? options.autoPlay : this.autoPlay
  101.     this.#libPath =
  102.       options.libPath !== undefined ? options.libPath : this.#libPath
  103.     this.preload =
  104.       options.preload === undefined ? this.preload : options.preload
  105.     this.startTime = options.startTime === undefined ? this.startTime : options.startTime
  106.     this.originStartTime = this.startTime
  107.     this.playbackRate = options.playbackRate === undefined ? this.playbackRate : options.playbackRate
  108.   }
  109.   setAlertError () {
  110.     this.options.alertError = this.alertError = AlertError.getInstance({
  111.       player: this,
  112.       component: this.componentsController.alertBox,
  113.       events: this.options.events
  114.     })
  115.   }
  116.   setDataController () {
  117.     this.dataController = DataController.getInstance({
  118.       player: this,
  119.       events: this.options.events
  120.     })
  121.   }
  122.   setLoadData () {
  123.     this.dataController.setLoadData({
  124.       player: this,
  125.       events: this.options.events
  126.     })
  127.     this.loadData = this.dataController.loadData
  128.   }
  129.   setComponentsController () {
  130.     this.componentsController = ComponentsController.getInstance({
  131.       $container: this.$container,
  132.       $screenContainer: this.$screenContainer,
  133.       $canvas: this.$canvas,
  134.       $audioContainer: this.$audioContainer,
  135.       $audio: this.$audio,
  136.       loadData: this.loadData,
  137.       bigPlayButtonColor: this.bigPlayButtonColor,
  138.       player: this,
  139.       events: this.options.events
  140.     })
  141.   }
  142.   setControlBarController () {
  143.     const options = Object.assign({}, this.options, {
  144.       $container: this.$container,
  145.       $screenContainer: this.$screenContainer,
  146.       controlBarAutoHide: this.controlBarAutoHide,
  147.       player: this
  148.     })
  149.     this.controlBarController = ControlBarController.getInstance(options)
  150.   }
  151.   setLoadController () {
  152.     this.loaderController = LoaderController.getInstance(this.options.type, {
  153.       player: this,
  154.       events: this.options.events
  155.     })
  156.   }
  157.   setProcessorController() {
  158.     this.processController = new DataProcessorController({
  159.       type: 'ts',
  160.       libPath: this.#libPath,
  161.       events: this.options.events,
  162.       player: this
  163.     })
  164.   }
  165.   setStreamController () {
  166.     this.streamController = new StreamController({
  167.       events: this.options.events,
  168.       loadData: this.loadData,
  169.       imagePlayer: this.imagePlayer,
  170.       audioPlayer: this.audioPlayer,
  171.       player: this
  172.     })
  173.   }
  174.   setImagerPlayer () {
  175.     this.imagePlayer = new ImagePlayer({
  176.       events: this.options.events,
  177.       canvas: this.$canvas,
  178.       maxBufferLength: this.maxBufferLength,
  179.       player: this
  180.     })
  181.   }
  182.   setAudioPlayer () {
  183.     this.audioPlayer = new AudioPlayer({
  184.       player: this,
  185.       events: this.options.events,
  186.       audioNode: this.$audio
  187.     })
  188.   }
  189.   setAction () {
  190.     this.action = new Action({
  191.       player: this,
  192.       screen: this.screen,
  193.       imagePlayer: this.imagePlayer,
  194.       loadData: this.loadData,
  195.       audioPlayer: this.audioPlayer,
  196.       events: this.options.events
  197.     })
  198.   }
  199.   init () {
  200.     this.controlBarHeight = this.options.controlBarHeight || this.controlBarHeight
  201.     this.options.httpWorker = webworkify(require.resolve('./toolkit/HTTP.js'), {
  202.       name: 'httpWorker'
  203.     })
  204.     this.currentTime = this.startTime
  205.     this.addEl()
  206.     this.setDataController()
  207.     this.setLoadData()
  208.     this.setComponentsController()
  209.     this.setLoadController()
  210.     this.setControlBarController()
  211.     this.componentsController.setControlBarController(this.controlBarController)
  212.     this.setAlertError()
  213.     this.setProcessorController()
  214.     this.setImagerPlayer()
  215.     this.setAudioPlayer()
  216.     this.setAction()
  217.     this.setStreamController()
  219.     this.componentsController.drawPoster()
  220.     if (this.preload) {
  221.       this.run()
  222.     }
  223.     this.bindEvent()
  224.   }
  225.   bindEvent () {
  226.     this.events.on(Events.PlayerOnPlay, () => {
  227.       this.play()
  228.     })
  229.     this.events.on(Events.PlayerOnPause, () => {
  230.       this.pause()
  231.     })
  232.     this.events.on(Events.PlayerOnVolume, (value) => {
  233.       this.volume = value
  234.     })
  235.     this.events.on(Events.DataProcessorReady, () => {
  236.       this.logger.info('bindEvent', 'decoder ready')
  237.       this.checkReady('dataProcessor')
  238.     })
  239.     this.events.on(Events.AudioPlayerReady, () => {
  240.       this.logger.info('bindEvent', 'audioPlayer ready')
  241.       if (!this.seeking) {
  242.         this.checkReady('audioPlayer')
  243.       }
  244.     })
  245.     this.events.on(Events.PlayerReady, () => {
  246.       this.logger.info('bindEvent', 'player ready')
  247.       this.onReady()
  248.     })
  249.     this.events.on(Events.PlayerSpeedTo, (data) => {
  250.       this.changeSpeed(data)
  251.     })
  252.     this.events.on(Events.PlayerChangeRate, (data) => {
  253.       this.changeRate(data)
  254.     })
  255.     this.events.on(Events.PlayerWait, () => {
  256.       this.onWait() 
  257.     })
  258.     this.events.on(Events.PlayerPlay, () => {
  259.       this.onPlay()
  260.     })
  261.     this.events.on(Events.LoaderPlayListLoaded, data => {
  262.       if (typeof this.options.afterLoadPlaylist == 'function') {
  263.         this.options.afterLoadPlaylist(this.laodData.sourceData)
  264.       }
  265.       let sourceData = data.loadData.sourceData
  266.       this.duration = sourceData.duration
  267.       this.tsNumber = sourceData.length
  268.       this.streamController.setBaseInfo({
  269.         duration: this.duration,
  270.         tsNumber: this.tsNumber
  271.       })
  272.       this.dataController.startLoad(this.startTime)
  273.       this.setStartTime(this.originStartTime)
  274.     })
  275.     this.events.on(Events.LoadDataFirstLoaded, buffer => {
  276.       this.logger.info('bindEvent', 'first data ready')
  277.       this.startIndex = buffer.no
  278.       this.streamController.currentIndex = buffer.no
  279.       this.checkReady('firstData')
  280.     })
  281.     this.events.on(Events.StreamDataReady, () => {
  282.       this.logger.info('bindEvent', 'dataReady')
  283.       this.onDataReady()
  284.     })
  286.     this.events.on(Events.PlayerLoadedMetaData, (width, height) => {
  287.       this.setCanvas()
  288.       this.resizeScreen(width, height)
  289.     })
  290.     this.events.on(Events.PlayerEnd, () => {
  291.       this.status = 'end'
  292.     })
  293.     this.events.on(Events.ImagePlayerBuffeUpdate, () => {
  294.       let buffer = this.buffer()
  295.       this.events.emit(Events.PlayerbufferUpdate, buffer)
  296.     })
  297.     this.events.on(Events.PlayerOnSeek, (time) => {
  298.       this.seek(Math.floor(time))
  299.     })
  300.     this.events.on(Events.PlayerAlert, (content) => {
  301.       this.alertError.show(content)
  302.     })
  303.     this.events.on(Events.PlayerThrowError, (errors) => {
  304.       throwError.apply(this, errors)
  305.     })
  306.   }
  307.   reset (value) {
  308.     if (this.action) {
  309.       this.action.reset(value)
  310.     }
  311.   }
  312.   switchPlaylist (url, callback) {
  313.     this.loaderController.switchPlaylist(url, callback)
  314.   }
  315.   /**
  316.    * @method
  317.    * @name changeSpeed
  318.    * @param {Object} data - data.value, The value of playback speed
  319.    * @description Change the playback speed, such as 1, 0.5, 1.5, 2...*/
  320.   changeSpeed (data = {}) {
  321.     this.playbackRate = data.value || 1
  322.   }
  324.   setStartTime (time) {
  325.     this.startTime = time
  326.   }
  327.   /**
  328.    * @method
  329.    * @name changeRate
  330.    * @param {Object} data - The url of the video source
  331.    * @param {function} callback - Function to handle after changing the video source 
  332.    * @description Change the rate of the video source, such as 720P, HD...*/
  333.   changeRate (data) {
  334.     this.pause()
  335.     this.events.emit(Events.ControlBarPauseLoading, this)
  336.     this.setStartTime((this.currentTime - 5000) / 1000)
  337.     this.changing = true
  338.     this.seeking = false
  339.     this.imagePlayer.firstRender = false
  340.     this.readyStatus = { dataProcessor: false, firstData: false, audioPlayer: false }
  341.     this.reset(true)
  342.     this.switchPlaylist(data.url)
  343.   }
  344.   /**
  345.    * @method
  346.    * @name changeSrc
  347.    * @param {string} url - The url of the video source
  348.    * @param {function} callback - Function to handle after changing the video source 
  349.    * @description Change the source of the video to play*/
  350.   changeSrc (url, callback) {
  351.     this.pause()
  352.     this.events.emit(Events.ControlBarPauseLoading, this)
  353.     this.events.emit(Events.PlayerChangeSrc, this)
  354.     this.changing = true
  355.     this.seeking = false
  356.     this.imagePlayer.firstRender = false
  357.     this.readyStatus = { dataProcessor: false, firstData: false, audioPlayer: false }
  358.     this.currentTime = this.startTime
  359.     this.imagePlayer.clear()
  360.     this.reset(true)
  361.     this.switchPlaylist(url, callback)
  362.   }
  363.   setCanvas () {
  364.     const $canvas = PlayerUtil.createCanvas(this)
  365.     if (Element.isElement(this.$canvas)) {
  366.       if (this.$canvas.width && this.$canvas.height) {
  367.         this.imagePlayer.setScreenRender($canvas)
  368.         this.$canvas.replaceWith($canvas)
  369.         this.$canvas = $canvas
  370.         return
  371.       }
  372.     } else {
  373.       this.$screen.appendChild($canvas)
  374.       this.$canvas = $canvas
  375.     }
  376.   }
  377.   /**
  378.    * @method
  379.    * @name destroy
  380.    * @description destroy the instance of Class Player*/
  381.   destroy () {
  382.     if (this.controlBarController) {
  383.       this.controlBarController.destroy()
  384.       delete this.controlBarController
  385.     }
  386.     if (this.$container) {
  387.       this.el.removeChild(this.$container)
  388.       delete this.$container
  389.     }
  390.     this.decodeController.destroy()
  391.     this.demuxController.destroy()
  392.     this.loaderController.destroy()
  393.   }
  395.   run () {
  396.     this.loaderController.run()
  397.   }
  399.   checkReady (type) {
  400.     let readyStatus = this.readyStatus
  401.     if (type && typeof type === 'string') {
  402.       readyStatus[type] = true
  403.       let keys = Object.keys(readyStatus)
  404.       for (let i = 0; i < keys.length; i++) {
  405.         if (!readyStatus[keys[i]]) {
  406.           return false
  407.         }
  408.       }
  409.       this.logger.info('checkReady', 'player ready')
  410.       this.events.emit(Events.PlayerReady)
  411.       return true
  412.     } else {
  413.       this.logger.error('checkReady', 'check ready', 'type is no correct, type:', type)
  414.       return false
  415.     }
  416.   }
  418.   addEl () {
  419.     let $container, $screen, $audioContainer, $audio
  420.     if (!this.el) {
  421.       this.logger.error('addEl', 'not found el.', 'el:', this.options.el)
  422.       return
  423.     }
  425.     $container = PlayerUtil.createContainer(this)
  426.     this.el.appendChild($container)
  427.     this.$container = $container
  429.     $screen = PlayerUtil.createScreenContainer(this)
  430.     this.$screen = $screen
  431.     $container.appendChild($screen)
  432.     this.$screenContainer = $screen
  434.     this.setCanvas()
  436.     $audio = PlayerUtil.createAudio(this)
  437.     this.$audio = $audio
  438.     $audioContainer = PlayerUtil.createAudioContainer(this)
  439.     $audioContainer.appendChild($audio)
  440.     this.$audioContainer = $audioContainer
  441.     $container.appendChild($audioContainer)
  444.   }
  445.   onWait () {
  446.     this.logger.info('onWait', 'wait,wait,wait')
  447.   }
  448.   onPlay () {
  449.     this.logger.info('onPlay', 'play, play, play')
  450.   }
  451.   onReady () {
  452.     if (!this.changing) {
  453.       this.componentsController.run()
  454.     }
  455.     if (this.changing) {
  456.       this.logger.info('onReady', 'change ready', 'startIndex:', this.startIndex)
  457.     }
  458.     this.streamController.startLoad(this.startIndex)
  459.   }
  461.   onDataReady () {
  462.     if (this.changing) {
  463.       this.changing = false
  464.       this.play()
  465.     }
  466.     if (this.seeking || (this.autoPlay && !this.paused)) {
  467.       this.play()
  468.     }
  469.   }
  471.   buffer () {
  472.     let videoBuffered = this.imagePlayer.buffer()
  473.     let audioPlayerBuffered = this.audioPlayer.buffer()
  474.     let sTime = Math.max(videoBuffered.start, audioPlayerBuffered.start)
  475.     let eTime = Math.min(videoBuffered.end, audioPlayerBuffered.end)
  477.     if (sTime < eTime) {
  478.       return [sTime, eTime]
  479.     }
  480.     return [0, 0]
  481.   }
  482.   /**
  483.    * @method
  484.    * @name play
  485.    * @description play the video*/
  486.   play() {
  487.     this.logger.info('play', this.status)
  488.     if (this.status !== 'playing') {
  489.       this.logger.info('start play')
  490.       this.status = 'playing'
  491.       this.paused = false
  492.       this.action.play(this.currentTime)
  493.       this.events.emit(Events.PlayerPlay, this)
  494.     }
  495.   }
  496.   on (name, callback) {
  497.     this.events.on('Player.' + name, callback)
  498.   }
  499.   off (name, callback) {
  500.     this.events.off('Player.' + name, callback)
  501.   }
  502.   once (name, callback) {
  503.     this.events.once('Player.' + name, callback)
  504.   }
  505.   /**
  506.    * @method
  507.    * @name pause
  508.    * @description pause the video*/
  509.   pause () {
  510.     if (this.status != 'pause') {
  511.       this.logger.info('pause')
  512.       this.status = 'pause'
  513.       this.action.pause()
  514.       this.paused = true
  515.       this.events.emit(Events.PlayerPause, this)
  516.     }
  517.   }
  518.   /**
  519.    * @method
  520.    * @name seek
  521.    * @param {number} time - the duration of seeking
  522.    * @description seek time to play*/
  523.   seek (time) {
  524.     if (time < this.startTime) {
  525.       return
  526.     }
  527.     if (time >= this.duration * 1000) {
  528.       this.logger.info('seek', 'seek to time:', time)
  529.       return
  530.     }
  531.     this.seekTime = Date.now()
  532.     this.seeking = true
  533.     this.currentTime = time
  534.     this.action.seek(time)
  535.   }
  536.   get muted () {
  537.     return this.#muted
  538.   }
  539.   set muted (value) {
  540.     this.#muted = !!value
  541.   }
  542.   set playbackRate (value) {
  543.     this.#playbackRate = value
  544.   }
  545.   get playbackRate () {
  546.     return this.#playbackRate
  547.   }
  548.   set seeking (value) {
  549.     this.#seek = value
  550.     if (value) {
  551.       this.events.emit(Events.PlayerSeeking)
  552.     } else {
  553.       this.events.emit(Events.PlayerSeekEnd)
  554.     }
  555.   }
  556.   get seeking () {
  557.     return this.#seek
  558.   }
  559.   get currentTime () {
  560.     return this.#currentTime
  561.   }
  562.   set currentTime (time) {
  563.     this.#currentTime = time
  564.   }
  565.   get volume () {
  566.     return this.audioPlayer.volume
  567.   }
  568.   set volume (value) {
  569.     this.audioPlayer.volume = value
  570.   }
  571.   resizeScreen (width, height) {
  572.     Element.adaptSizeElement(width, height, this.$screenContainer, this.$canvas)
  573.   }
  574. }
  576. export default Player