@havue/solutions 1.1.1 → 1.2.0

package/ws-video-manager/src/manager/index.ts

@@ -15,21 +15,31 @@ import { CanvasDrawer } from '../render/drawer'
 
 // #region typedefine
 export type WsVideoManaCstorOptionType = {
-  /** 预监流连接数量限制, 移动端默认10个，pc端默认32个 */
+  /**
+   * websocket流连接数量限制, 移动端默认10个，pc端默认32个
+   * Limit the number of websocket streaming connections to 10 by default for mobile and 32 by default for pc
+   */
   connectLimit?: number
-  /** WebSocketLoader 实例配置 */
+  /** WebSocketLoader configuration */
   wsOptions?: WebSocketOptionsType
   /**
    * websocket重连时，重新解析视频编码方式，
    * 默认 true
+   *
+   * When the websocket reconnects, the video encoding is reparsed.
+   * The default is true
    */
   reparseMimeOnReconnect?: boolean
   /** Render 实例配置 */
   renderOptions?: Partial<RenderConstructorOptionType>
   /**
-   * 是否使用WebGL，
-   * 默认 false，
-   * WebGL在不同游览器，以及受限于显存，不能同时创建过多WebGL上下文，一般8-16个 */
+   * 是否使用WebGL，默认 false，
+   * WebGL在不同游览器，以及受限于显存，不能同时创建过多WebGL上下文，一般8-16个
+   *
+   * Whether to use WebGL, false by default,
+   * WebGL can not be created too many WebGL contexts at the same time in different browsers,
+   *  and due to the limitations of video memory, usually 8-16 WebGL contexts
+   */
   useWebgl?: boolean
 }
 
@@ -44,11 +54,11 @@ const DEFAULT_OPTIONS: Required<WsVideoManaCstorOptionType> = Object.freeze({
 })
 
 type WsInfoType = {
-  /** 需要绘制的canvas列表 */
+  /** 需要绘制的canvas map | canvas map to be drawn */
   canvasMap: Map<HTMLCanvasElement, CanvasDrawer>
-  /** WebSocketLoader 实例 */
+  /** WebSocketLoader instance */
   socket: WebSocketLoader
-  /** socket连接渲染render实例 */
+  /** Render instance */
   render: Render
 }
 
