Feat mseinworker

fixtures/flv/index.js

@@ -1,5 +1,5 @@
 import Player from '../../packages/xgplayer/src'
-import FlvPlayer from '../../packages/xgplayer-flv/src'
+import FlvPlayer, { MIW, preParePlayerWorker } from '../../packages/xgplayer-flv/src'
 
 // localStorage.setItem('xgd', 1)
 function defaultOpt() {
@@ -17,23 +17,24 @@ function defaultOpt() {
     maxReaderInterval: 5000,
     seamlesslyReload: false,
     firstMaxChunkSize: 20000,
-    manualLoad: true
+    manualLoad: false
   }
 }
 var cachedOpt = localStorage.getItem('xg:test:flv:opt')
 try { cachedOpt = JSON.parse(cachedOpt) } catch (error) { cachedOpt = undefined }
+cachedOpt.manualLoad = false
 var opts = Object.assign({
   // url: 'https://1011.hlsplay.aodianyun.com/demo/game.flv',
-  url: 'https://pull-flv-l1.douyincdn.com/stage/stream-399911386870710302_ld.flv?keeptime=00093a80&wsSecret=84c8c84e064fb6c6aaad6ec54c5c8247&wsTime=63315a10&abr_pts=1950715',
+  url: 'https://pull-demo.volcfcdnrd.com/live/st-4536524.flv',
 }, defaultOpt(), cachedOpt)
 var testPoint = Number(localStorage.getItem('xg:test:flv:point'))
 
 if (isNaN(testPoint)) testPoint = 0
 
 window.onload = function () {
-  fetch('https://pull-demo.volcfcdnrd.com/live/st-4536524.flv').then(res => {
-    window.streamRes = res
-  })
+  // fetch('https://pull-demo.volcfcdnrd.com/live/st-4536524.flv').then(res => {
+  //   window.streamRes = res.body
+  // })
   var dTestPoint = document.getElementById('test-point')
   var dTestPointDesc = document.getElementById('test-point-desc')
 
@@ -113,14 +114,16 @@ window.onload = function () {
       window.timeStart = Date.now()
       window.player = player = new Player({
         el: document.getElementById('player'),
-        plugins: [FlvPlayer],
+        plugins: [MIW],
+        // plugins:[FlvPlayer],
         url: opts.url,
         isLive: opts.isLive,
         autoplay: opts.autoplay,
         autoplayMuted: opts.autoplayMuted,
         flv: {
           // streamRes: window.streamRes,
-          ...opts
+          ...opts,
+          worker: preParePlayerWorker()
         }
       });
       player.once('ready', () => {
@@ -134,9 +137,9 @@ window.onload = function () {
       dlError.innerHTML = ''
 
       function pushEvent(name, value, container) {
-        if (name === 'loadeddata') {
+         if (name === 'loadeddata') {
           console.log('loadeddata', Date.now() - window.timeStart)
-          player.plugins.flv.flv._mediaLoader._currentTask._loader._firstMaxChunkSize = null
+          // player.plugins.flv.flv._mediaLoader._currentTask._loader._firstMaxChunkSize = null
         }
         container = container || dlEvent
         if (container === dlEvent && dlLogPause.checked) return
@@ -271,10 +274,10 @@ window.onload = function () {
   inp(doMaxLatency).onchange = function () { updateOpts('maxLatency', this.value, 'number') }
   inp(doDisconnectTime).onchange = function () { updateOpts('disconnectTime', this.value, 'number') }
   inp(doMaxReaderInterval).onchange = function () { updateOpts('maxReaderInterval', this.value, 'number') }
-
+  // MIW._playerWorker();//初始化worker
   setTimeout(() => {
     initPlayer()
-  }, 3000)
+  },200)
 
   dbResetOpt.onclick = resetOpts
   dbApplyOpt.onclick = initPlayer
@@ -305,40 +308,40 @@ window.onload = function () {
     resetOpts()
   }
 
-  setTimeout(function () {
-    var lastPlayback = null
-    var fps = 0
-    var prevTime = 0
-    setInterval(function () {
-      if (player && player.plugins.flv) {
-        var t = player.currentTime
-        prevTime = t
-        var flv = player.plugins.flv.core
-        var buf = flv.bufferInfo()
-        var pq = flv.playbackQuality()
-        var sp = flv.speedInfo()
-        if (lastPlayback) {
-          fps = Math.round((pq.totalVideoFrames - lastPlayback.totalVideoFrames) / (pq.creationTime - lastPlayback.creationTime) * 1000)
-        }
-        lastPlayback = pq
+  // setTimeout(function () {
+  //   var lastPlayback = null
+  //   var fps = 0
+  //   var prevTime = 0
+  //   setInterval(function () {
+  //     if (player && player.plugins.flv) {
+  //       var t = player.currentTime
+  //       prevTime = t
+  //       var flv = player.plugins.flv.core
+  //       var buf = flv.bufferInfo()
+  //       var pq = flv.playbackQuality()
+  //       var sp = flv.speedInfo()
+  //       if (lastPlayback) {
+  //         fps = Math.round((pq.totalVideoFrames - lastPlayback.totalVideoFrames) / (pq.creationTime - lastPlayback.creationTime) * 1000)
+  //       }
+  //       lastPlayback = pq
 
-        dsBuffer.innerHTML =
-          '<p>当前时间：' + t + 's</p>' +
-          '<p>剩余缓存时长：' + buf.remaining + 's</p>' +
-          '<p>当前时间之前缓存时长：' + buf.behind + 's</p>' +
-          '<p>总缓存时长：' + buf.length + 's</p>' +
-          '<p>buffers：' + JSON.stringify(buf.buffers) + '</p>'
+  //       dsBuffer.innerHTML =
+  //         '<p>当前时间：' + t + 's</p>' +
+  //         '<p>剩余缓存时长：' + buf.remaining + 's</p>' +
+  //         '<p>当前时间之前缓存时长：' + buf.behind + 's</p>' +
+  //         '<p>总缓存时长：' + buf.length + 's</p>' +
+  //         '<p>buffers：' + JSON.stringify(buf.buffers) + '</p>'
 
-        dsFrame.innerHTML =
-          '<p>总渲染帧数：' + pq.totalVideoFrames + '</p>' +
-          '<p>掉帧数量：' + pq.droppedVideoFrames + '</p>' +
-          '<p>fps:' + fps + '</p>'
+  //       dsFrame.innerHTML =
+  //         '<p>总渲染帧数：' + pq.totalVideoFrames + '</p>' +
+  //         '<p>掉帧数量：' + pq.droppedVideoFrames + '</p>' +
+  //         '<p>fps:' + fps + '</p>'
 
-        dsSpeed.innerHTML =
-          '<p>当前速度：' + Math.round(sp.speed / (8 * 1024)) + 'KB/s</p>' +
-          '<p>平均速度：' + Math.round(sp.avgSpeed / (8 * 1024)) + 'KB/s</p>'
+  //       dsSpeed.innerHTML =
+  //         '<p>当前速度：' + Math.round(sp.speed / (8 * 1024)) + 'KB/s</p>' +
+  //         '<p>平均速度：' + Math.round(sp.avgSpeed / (8 * 1024)) + 'KB/s</p>'
 
-      }
-    }, 1000)
-  })
+  //     }
+  //   }, 1000)
+  // })
 }

packages/xgplayer-flv/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xgplayer-flv",
-  "version": "3.0.22",
+  "version": "3.0.23-beta.14",
   "main": "dist/index.min.js",
   "module": "es/index.js",
   "typings": "es/index.d.ts",

packages/xgplayer-flv/src/MIW.js

@@ -0,0 +1,184 @@
+import { BasePlugin, Events, Errors } from 'xgplayer'
+import { EVENT } from 'xgplayer-streaming-shared'
+import Flv from './adapt/main'
+import PlayerWorker from './adapt/worker?worker&inline'
+
+export default class FlvPlugin extends BasePlugin {
+
+  static get pluginName () {
+    return 'flv'
+  }
+
+  /** @type {Flv} */
+  flv = null;
+
+
+  /** @type {Flv} */
+  get core () {
+    return this.flv
+  }
+
+  /** @type {string} */
+  get version () {
+    return this.flv?.version
+  }
+
+  get loader () {
+    return this.flv?.loader
+  }
+
+  get transferCost () {
+    return this.flv?.transferCost
+  }
+
+  beforePlayerInit () {
+    const config = this.player.config
+    const mediaElem = this.player.media || this.player.video
+
+    if (!config.url) return
+
+    if (this.flv) this.flv.destroy()
+
+    this.player.switchURL = this._onSwitchURL
+
+    const flvOpts = config.flv || {}
+    if (flvOpts.disconnectTime === null || flvOpts.disconnectTime === undefined) {
+      flvOpts.disconnectTime = 0
+    }
+    if (!flvOpts.worker) {
+      flvOpts.worker = preParePlayerWorker()
+    }
+    this.flv = new Flv({
+      isLive: config.isLive,
+      media: mediaElem,
+      preProcessUrl: (url, ext) => this.player?.preProcessUrl?.(url, ext) || {url, ext},
+      ...flvOpts
+    })
+    if (!this.softDecode) {
+      BasePlugin.defineGetterOrSetter(this.player, {
+        url: {
+          get: () => {
+            return this.flv?.blobUrl
+          },
+          configurable: true
+        }
+      })
+    }
+
+    if (config.isLive) {
+      this.player?.useHooks('replay', () => this.flv?.replay())
+    }
+
+    this.on(Events.URL_CHANGE, this._onSwitchURL)
+    this.on(Events.DESTROY, this.destroy)
+
+    this._transError()
+    this._transCoreEvent(EVENT.TTFB)
+    this._transCoreEvent(EVENT.LOAD_START)
+    this._transCoreEvent(EVENT.LOAD_RESPONSE_HEADERS)
+    this._transCoreEvent(EVENT.LOAD_COMPLETE)
+    this._transCoreEvent(EVENT.LOAD_RETRY)
+    this._transCoreEvent(EVENT.SOURCEBUFFER_CREATED)
+    this._transCoreEvent(EVENT.ANALYZE_DURATION_EXCEEDED)
+    this._transCoreEvent(EVENT.APPEND_BUFFER)
+    this._transCoreEvent(EVENT.REMOVE_BUFFER)
+    this._transCoreEvent(EVENT.BUFFEREOS)
+    this._transCoreEvent(EVENT.KEYFRAME)
+    this._transCoreEvent(EVENT.CHASEFRAME)
+    this._transCoreEvent(EVENT.METADATA_PARSED)
+    this._transCoreEvent(EVENT.SEI)
+    this._transCoreEvent(EVENT.SEI_IN_TIME)
+    this._transCoreEvent(EVENT.FLV_SCRIPT_DATA)
+    this._transCoreEvent(EVENT.STREAM_EXCEPTION)
+    this._transCoreEvent(EVENT.SWITCH_URL_SUCCESS)
+    this._transCoreEvent(EVENT.SWITCH_URL_FAILED)
+
+    if (!flvOpts.manualLoad) {
+      this.loadSource(config.url, flvOpts.streamRes)
+    }
+    this.player.handleSource = false
+  }
+
+  getStats = () => {
+    return {}
+  }
+
+  loadSource = (url = this.player.config.url, stream) => {
+    this.flv?.load(this.player.config.url, true, stream)
+  }
+
+  destroy = () => {
+    if (this.flv) {
+      this.flv.destroy()
+      this.flv = null
+    }
+    this.player.handleSource = true
+  }
+
+  /**
+   * @param {string | boolean} [mediaType]
+   * @param {string} [codec]
+   * @returns {boolean}
+   * - mediaType: 默认检测 MSE 对 H264 codec是否支持，传入 true 或者配置参数的mediaType的取值检测 WebAssembly是否支持
+   * - codec: 暂无使用
+   */
+  static isSupported () {
+    return Flv.isSupported()
+  }
+
+  /**
+   *
+   * @param {string} url
+   * @param {boolean | {seamless: boolean}} seamless
+   */
+  _onSwitchURL = (url, seamless) => {
+    if (this.flv) {
+      this.player.config.url = url
+
+      if (typeof seamless === 'object') {
+        seamless = seamless.seamless
+      }
+
+      this.flv.switchURL(url, seamless)
+
+      if (!seamless && this.player.config?.flv?.keepStatusAfterSwitch) {
+        this._keepPauseStatus()
+      }
+    }
+  }
+
+  _keepPauseStatus = () => {
+    const paused = this.player.paused
+    if (!paused) return
+    this.player.once('canplay', () => {
+      this.player.pause()
+    })
+  }
+
+  _onDefinitionChange = ({ to }) => {
+    if (this.flv) this.flv.switchURL(to)
+  }
+
+  _transError () {
+    this.flv.on(EVENT.ERROR, (err) => {
+      if (this.player) {
+        this.player.emit(Events.ERROR, new Errors(this.player, err))
+      }
+    })
+  }
+
+  _transCoreEvent (eventName) {
+    this.flv.on(eventName, (e) => {
+      if (this.player) {
+        this.player.emit('core_event', {
+          ...e,
+          eventName
+        })
+      }
+    })
+  }
+}
+
+export function preParePlayerWorker () {
+  return new PlayerWorker()
+}