@realsee/vreo 1.0.0-alpha.8 → 1.1.0-dev.0

package/resources/Player/modules/VideoAgent/VideoAgentMesh.ts

@@ -1,302 +0,0 @@
-import * as THREE from 'three'
-import { Preloader } from '../../../shared-utils/Preloader'
-import { makeObservable, observable, runInAction } from 'mobx'
-import AudioLike from '../../../shared-utils/AduioLike'
-import { getMediaType } from '../../../shared-utils/getMediaInfo'
-
-const vertexShader = `
-varying vec2 vUv;
-varying vec2 vColorUv;
-varying vec2 vMaskUv;
-void main(){
-  vUv = uv;
-  vColorUv = vec2(uv.x / 2.0, uv.y);
-  vMaskUv = vec2(0.5 + uv.x / 2.0, uv.y);
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-`
-const fragmentShaderTpl = () => `
-uniform int enable;
-uniform sampler2D map;
-varying vec2 vUv;
-varying vec2 vColorUv;
-varying vec2 vMaskUv;
-
-vec3 hsv2rgb(vec3 c) {
-  const vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
-  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
-  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
-}
-
-vec3 rgb2hsv(vec3 c) {
-  const vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
-  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
-  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
-
-  float d = q.x - min(q.w, q.y);
-  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 0.001)), d / (q.x + 0.001), q.x);
-}
-
-void main(void) {
-  vec3 color = texture2D(map, vUv).xyz;
-  float amask = 1.0;
-
-  float ref = color.r;
-  if (ref < color.b) ref = color.b;
-  amask = color.g - ref + 0.1;
-  amask = smoothstep(0.1, 0.3, amask);
-  amask = 1.0 - amask;
-
-  vec3 target = rgb2hsv(vec3(0.0 / 255.0, 255.0 / 255.0, 0.0 / 255.0));
-  vec3 hsv = rgb2hsv(color);
-  float distance = abs(hsv.x - target.x);
-  if (distance < 0.15) {
-    hsv.y = 0.0;
-  }
-  color = hsv2rgb(hsv);
-
-  gl_FragColor = vec4(color.rgb, amask * float(enable));
-}
-`
-
-const cacheInstance: {
-  videoInstance?: HTMLVideoElement
-  audioInstance?: HTMLAudioElement
-} = {}
-
-export interface VideoAgentMeshOptions {
-  /**
-   * 自定义视频实例。
-   */
-  videoInstance?: HTMLVideoElement
-  /**
-   * 自定义音频实例。
-   */
-  audioInstance?: HTMLAudioElement
-  /**
-   * 是否开启音频预载能力。**仅对`.mp3`有效**。
-   *
-   * @description 开启预载能力后会通过 `Fetch/XHR` 方式将音频文件下载转成二进制 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 提供给多媒体实例。这样的好处是 **能够保障音视频播放过程中不卡顿**。 但在部分 iOS 系统中会存在兼容问题——播 25s 之后会静音（`muted` 为 `false`，但是没有声音）。
-   */
-  preload?: boolean
-}
-
-/**
- * 视频经纪人MESH
- */
-export class VideoAgentMesh extends THREE.Mesh {
-  options: VideoAgentMeshOptions
-  videoUrl?: string
-  freeze: boolean 
-  paused: boolean
-  audioInstance: HTMLAudioElement
-  audioLikeInstance: AudioLike
-  $removeEventListener: () => void
-
-  get mediaInstance(): HTMLAudioElement | HTMLVideoElement | AudioLike {
-    if (!this.videoUrl) {
-      return this.audioLikeInstance
-    }
-
-    if (getMediaType(this.videoUrl) === 'audio') {
-      return this.audioInstance
-    }
-
-    const uniforms = (this.material as THREE.ShaderMaterial).uniforms
-    const videoInstance = uniforms.map.value.image as HTMLVideoElement
-
-    return videoInstance
-  }
-
-  /**
-   *
-   * @param width
-   * @param height
-   * @param widthSegments
-   * @param heightSegments
-   * @param options
-   */
-  constructor(
-    width: number,
-    height: number,
-    widthSegments: number,
-    heightSegments: number,
-    options: VideoAgentMeshOptions = {
-      preload: true
-    },
-  ) {
-    if (!options.videoInstance) {
-      if (cacheInstance.videoInstance) {
-        options.videoInstance = cacheInstance.videoInstance
-      } else {
-        const videoInstance = document.createElement('video')
-        videoInstance.style.opacity = '0'
-        videoInstance.style.pointerEvents = 'none'
-        videoInstance.style.display = 'none'
-        document.body.append(videoInstance)
-        options.videoInstance = videoInstance
-        cacheInstance.videoInstance = videoInstance
-        videoInstance.playsInline = true
-        videoInstance.controls = false
-      }
-    }
-
-    const geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
-    const videoTexture = new THREE.VideoTexture(options.videoInstance)
-    const material = new THREE.ShaderMaterial({
-      uniforms: {
-        map: { value: videoTexture },
-        enable: { value: 0 },
-      },
-      vertexShader,
-      fragmentShader: fragmentShaderTpl(),
-      transparent: true,
-    })
-
-    super(geometry, material)
-    this.options = options
-    this.freeze = false
-    this.paused = true
-
-    if (!options.audioInstance) {
-      if (cacheInstance.audioInstance) {
-        this.audioInstance = cacheInstance.audioInstance
-      } else {
-        const audioInstance = document.createElement('audio')
-        audioInstance.crossOrigin = ''
-        // videoInstance.muted = true
-        audioInstance.muted = false
-        audioInstance.autoplay = false
-        audioInstance.style.display = 'none'
-        document.body.appendChild(audioInstance)
-        this.audioInstance = audioInstance
-        cacheInstance.audioInstance = audioInstance
-      }
-    } else {
-      this.audioInstance = options.audioInstance
-    }
-
-    this.audioLikeInstance = new AudioLike()
-
-    makeObservable(this, { paused: observable })
-
-    const updatePaused = (paused: boolean) => runInAction(() => (this.paused = paused))
-    const onPause = () => updatePaused(true)
-    const onPlay = () => updatePaused(false)
-    const onEnded = () => console.log('vreo: video 播放结束')
-
-    this.audioInstance.addEventListener('pause', onPause)
-    this.audioInstance.addEventListener('play', onPlay)
-    this.options.videoInstance?.addEventListener('pause', onPause)
-    this.options.videoInstance?.addEventListener('play', onPlay)
-    this.audioLikeInstance.addEventListener('pause', onPause)
-    this.audioLikeInstance.addEventListener('play', onPlay)
-    this.options.videoInstance?.addEventListener('ended', onEnded)
-
-    this.$removeEventListener = () => {
-      this.audioInstance.removeEventListener('pause', onPause)
-      this.audioInstance.removeEventListener('play', onPlay)
-      this.options.videoInstance?.removeEventListener('pause', onPause)
-      this.options.videoInstance?.removeEventListener('play', onPlay)
-      this.audioLikeInstance.removeEventListener('pause', onPause)
-      this.audioLikeInstance.removeEventListener('play', onPlay)
-      this.options.videoInstance?.removeEventListener('ended', onEnded)
-    }
-  }
-
-  private async update(videoUrl: string) {
-
-    if (this.videoUrl === videoUrl) {
-      return
-    }
-
-    this.videoUrl = videoUrl
-
-    // // 兼容非视频场景
-    // if (this.mediaInstance instanceof HTMLAudioElement) {
-    //   this.mediaInstance.style.display = 'none'
-    // } else if (this.mediaInstance instanceof HTMLVideoElement) {
-    //   this.mediaInstance.style.display = 'block'
-    // }
-
-    this.freeze = true
-    await this.mediaInstance.pause()
-
-    const uniforms = (this.material as THREE.ShaderMaterial).uniforms
-    this.mediaInstance.muted = true
-
-    this.mediaInstance.src = (this.options.preload || this.options.preload === undefined || getMediaType(this.videoUrl) === 'video') ?
-      await URL.createObjectURL((await Preloader.blob(this.videoUrl)) as unknown as Blob) : this.videoUrl
-    this.mediaInstance.setAttribute('data-src', this.videoUrl)
-
-    const onStart = () => {
-      if (this.mediaInstance.currentTime === 0) return
-      this.freeze = false
-      this.mediaInstance.muted = false
-      uniforms.enable.value = getMediaType(this.videoUrl) ? 1 : 0
-      this.mediaInstance.removeEventListener('timeupdate', onStart, false)
-
-    }
-
-    this.mediaInstance.addEventListener('timeupdate', onStart, false)
-  }
-
-  async play(videoUrl = '', currentTime = 0, duration?: number) {
-    videoUrl = videoUrl || ''
-
-    if (duration && !videoUrl) {
-      if (this.currentTime) {
-        this.mediaInstance.currentTime = currentTime
-      }
-      (this.mediaInstance as AudioLike).duration = duration
-      this.videoUrl = ''
-      this.mediaInstance.play()
-      return true
-    }
-
-    if (!videoUrl) {
-      if (this.videoUrl) await this.mediaInstance.play()
-      else console.warn('警告：视频资源未初始化。')
-      return true
-    }
-
-    if (videoUrl === this.videoUrl) {
-      this.mediaInstance.currentTime = currentTime
-      await this.mediaInstance.play()
-      return true
-    }
-
-    await this.update(videoUrl)
-
-    this.mediaInstance.pause()
-
-    return await new Promise((resolve) =>
-      setTimeout(async () => {
-        this.mediaInstance.currentTime = currentTime
-        await this.mediaInstance.play()
-        resolve(true)
-      }, 20),
-    )
-  }
-
-  /**
-   * 转成毫秒，保障精准度
-   */
-  get currentTime() {
-    return this.mediaInstance.currentTime * 1000
-  }
-
-  dispose() {
-    // 销毁事件监听
-    this.$removeEventListener()
-    if (cacheInstance.audioInstance) {
-      document.body.removeChild(cacheInstance.audioInstance)
-      cacheInstance.audioInstance = undefined
-    }
-
-    if (cacheInstance.videoInstance) {
-      document.body.removeChild(cacheInstance.videoInstance)
-      cacheInstance.videoInstance = undefined
-    }
-  }
-}