@@ -72,7 +82,7 @@ export const WsVideoManagerEventEnums = Object.assign({}, EventEnums, RenderEven
 // #endregion typedefine
 
 export class WsVideoManager extends EventBus<Events> {
-  /** socket连接 渲染相关对应信息 */
+  /** socket相关信息map | map of socket information */
   private _wsInfoMap: Map<string, WsInfoType> = new Map()
 
   private _option: Required<WsVideoManaCstorOptionType> = DEFAULT_OPTIONS
@@ -116,8 +126,8 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * 添加socket实例
-   * @param url socket地址
+   * 添加socket连接 | Adding a socket connection
+   * @param url socket url
    * @returns
    */
   private _addSocket(url: string, renderOptions?: Partial<RenderConstructorOptionType>) {
@@ -148,9 +158,9 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * 绑定render事件
-   * @param url 连接地址
-   * @param render Render实例
+   * 绑定render事件 | Binding the render event
+   * @param url 连接地址 | websocket url
+   * @param render Render instance
    */
   private _bindRenderEvent(url: string, render: Render) {
     render.on(RenderEventsEnum.AUDIO_STATE_CHANGE, (state) => {
@@ -165,8 +175,8 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * 销毁socket实例
-   * @param url socket地址
+   * Destroying the socket connect
+   * @param url socket url
    */
   private _removeSocket(url: string) {
     const wsInfo = this._wsInfoMap.get(url)
@@ -181,9 +191,9 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * 绑定socket事件
-   * @param url 连接地址
-   * @param socket WebSocketLoader实例
+   * 绑定socket事件 | Binding socket events
+   * @param url websocket url
+   * @param socket WebSocketLoader instance
    */
   private _bindSocketEvent(socket: WebSocketLoader, render: Render, url: string) {
     socket.on('close', () => {
@@ -217,8 +227,8 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * url对应的 socket实例是否已存在
-   * @param url socket地址
+   * url对应的 socket实例是否已存在 | Whether the socket instance for the url already exists
+   * @param url websocket url
    * @returns boolean
    */
   private _isSocketExist(url: string): boolean {
@@ -227,8 +237,9 @@ export class WsVideoManager extends EventBus<Events> {
 
   /**
    * 添加url对应socket，以及需要绘制的canvas元素
-   * @param canvas canvas元素
-   * @param url socket url地址
+   * Add the socket for the url and the canvas element to draw
+   * @param canvas canvas
+   * @param url websocket url
    */
   public addCanvas(canvas: HTMLCanvasElement, url: string, renderOptions?: Partial<RenderConstructorOptionType>) {
     this._addSocket(url, renderOptions)
@@ -250,8 +261,8 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * 初始化canvas背景
-   * @param canvas canvas元素
+   * 初始化canvas背景 | Initialize the canvas background
+   * @param canvas canvas
    * @returns
    */
   // private _setupCanvas(canvas: HTMLCanvasElement) {
@@ -264,8 +275,8 @@ export class WsVideoManager extends EventBus<Events> {
   // }
 
   /**
-   * 删除canvas元素
-   * @param canvas canvas元素
+   * 删除canvas元素 || Remove the canvas element
+   * @param canvas canvas
    */
   public removeCanvas(canvas: HTMLCanvasElement) {
     const entries = this._wsInfoMap.entries()
@@ -284,8 +295,8 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * 返回canvas是否已经添加过
-   * @param canvas canvas元素
+   * 获取canvas是否已经添加过 | Gets whether the canvas has already been added
+   * @param canvas canvas
    * @returns boolean
    */
   public isCanvasExist(canvas: HTMLCanvasElement): boolean {
@@ -295,14 +306,14 @@ export class WsVideoManager extends EventBus<Events> {
     })
   }
 
-  /** 设置全部render静音状态 */
+  /** 设置全部render静音状态 | Mute all render */
   public setAllVideoMutedState(muted: boolean) {
     this._wsInfoMap.forEach((wsInfo) => {
       wsInfo.render.muted = muted
     })
   }
 
-  /** 更新单个render实例的配置 */
+  /** 更新单个render实例的配置 | Update the configuration of a single render instance */
   public updateRenderOptions(url: string, options?: Partial<RenderConstructorOptionType>) {
     if (options) {
       const wsInfo = this._wsInfoMap.get(url)
@@ -311,9 +322,9 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * 设置单个render静音状态
+   * 设置单个render静音状态 | Set a single render to be silent
    * @param url
-   * @param muted boolean 是否静音
+   * @param {boolean} muted  是否静音 | Muted or not
    */
   public setOneMutedState(url: string, muted: boolean) {
     const wsInfo = this._wsInfoMap.get(url)
@@ -325,7 +336,8 @@ export class WsVideoManager extends EventBus<Events> {
 
   /**
    * 获取url对应render video元素是否静音
-   * @param url socket地址
+   * Gets whether the render video element of the url is muted
+   * @param url websocket url
    */
   public getOneMutedState(url: string) {
     const wsInfo = this._wsInfoMap.get(url)
@@ -337,7 +349,8 @@ export class WsVideoManager extends EventBus<Events> {
 
   /**
    * 单个解除静音，其他未静音的变成静音，只播放一个
-   * @param url socket地址
+   * Unmute a single video and mute all other videos
+   * @param url websocket url
    */
   public playOneAudio(url: string) {
     this.setAllVideoMutedState(true)
@@ -346,6 +359,7 @@ export class WsVideoManager extends EventBus<Events> {
 
   /**
    * 设置单个render是否继续处理ws数据
+   * Sets whether a single render continues to process ws data
    * @param url
    */
   public setOneVideoPausedState(url: string, paused: boolean) {
@@ -356,7 +370,7 @@ export class WsVideoManager extends EventBus<Events> {
     wsInfo.render.paused = paused
   }
 
-  /** 设置全部render是否继续处理ws数据 */
+  /** 设置全部render是否继续处理ws数据 | Sets whether all render continues to process ws data */
   public setAllVideoPausedState(paused: boolean) {
     this._wsInfoMap.forEach((wsInfo) => {
       wsInfo.render.paused = paused
@@ -364,8 +378,9 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * 获取url对应render video元素是否继续播放
-   * @param url socket地址
+   * 获取url对应render video元素的播放状态
+   * Get the playback status of the render video element corresponding to the url
+   * @param url websocket url
    */
   public getOneVideoPausedState(url: string) {
     const wsInfo = this._wsInfoMap.get(url)
@@ -377,7 +392,8 @@ export class WsVideoManager extends EventBus<Events> {
 
   /**
    * 单个视频继续播放，其他暂停处理数据
-   * @param url socket地址
+   * A single video continues to play while others pause to process data
+   * @param url websocket url
    */
   public playOneVideo(url: string) {
     this.setAllVideoPausedState(true)
@@ -386,6 +402,7 @@ export class WsVideoManager extends EventBus<Events> {
 
   /**
    * 刷新socket，以及播放时间
+   * Refresh the socket, and the playback time
    */
   public refresh(url?: string) {
     if (url) {
@@ -407,7 +424,7 @@ export class WsVideoManager extends EventBus<Events> {
   }
 
   /**
-   * 销毁
+   * 销毁 | Destroy
    */
   public destroy() {
     this._wsInfoMap.forEach((wsInfo) => {

package/ws-video-manager/src/render/drawer.ts

@@ -1,5 +1,5 @@
 /**
- * 绘制视频到canvas中
+ * 绘制视频到canvas中 | Draw video into canvas
  */
 class CanvasDrawer {
   private _canvas: HTMLCanvasElement | null = null
@@ -36,12 +36,12 @@ class CanvasDrawer {
   }
 
   /**
-   * 初始化 webgl
+   * 初始化 webgl | Initialize webgl
    */
   private initGl() {
     if (!this._canvas) return
 
-    // 初始化 gl
+    // 初始化 gl | Initialize gl
     this._gl = this._canvas.getContext('webgl') || this._canvas.getContext('webgl2')
     if (!this._gl) {
       console.error('WebGL not supported')
@@ -61,17 +61,17 @@ class CanvasDrawer {
 
     if (!program) return
 
-    // 坐标缓冲
+    // 坐标缓冲 | Position buffer
     const positionBuffer = gl.createBuffer()
     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW)
 
-    // 纹理坐标缓冲
+    // 纹理坐标缓冲 | Texture coordinate buffer
     const texCoordBuffer = gl.createBuffer()
     gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer)
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), gl.STATIC_DRAW)
 
-    // 纹理
+    // 纹理 | Texture
     const texture = gl.createTexture()
     gl.bindTexture(gl.TEXTURE_2D, texture)
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
@@ -79,12 +79,12 @@ class CanvasDrawer {
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
 
-    // 着色器变量的引用
+    // 着色器变量的引用 | References to shader variables
     const positionLocation = gl.getAttribLocation(program, 'a_position')
     const texCoordLocation = gl.getAttribLocation(program, 'a_texCoord')
     const textureLocation = gl.getUniformLocation(program, 'u_texture')
 
-    // 缓存数据
+    // 缓存数据 | Caching data
     this._program = program
     this._positionBuffer = positionBuffer
     this._texCoordBuffer = texCoordBuffer
@@ -93,15 +93,15 @@ class CanvasDrawer {
     this._texCoordLocation = texCoordLocation
     this._textureLocation = textureLocation
 
-    // 设置标志
+    // 设置标志 | gl is Ready
     this._glReady = true
   }
 
   /**
-   * 创建着色器源码
+   * 创建着色器源码 | Create shader source code
    */
   private createShaderSource(gl: WebGLRenderingContext, type: number) {
-    // 顶点着色器
+    // 顶点着色器 | Vertex shaders
     const vertexShaderSource = `
       attribute vec2 a_position;
       attribute vec2 a_texCoord;
@@ -112,7 +112,7 @@ class CanvasDrawer {
       }
     `
 
-    // 片段着色器
+    // 片段着色器 | Fragment shader
     const fragmentShaderSource = `
       precision mediump float;
       varying vec2 v_texCoord;
@@ -130,7 +130,7 @@ class CanvasDrawer {
   }
 
   /**
-   * 创建着色器
+   * 创建着色器 | Create shaders
    */
   private createShader(gl: WebGLRenderingContext, type: number, source: string) {
     const shader = gl.createShader(type)
@@ -154,7 +154,7 @@ class CanvasDrawer {
   }
 
   /**
-   * 创建着色器程序
+   * 创建着色器程序 | Create program
    */
   private createProgram(gl: WebGLRenderingContext, vertexShader: WebGLShader, fragmentShader: WebGLShader) {
     const program = gl.createProgram()
@@ -179,7 +179,7 @@ class CanvasDrawer {
   }
 
   /**
-   * 绘制
+   * 绘制 | draw
    */
   public draw(video: HTMLVideoElement) {
     if (this._useGl) {
@@ -193,22 +193,23 @@ class CanvasDrawer {
       const texCoordLocation = this._texCoordLocation
       const textureLocation = this._textureLocation!
 
-      // 更新视口区域
+      // 更新视口区域 | Update the viewport area
       gl.viewport(0, 0, this._canvas.width, this._canvas.height)
 
       if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) return
 
-      // 更新纹理
+      // 更新纹理 | Update texture
       gl.bindTexture(gl.TEXTURE_2D, texture)
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video)
 
-      // 清理画布
+      // 清理画布 | Clean the canvas
       gl.clear(gl.COLOR_BUFFER_BIT)
 
-      // 使用着色器程序
+      // 使用着色器程序 | Use shader programs
       gl.useProgram(program)
 
       // 设置着色器变量对应的 buffer 数据
+      // Set the buffer corresponding to the shader variable
       gl.enableVertexAttribArray(positionLocation)
       gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
       gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)
@@ -220,6 +221,7 @@ class CanvasDrawer {
       gl.uniform1i(textureLocation, 0)
 
       // 绘制(两个三角形六个顶点, 组成一个矩形)
+      // Draw (two triangles with six vertices, forming a rectangle)
       gl.drawArrays(gl.TRIANGLES, 0, 6)
     } else {
       const ctx = this._ctx2d
@@ -234,7 +236,7 @@ class CanvasDrawer {
   }
 
   /**
-   * 销毁
+   * 销毁 | Destroy
    */
   public destroy() {
     this._canvas = null

package/ws-video-manager/src/render/index.ts

@@ -3,11 +3,21 @@ import { EventBus } from '@havue/shared'
 
 // #region typedefine
 export type RenderConstructorOptionType = {
-  /** 当前播放currentTime和最新视频时长最多相差 秒数，默认0.3s */
+  /**
+   * 当前播放currentTime和最新视频时长最多相差 秒数，默认0.3s
+   * The delay of currentTime relative to the latest video duration is 0.3s by default
+   */
   liveMaxLatency: number
-  /** 最多缓存ws传输的未处理的buffer数据大小, 默认200kb */
+  /**
+   * 最多缓存ws传输的未处理的buffer数据大小, 默认200kb。
+   * The maximum amount of unprocessed buffer data to be cached for websocket transfers.
+   * 200kb by default
+   */
   maxCacheBufByte: number
-  /** 最多存储的时间，用于清除在currentTime之前x秒时间节点前的buffer数据, 默认10s */
+  /**
+   * 最多存储的时间，用于清除在currentTime之前x秒时间节点前的buffer数据, 默认10s
+   * The maximum amount of time used to clear the buffer before a time node x seconds before currentTime (default 10s)
+   */
   maxCache: number
 }
 
@@ -52,32 +62,35 @@ export type RenderEvents = {
 // let curPosY = 0
 
 export class Render extends EventBus<RenderEvents> {
-  /** video元素 */
+  /** video元素 | videw element */
   private _videoEl: HTMLVideoElement | undefined = undefined
-  /** mp4box 实例 */
+  /** mp4box file */
   private _mp4box: MP4Box = MP4Box.createFile()
-  /** mp4box onFragment获取的视频数据buffer数组 */
+  /**
+   * mp4box onFragment获取的视频数据buffer数组
+   * mp4box onFragment gets a buffer array of audio and video data
+   */
   private _audioBufsQueue: ArrayBuffer[] = []
   private _videoBufsQueue: ArrayBuffer[] = []
-  /** MediaSource 实例 */
+  /** MediaSource instance */
   private _mediaSource: MediaSource | undefined
-  /** SourceBuffer 实例 */
+  /** SourceBuffer instance */
   private _audioSourceBuffer: SourceBuffer | undefined
   private _videoSourceBuffer: SourceBuffer | undefined
 
   private _audioTrackId: number | undefined
   private _videoTrackId: number | undefined
-  /** 用于MediaSource的mimeType */
+  /** 用于MediaSource的mimeType | mime type of the video */
   private _mimeType: string = ''
   private _audioMimeType: string = ''
   private _videoMimeType: string = ''
-  /** 是否暂停播放 */
+  /** 是否暂停播放 | Pause or not */
   private _paused: boolean = false
   private _options: RenderConstructorOptionType
 
   private _cacheAnimationID: number | undefined = undefined
 
-  /** fmp4初始化片段是否已经添加 */
+  /** fmp4初始化片段是否已经添加 | fmp4 Initializes whether the fragment has been added */
   private _isAudioInitSegmentAdded: boolean = false
   private _isVideoInitSegmentAdded: boolean = false
   private _offset: number = 0
@@ -122,7 +135,7 @@ export class Render extends EventBus<RenderEvents> {
     return this._videoEl
   }
 
-  /** 更新实例配置 */
+  /** 更新实例配置 | Update configuration */
   public updateOptions(option: Partial<RenderConstructorOptionType> = {}) {
     Object.assign(this._options, {
       ...option
@@ -130,7 +143,7 @@ export class Render extends EventBus<RenderEvents> {
   }
 
   /**
-   * 添加视频流buffer数据
+   * 添加视频流buffer数据 | Add video stream buffer data
    * @param buf
    */
   public appendMediaBuffer(bufs: Array<ArrayBuffer & { fileStart: number }>) {
@@ -146,8 +159,8 @@ export class Render extends EventBus<RenderEvents> {
   }
 
   /**
-   * mp4box解析完成
-   * @param info mp4box解析信息
+   * mp4box解析完成 | handle Mp4box onReady
+   * @param info mp4box解析信息 | mp4box parses the information
    */
   private _onMp4boxReady(info: any) {
     console.log('onMp4boxReady', info)
@@ -206,7 +219,7 @@ export class Render extends EventBus<RenderEvents> {
     }
     const sourceBuffer = isVideo ? this._videoSourceBuffer : this._audioSourceBuffer
     bufQueue.push(buffer)
-    // 清除已使用的samples
+    // 清除已使用的samples | Clear the used samples
     this._mp4box.releaseUsedSamples(id, sampleNumber)
     this._mp4box.removeUsedSamples(id)
     const segmentAdded = isAudio ? this._isAudioInitSegmentAdded : this._isVideoInitSegmentAdded
@@ -230,7 +243,7 @@ export class Render extends EventBus<RenderEvents> {
   }
 
   /**
-   * 初始化视频元素
+   * 初始化视频元素 | Initialize the video element
    */
   private _setupVideo() {
     this._videoEl = document.createElement('video')
@@ -269,11 +282,19 @@ export class Render extends EventBus<RenderEvents> {
     })
 
     /**
-     * bug: 因预监画面播放一段时间后，
+     * @bug : 因预监画面播放一段时间后，
      * 虽然视频时间在走，但video的画面会暂停,
      * 发现将视频元素添加到视口中，画面就不会暂停，
      * 可能与浏览器的资源优化策略有关，先将video标签添加到视口中,
      * 后面有时间寻找一下是否有其他解决方案
+     *
+     * @bug :After the pre-monitoring screen plays for a period of time,
+     * although the video time is running, the video screen will pause.
+     *  It is found that the video element is added to the viewport,
+     *  and the screen will not pause.
+     *  This may be related to the resource optimization strategy of the browser,
+     *  so the video tag will be added to the viewport first,
+     *  and then we have time to find out whether there are other solutions
      */
     // this._videoEl.controls = true
     document.body.appendChild(this._videoEl)
@@ -314,6 +335,7 @@ export class Render extends EventBus<RenderEvents> {
 
   /**
    * 是否支持Media Source Extention
+   * whether Media Source Extention is supported
    * @returns boolean
    */
   public isSupportMSE() {
@@ -321,7 +343,7 @@ export class Render extends EventBus<RenderEvents> {
   }
 
   /**
-   * 初始化MSE
+   * 初始化MSE | Init MSE
    * @returns
    */
   private _setupMSE(): void {
@@ -346,14 +368,14 @@ export class Render extends EventBus<RenderEvents> {
         return
       }
 
-      // 音频轨
+      // 音频轨 | Audio track
       if (this._audioMimeType) {
         this._audioSourceBuffer = this._mediaSource.addSourceBuffer(this._audioMimeType)
         this._audioSourceBuffer.mode = 'sequence'
         this._setupSourceBuffer(this._audioSourceBuffer, false)
       }
 
-      // 视频轨
+      // 视频轨 | Video track
       if (this._videoMimeType) {
         this._videoSourceBuffer = this._mediaSource.addSourceBuffer(this._videoMimeType)
         this._videoSourceBuffer.mode = 'sequence'
@@ -379,13 +401,22 @@ export class Render extends EventBus<RenderEvents> {
 
       if (sourceBuffer.buffered.length > 0) {
         let bufferedLen = sourceBuffer.buffered.length
-        /** 是否需要删除sourceBuffer中的buffer段 */
+        /**
+         * 是否需要删除sourceBuffer中的buffer段
+         * Whether the buffer section in sourceBuffer should be removed
+         */
         const needDelBuf = bufferedLen > 1
         /**
          * sourceBuffer中有多个buffered，时间不连续
          * 导致视频播放到其中一个buffer最后就暂停了
          * 如果出现多个buffered，删除之前有的buffer
          * 使用最新的视频buffer进行播放
+         *
+         * There are multiple buffers in the sourceBuffer,
+         *  and the time is not continuous,
+         *  so the video playback will be paused at the end of one of the buffers.
+         *  If there are multiple buffers,
+         *  delete the previous buffers and use the latest video buffer to play
          */
         if (needDelBuf && currentTime) {
           const lastIndex = bufferedLen - 1
@@ -411,12 +442,12 @@ export class Render extends EventBus<RenderEvents> {
         const end = sourceBuffer.buffered.end(bufferedLen - 1)
 
         if (isVideo) {
-          // 设置开始时间
+          // 设置开始时间 | Set the start time
           if (!currentTime && start) {
             this._videoEl.currentTime = start
           }
 
-          // 限制最低延迟时间
+          // 限制最低延迟时间 | Limit the minimum latency
           if (this._options.liveMaxLatency) {
             const offsetMaxLatency = this._options.liveMaxLatency
 
@@ -426,7 +457,8 @@ export class Render extends EventBus<RenderEvents> {
           }
         }
 
-        // 移除当前时间之前的buffer
+        // 移除最大缓存时间之前的buffer
+        // Remove buffers before the maximum cache time
         if (!sourceBuffer!.updating && currentTime - start > this._options.maxCache) {
           sourceBuffer?.remove(0, currentTime - this._options.maxCache / 2)
         }
@@ -436,6 +468,7 @@ export class Render extends EventBus<RenderEvents> {
 
   /**
    * 将_bufsQueue中的数据添加到SourceBuffer中
+   * Add the data from _bufsQueue to the SourceBuffer
    * @returns
    */
   private _cache(isVideo: boolean = false) {
@@ -491,6 +524,7 @@ export class Render extends EventBus<RenderEvents> {
 
   /**
    * 刷新播放时间为最新
+   * Refresh the playback time to the latest
    */
   public refresh() {
     if (this._videoEl && this._videoEl.buffered.length) {
@@ -499,7 +533,7 @@ export class Render extends EventBus<RenderEvents> {
     }
   }
 
-  /** 重置解析的视频mime type */
+  /** 重置解析的视频mime type | Reset the parsed video mime type */
   public resetMimeType() {
     this.destroyMp4box()
     this.destroyMediaSource()
@@ -553,7 +587,7 @@ export class Render extends EventBus<RenderEvents> {
   }
 
   /**
-   * 销毁
+   * 销毁 | Destroy
    */
   public destroy() {
     if (this._videoEl) {

package/ws-video-manager/src/render/mp4box.ts

@@ -2,7 +2,7 @@ import MP4Box from 'mp4box'
 
 function ExtendMp4box() {
   const MP4BoxFile = MP4Box.createFile().constructor
-  // 清空samples
+  // 清空samples | Clear samples
   MP4BoxFile.prototype.removeUsedSamples = function (id: number) {
     const track = this.getTrackById(id)
     const samples = track.samples