https://assets.vocalvideo.com/assets/models/fps_meter-c25d9583.js

1export default class FPSMeter {
2  constructor({ fpsThreshold = 15, measurementPeriod = 1000, lowFPSThreshold = 2 } = {}) {
3    this.fpsThreshold      = fpsThreshold      // FPS below this is considered "low"
4    this.measurementPeriod = measurementPeriod // Time in ms to measure FPS
5    this.lowFPSThreshold   = lowFPSThreshold   // Number of consecutive low measurements to trigger event
6
7    this.monitoring    = false
8    this.frameCount    = 0
9    this.lastCheckTime = 0
10    this.lowFPSCount   = 0
11    this.rafId         = null
12    this.eventFired    = false
13  }
14
15  // start() {
16  //   if (this.monitoring) return
17
18  //   this.monitoring    = true
19  //   this.frameCount    = 0
20  //   this.lastCheckTime = performance.now()
21  //   this.lowFPSCount   = 0
22  //   this.eventFired    = false
23
24  //   console.log('FPSMeter: Started monitoring')
25
26  //   this.rafId = requestAnimationFrame(this._tick.bind(this))
27  // }
28
29  // stop() {
30  //   if (!this.monitoring) return
31
32  //   this.monitoring = false
33  //   if (this.rafId) {
34  //     cancelAnimationFrame(this.rafId)
35  //     this.rafId = null
36  //   }
37
38  //   console.log('FPSMeter: Stopped monitoring')
39  // }
40
41  // _tick() {
42  //   if (!this.monitoring) return
43
44  //   this.frameCount++
45  //   const now = performance.now()
46  //   const elapsed = now - this.lastCheckTime
47
48  //   // Check if it's time to calculate FPS
49  //   if (elapsed >= this.measurementPeriod) {
50  //     const fps = Math.round((this.frameCount * 1000) / elapsed)
51
52  //     console.log(`FPSMeter: Current FPS: ${fps}`)
53
54  //     if (fps < this.fpsThreshold) {
55  //       this.lowFPSCount++
56  //       console.warn(`FPSMeter: Low performance detected (${fps} FPS). Count: ${this.lowFPSCount}/${this.lowFPSThreshold}`)
57
58  //       if (this.lowFPSCount >= this.lowFPSThreshold && !this.eventFired) {
59  //         this._fireEvent(fps)
60  //         this.eventFired = true
61  //       }
62  //     } else {
63  //       // Reset counter if we get good performance
64  //       this.lowFPSCount = 0
65  //     }
66
67  //     // Reset for next measurement period
68  //     this.frameCount = 0
69  //     this.lastCheckTime = now
70  //   }
71
72  //   // Continue monitoring
73  //   this.rafId = requestAnimationFrame(this._tick.bind(this))
74  // }
75
76  _fireEvent(fps) {
77    const event = new CustomEvent('recorder:low-performance-detected', {
78      detail: {
79        fps,
80        threshold: this.fpsThreshold
81      }
82    })
83
84    window.dispatchEvent(event)
85  }
86
87  checkOnce(duration = 2000) {
88    return new Promise((resolve) => {
89      this.frameCount = 0
90      this.lastCheckTime = performance.now()
91
92      const tick = () => {
93        this.frameCount++
94
95        const now = performance.now()
96        const elapsed = now - this.lastCheckTime
97
98        if (elapsed >= duration) {
99          const fps = Math.round((this.frameCount * 1000) / elapsed)
100
101          if (fps < this.fpsThreshold) {
102            this.lowFPSCount++
103            // console.warn(`FPSMeter: Low performance detected (${fps} FPS). Count: ${this.lowFPSCount}/${this.lowFPSThreshold}`)
104            this._fireEvent(fps)
105          }
106
107          resolve(fps)
108          return
109        }
110        requestAnimationFrame(tick)
111      }
112
113      requestAnimationFrame(tick)
114    })
115  }
116}