package/resources/Player/modules/VideoAgent/VideoAgentScene.ts

@@ -1,56 +0,0 @@
-import * as THREE from 'three'
-import { addResizeListener } from '../../../shared-utils/addResizeListener'
-import { getMediaType } from '../../../shared-utils/getMediaInfo'
-import { VideoAgentMesh, VideoAgentMeshOptions } from './VideoAgentMesh'
-
-export class VideoAgentScene {
-  videoAgentMesh: VideoAgentMesh
-
-  scene = new THREE.Scene()
-  camera = new THREE.OrthographicCamera(-240, 240, 135, -135)
-  renderer = new THREE.WebGLRenderer({ alpha: true })
-  disposers: (() => void)[] = []
-
-  constructor(container?: HTMLElement, options?: VideoAgentMeshOptions) {
-
-    this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1, options)
-
-    // const needRender = getMediaType(this.videoAgentMesh.videoUrl) === 'video'
-
-    if (container) {
-
-      this.camera.position.set(0, 0, 10)
-      this.camera.lookAt(0, 0, 0)
-
-      const domElement = this.renderer.domElement
-      domElement.classList.add('VideoAgent-canvas')
-
-      const dispose = addResizeListener(container, (width, height) => {
-        this.renderer.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio)
-        domElement.style.width = `${width}px`
-        domElement.style.height = `${height}px`
-      } )
-
-      this.disposers.push(dispose)
-
-      container.append(domElement)
-      this.scene.add(this.videoAgentMesh)
-      
-      this.run()
-    }
-  }
-
-  run = () => {
-    // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
-    if (!(this.videoAgentMesh.paused || this.videoAgentMesh.freeze) && this.videoAgentMesh.currentTime > 1000) {
-      this.renderer.render(this.scene, this.camera)
-    }
-
-    requestAnimationFrame(this.run)
-  }
-
-  dispose = () => {
-    this.videoAgentMesh?.dispose()
-    this.disposers.forEach(disposer => disposer?.())
-  }
-}

