video-player-dd 2.0.1

package/base.css

@@ -0,0 +1,13 @@
+.wcs-wwav-base-video {
+  height: 100%;
+  width: 100%;
+  background: #333333;
+  position: relative;
+}
+
+.wcs-wwav-base-video__content {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  object-fit: fill;
+}

package/index.ts

@@ -0,0 +1,274 @@
+import elementResizeDetectorMaker, { type Erd } from 'element-resize-detector'
+import type { VideoMedia, CanvasMedia, Video, PlayerOptions } from './type';
+import WWAVPlayer from '@vanwei-wcs/wwav-player'
+import { VideoStatus } from './utils/index'
+import useVideo from './video.ts'
+import { emitter } from './utils/mitter.ts'
+import useStream from './stream.ts'
+import './base.css'
+
+class Base {
+  #options: any;
+  #erd: Erd = elementResizeDetectorMaker();
+  #videoMedia: VideoMedia = null;
+  #canvasMedia: CanvasMedia = null;
+  #domForceType: string = 'both';
+  #baseDiv: HTMLElement;
+  #baseDivHeight: number = 0;
+  #baseDivWidth: number = 0;
+  #domCreated = false;
+  #streamType = 'H264';
+  #isClosedVideo = true;
+  #playerCreated = false;
+  #isLive = true;
+  #videoMediaDelay: number = 0.8
+  #videoMediaPlaySpeed: number = 1
+  player: WWAVPlayer | null = null
+  attachedElement: boolean = false
+
+
+  constructor({ target, options, isLive = true }: { target: string | HTMLElement; options?: any; isLive?: boolean }) {
+    this.#baseDiv = document.createElement('div');
+    this.#baseDiv.classList.add('wcs-wwav-base-video')
+    this.#options = options;
+    this.#isLive = isLive
+
+    const parent = typeof target === 'string'
+      ? document.querySelector(target)
+      : target;
+
+    if (!parent) throw new Error('挂载目标未找到');
+    parent.appendChild(this.#baseDiv);
+    this.#erd.listenTo(this.#baseDiv, (el) => this.#mediaResize(el));
+
+    !this.#domCreated && this.#createMediaDom()
+  }
+
+  #createMediaDom = () => {
+    if (!this.#canvasMedia) {
+      if (this.#domForceType !== 'canvas') {
+        this.#videoMedia = document.createElement('video')
+        this.#videoMedia.autoplay = true
+        this.#videoMedia.classList.add('wcs-wwav-base-video__content')
+        // TODO 视频监听
+        this.#addVideoListener()
+        this.#baseDiv.appendChild(this.#videoMedia)
+      }
+      if (this.#domForceType !== 'video') {
+        this.#canvasMedia = document.createElement('canvas')
+        this.#canvasMedia.width = this.#baseDivWidth
+        this.#canvasMedia.height = this.#baseDivHeight
+        if (this.#domForceType === 'canvas') {
+          this.#canvasMedia.setAttribute('style', 'display: block ')
+        }
+        this.#baseDiv.appendChild(this.#canvasMedia)
+      }
+      this.#domCreated = true
+    } else {
+      this.#domCreated = false
+    }
+  }
+
+  #clearMediaDom = () => {
+    if (!this.player) return
+    if (this.#baseDiv) {
+      if (this.#videoMedia) {
+        this.#removeVideoListener()
+        this.#videoMedia.remove()
+      }
+      if (this.#canvasMedia) {
+        this.#canvasMedia.remove()
+      }
+
+      this.#videoMedia = null
+      this.#canvasMedia = null
+      // 不能使用 this.mediaBox.innerHTML = '', 这会导致 this.Erd.uninstall(this.mediaBox) 报错
+    }
+    this.#domCreated = false
+  }
+
+  #mediaResize(el: HTMLElement) {
+    const { offsetWidth, offsetHeight } = el
+    this.#baseDivWidth = offsetWidth
+    this.#baseDivHeight = offsetHeight
+    if (this.#canvasMedia) {
+      this.#canvasMedia.width = offsetWidth
+      this.#canvasMedia.height = offsetHeight
+    }
+  }
+
+  #changeDomDisplay() {
+    if (this.#streamType) {
+      if (this.#streamType === 'H265' || this.#streamType === 'h265') {
+        this.#videoMedia && (this.#videoMedia.style.display = 'none')
+        this.#canvasMedia && (this.#canvasMedia.style.display = 'block')
+      } else {
+        this.#videoMedia && (this.#videoMedia.style.display = 'block')
+        this.#canvasMedia && (this.#canvasMedia.style.display = 'none')
+      }
+    }
+  }
+
+  // TODO 待做
+  #addVideoListener() {
+    this.#videoMedia?.addEventListener('progress', this.#videoProgressEvent)
+  }
+  #removeVideoListener() {
+    this.#videoMedia?.removeEventListener('progress', this.#videoProgressEvent)
+  }
+
+  #videoProgressEvent(e) {
+    if (this.#videoMedia) {
+      // 动态调整播放速率
+      if (this.#isLive) {
+        const buffered = this.#videoMedia.buffered
+        // 动态调整播放速率
+        if (buffered.length > 0) {
+          const end = buffered.end(0)
+          const delay = parseFloat(this.#videoMediaDelay * this.#videoMediaPlaySpeed)
+          const diff = +(end - this.#videoMedia.currentTime).toFixed(3)
+
+          let newPlaySpeedRate = 1
+          if (diff < (delay / 2)) {
+            newPlaySpeedRate = 0.8 // 可根据情况修改 建议 0.4 - 0.8 之间
+          } else if (diff < delay) {
+            newPlaySpeedRate = 1
+          } else if (diff < delay * 2) {
+            newPlaySpeedRate = 1.2
+          } else if (diff < delay * 3) {
+            newPlaySpeedRate = 1.4
+          } else {
+            this.#videoMedia.currentTime = end - delay * 0.8
+            newPlaySpeedRate = 1
+            // this._log('set current time', end - delay * 0.8)
+          }
+          const playbackRate = (this.#videoMediaPlaySpeed * newPlaySpeedRate > 16) ? 16 : (this.#videoMediaPlaySpeed * newPlaySpeedRate)
+          this.#videoMedia.playbackRate = playbackRate
+          // this._log(`progress: new playbackrate:${playbackRate}`)
+          // this._log(`progress: currentTime:${this.videoMedia.currentTime}, cachedTime:${end}, diff:${diff}`)
+        }
+      }
+    }
+  }
+
+  #createPlayer(videoMedia: VideoMedia, canvasMedia: CanvasMedia, options: PlayerOptions) {
+    // 这里debug 为 true 会打印出播放器的日志 目前所有日志都没打印
+    const _player = this.player = new WWAVPlayer({ debug: !!options?.debug })
+    _player.on('error', this.onPlayerError)
+    _player.on('media_info', this.onPlayerMediaInfo)
+    _player.on('play', this.onPlayerPlay)
+    _player.on('pause', this.onPlayerPause)
+    _player.onStream = (info: any) => useStream.onStream(info, this.#streamType)
+
+    this.#playerCreated = true
+
+    !this.attachedElement && this.attachElement(videoMedia, canvasMedia, options)
+  }
+
+  closeVideo() {
+    this.#destroyPlayer()
+    this.#clearMediaDom()
+  }
+
+  async openVideo(video: Video) {
+    if (!this.#isClosedVideo) {
+      await this.closeVideo()
+    }
+    if (!this.#domCreated) {
+      await this.#createMediaDom()
+    }
+    if (!this.#playerCreated) {
+      await this.#createPlayer(this.#videoMedia, this.#canvasMedia, this.#options)
+    }
+
+    this.#isClosedVideo = false
+    useVideo.emitVideoStatus(VideoStatus.vPause)
+    if (this.player) {
+      this.player?.open(video.url, video.token)
+      useStream.startStaticsInfoTimer()
+    }
+  }
+
+  controlSound(muted: boolean) {
+    this.player && this.player.muted(muted)
+  }
+
+  openTalk(talk: Video) {
+    this.player?.openTalk(talk.url, talk.token)
+  }
+
+  closeTalk() {
+    this.player && this.player.closeTalk()
+  }
+
+  attachElement(videoMedia: VideoMedia, canvasMedia: CanvasMedia, options: PlayerOptions) {
+    if (this.player && !this.attachedElement) {
+      if (videoMedia) {
+        this.player.attachVideoElement(videoMedia, options)
+      }
+      if (canvasMedia) {
+        this.player.attachCanvasElement(canvasMedia, options)
+      }
+
+      this.attachedElement = true
+    }
+    this.attachedElement = false
+  }
+
+  onPlayerError(e: any, detail: any, info: any) {
+
+    const data = {
+      reply: info.code,
+      message: info.message
+    }
+    emitter.emit('playerError', data)
+  }
+
+  async onPlayerMediaInfo(info: any) {
+    emitter.emit('media-info', info)
+    this.#streamType = info.format
+    setTimeout(() => {
+      this.#changeDomDisplay()
+    }, 0)
+  }
+
+  // 2 播放 3 暂停
+  changePlayStatus(status: number) {
+    if (!this.player) return
+
+    if (status === VideoStatus.vPlay) {
+      this.player.play()
+    } else if (status === VideoStatus.vPause) {
+      this.player.pause()
+    }
+  }
+
+  async #destroyPlayer() {
+    useStream.clearStaticsInfoTimer()
+    if (this.player) {
+      await this.player.destroy()
+    }
+    this.player = null
+    this.#playerCreated = false
+    this.attachedElement = false
+  }
+
+  onPlayerPlay() {
+    useVideo.emitVideoStatus(VideoStatus.vPlay)
+  }
+
+  onPlayerPause() {
+    useVideo.emitVideoStatus(VideoStatus.vPause)
+  }
+
+  async capture() {
+    const videoMedia = this.#videoMedia
+    const canvasMedia = this.#canvasMedia
+    const info = await useVideo.capture(videoMedia, canvasMedia, this.#streamType)
+    emitter.emit('playerError', info)
+  }
+}
+
+export const baseEmit = emitter
+
+export default Base