package/resources/Player/modules/VideoAgent/index.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react'
-import { useController } from '../../hooks'
-import { VideoAgentMeshOptions } from './VideoAgentMesh'
-import { VideoAgentScene } from './VideoAgentScene'
-import classNames from 'classnames'
-
-export function VideoAgent(props: { onClick?: () => void; options?: VideoAgentMeshOptions }) {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const controller = useController()
-
-  const showAvatar = React.useMemo(() => {
-    return controller.avatar?.url && (controller.avatar.force === true)
-  }, [controller.avatar])
-
-  const showVideoAgent = React.useMemo(() => {
-    if (showAvatar) return false
-    return controller.videoAgentScene?.videoAgentMesh.mediaInstance instanceof HTMLVideoElement
-  }, [controller.videoAgentScene])
-
-  React.useEffect(() => {
-    if (!ref.current) throw new Error('React 渲染异常，请稍后重试 ...')
-    if (controller.videoAgentScene) {
-      console.warn('VideoAgentScene" 重复初始化，已被过滤')
-      return
-    }
-    const videoAgentScene = new VideoAgentScene(ref.current, props.options)
-    controller.videoAgentScene = videoAgentScene
-
-    return () => {
-      controller.dispose()
-      controller.videoAgentScene?.dispose()
-    }
-  }, [])
-
-  return (
-    <>
-      <div className="Avatar" style={{display: showAvatar ? 'block' : 'none'}}>
-        <div className="Avatar-wrapper ratio-1-1">
-          <img className="Avatar-img" src={controller.avatar?.url} onClick={() => props.onClick?.()} />
-        </div>
-      </div>
-      <div className={classNames('VideoAgent', { hide: !showVideoAgent })}>
-        <div className="VideoAgent-container">
-          <div className="VideoAgent-wrapper ratio-16-9">
-            <div className="VideoAgent-inner" ref={ref}>
-              <div className="VideoAgent-play" onClick={() => props.onClick?.()}></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

package/resources/Player/modules/Wave/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { WaveAppearance } from '../../typings'
-
-export function Wave(props?: { appearance?: WaveAppearance }) {
-  const waveUrl = React.useMemo(() => {
-    const appearance = props?.appearance ?? 'solid'
-    switch (appearance) {
-      default:       return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm'
-      case 'solid':  return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm'
-      case 'single': return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-single.eda65de390a830193fff40d1f1255555.webm'
-      case 'double': return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-double.77dfe8548ebcb3f3d336785d4fe9c7b2.webm'
-      case 'swap':   return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-swap.c02e4b94cf05aecf6e7a0023bc7bb90f.webm'
-      case 'expand': return 'https://vr-public.realsee-cdn.cn/release/static/image/release/vapor/static/wave-expand.a0d2a0074001cd3d4fea56818c6d3c38.webm'
-    }
-  }, [props?.appearance])
-
-  return <video className='vreo-wave' width="100%" preload="auto" muted autoPlay loop playsInline disablePictureInPicture controls={false} src={waveUrl} />
-}

package/resources/Player/modules/keyframes/BgMusic/index.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react'
-import { BgMusicData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController } from '../../../hooks'
-
-export function BgMusic() {
-  const controller = useController()
-  const timeoutIdRef = React.useRef<NodeJS.Timeout | null>(null)
-  const cleanTimeout = React.useCallback( () => {
-    if (timeoutIdRef.current) {
-      clearTimeout(timeoutIdRef.current)
-      timeoutIdRef.current = null
-    }
-  }, [])
-
-  React.useEffect(() => {
-    const audio = new Audio()
-    audio.setAttribute('id', 'vreo-singleton-bgmusic')
-    audio.style.display = 'none'
-
-    audio.setAttribute('playsinline', 'true')
-    audio.loop = true
-    document.body.append(audio)
-
-    const callback = (keyframe: VreoKeyframe) => {
-      const { start, end } = keyframe
-      const { url } = keyframe.data as BgMusicData
-      audio.src = url
-      const playCallback = () => {
-        audio.play()
-      }
-  
-      audio.addEventListener('canplaythrough', playCallback)
-
-      cleanTimeout()
-    
-      const cleanAudio = () => {
-        audio.pause()
-        audio.currentTime = 0
-        audio.src = ''
-        cleanTimeout()
-        audio.removeEventListener('canplaythrough', playCallback)
-      }
-  
-      const duration = (end - start) || 5000
-    
-      timeoutIdRef.current = setTimeout(() => {
-        cleanAudio()
-      }, duration)
-
-      controller.once('paused', () => {
-        cleanAudio()
-      })
-
-    }
-
-    controller.on(VreoKeyframeEnum.BgMusic, callback)
-
-    return () => {
-      controller.off(VreoKeyframeEnum.BgMusic, callback)
-      document.body.removeChild(audio)
-      cleanTimeout()
-    }
-  })
-
-  return <></>
-}

package/resources/Player/modules/keyframes/CameraMovement/index.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react'
-import { CameraMovementPlugin } from '../../../../fivePlugins/CameraMovementPlugin'
-import { CameraMovementEffect, MoveArgs, RotateArgs } from '../../../../fivePlugins/CameraMovementPlugin/typings'
-import { CameraMovementData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController, useFiveInstance } from '../../../hooks'
-
-export function CameraMovement() {
-  const controller = useController()
-  const five = useFiveInstance()
-  const ref = React.useRef<ReturnType<typeof CameraMovementPlugin>>()
-
-  React.useEffect(() => {
-    const callback = async (keyframe: VreoKeyframe) => {
-      if (!ref.current) {
-        ref.current = CameraMovementPlugin(five, {})
-      }
-      const { start, end, data } = keyframe
-      const cameraMovementData = data as CameraMovementData
-      const effect = cameraMovementData.effect
-      if (effect === CameraMovementEffect.Rotate) {
-        await ref.current.rotate(data as RotateArgs, end - start)
-      } else if (effect === CameraMovementEffect.Move) {
-        await ref.current.move(data as MoveArgs, end - start)
-      } else if (cameraMovementData.panoIndex !== undefined && cameraMovementData.panoIndex !== five.panoIndex) {
-        await ref.current.move(data as MoveArgs, end - start)
-      } else {
-        await ref.current.rotate(data as RotateArgs, end - start)
-      }
-    }
-
-    controller.on(VreoKeyframeEnum.CameraMovement, callback)
-    return () => {
-      controller.off(VreoKeyframeEnum.CameraMovement, callback)
-    }
-  }, [controller])
-  return <></>
-}