bfg-common 1.3.388 → 1.3.390

package/public/spice-console/application/codec.js

@@ -1,263 +1,263 @@
-wdi.CodecH264 = {
-  video: {},
-  jmuxer: {},
-  loadedVideo: {},
-  queues: {},
-  isReady: {},
-
-  create: function (streamId) {
-    if (this.video[streamId]) return
-
-    const video = document.createElement('video')
-    video.id = `video${streamId}`
-    video.setAttribute('autoplay', '')
-
-    this.video[streamId] = video
-
-    this.jmuxer[streamId] = new JMuxer({
-      node: video,
-      mode: 'video',
-      flushingTime: 0,
-      fps: 60,
-      onReady: () => {
-        this.isReady[streamId] = true
-      },
-    })
-  },
-
-  addQueue: function (streamId, imageData) {
-    if (!this.queues[streamId]) this.queues[streamId] = []
-    this.queues[streamId].push(imageData)
-  },
-
-  resetQueues: function (streamId) {
-    this.queues[streamId] = []
-  },
-
-  feed: function (streamId, data) {
-    this._addListener(streamId)
-
-    if (this.queues[streamId]?.length) {
-      this.queues[streamId].forEach((queue) => {
-        this.jmuxer[streamId].feed({
-          video: queue,
-        })
-      })
-      this.resetQueues(streamId)
-    }
-
-    this.jmuxer[streamId].feed({
-      video: data,
-    })
-  },
-
-  destroy: function (streamId) {
-    this._removeListener(streamId)
-    this.video[streamId]?.remove()
-    this.video = {}
-    this.jmuxer = {}
-    this.loadedVideo = {}
-  },
-
-  _addListener: function (streamId) {
-    this.video[streamId]?.removeEventListener(
-      'loadedmetadata',
-      this.loadedVideo[streamId]
-    )
-    this.video[streamId].addEventListener(
-      'loadedmetadata',
-      this.loadedVideo[streamId]
-    )
-  },
-
-  _removeListener: function (streamId) {
-    this.video[streamId]?.removeEventListener(
-      'loadedmetadata',
-      this.loadedVideo[streamId]
-    )
-  },
-}
-
-wdi.CodecVp8 = {
-  decoders: {},
-
-  create: function (streamId) {
-    this.decoders[streamId] = new vp8_decoder_ctx()
-  },
-
-  destroy: function () {
-    this.decoders = {}
-  },
-
-  feed: function (streamId, imageData, context, box) {
-    const errorCode = vp8_dixie_decode_frame(
-      this.decoders[streamId],
-      imageData,
-      imageData.length
-    )
-    if (VPX_CODEC_OK === errorCode) {
-      this._I420toRGBA(this.decoders[streamId].ref_frames[0].img, context, box)
-    }
-  },
-
-  _I420toRGBA: function (vp8, context, box) {
-    const yuvwidth = vp8.w
-    const height = vp8.d_h
-    const width = vp8.d_w
-
-    let output = context.createImageData(width, height)
-    let outputData = output.data
-    let R, G, B
-
-    for (let h = 0; h < height; h++) {
-      for (let w = 0; w < width; w++) {
-        const Y = vp8.planes[0][vp8.planes_off[0] + 0 + w + yuvwidth * h]
-        const U =
-          vp8.planes[1][
-            vp8.planes_off[1] + 0 + (w >> 1) + (yuvwidth >> 1) * (h >> 1)
-          ]
-        const V =
-          vp8.planes[2][
-            vp8.planes_off[2] + 0 + (w >> 1) + (yuvwidth >> 1) * (h >> 1)
-          ]
-
-        R = Math.round(Y + 1.13983 * (V - 128))
-        G = Math.round(Y - 0.39465 * (U - 128) - 0.5806 * (V - 128))
-        B = Math.round(Y + 2.03211 * (U - 128))
-
-        // outputData[0 + w * 4 + width * 4 * h] = R
-        // outputData[1 + w * 4 + width * 4 * h] = G
-        // outputData[2 + w * 4 + width * 4 * h] = B
-        // outputData[3 + w * 4 + width * 4 * h] = 255
-        // Изменим порядок записи пикселей, чтобы перевернуть изображение
-        const flippedIndex = ((height - 1 - h) * width + w) * 4
-        outputData[flippedIndex] = R
-        outputData[flippedIndex + 1] = G
-        outputData[flippedIndex + 2] = B
-        outputData[flippedIndex + 3] = 255
-      }
-    }
-
-    context.putImageData(output, box.x, box.y)
-  },
-}
-
-wdi.CodecH265 = {
-  queue: {},
-  configed: {},
-  isReady: {},
-  decoders: {},
-  pendingFrames: {},
-  underflow: {},
-  baseTime: {},
-
-  create: async function (streamId, context, box) {
-    const init = {
-      output: this._handleFrame.bind(this, streamId, context, box),
-      error: (e) => {
-        console.log(e)
-      },
-    }
-    const config = {
-      codec: wdi.SpiceVideoCodecValue[wdi.currentCodec],
-      codedWidth: 640,
-      codedHeight: 480,
-    }
-    const { supported } = await VideoDecoder.isConfigSupported(config)
-    // Проверяем поддерживает ли браузер VideoDecoder
-    if (supported) {
-      this.decoders[streamId] = new VideoDecoder(init)
-      this.decoders[streamId].configure(config)
-      this.isReady[streamId] = true
-    } else {
-      // Try another config.
-      console.log('not supported')
-    }
-  },
-
-  destroy: function () {
-    this.queue = {}
-    this.configed = {}
-    this.isReady = {}
-    this.decoders = {}
-    this.pendingFrames = {}
-    this.underflow = {}
-    this.baseTime = {}
-  },
-
-  addQueue: function (streamId, imageData) {
-    if (!this.queues[streamId]) this.queues[streamId] = []
-    this.queues[streamId].push(imageData)
-  },
-
-  resetQueues: function (streamId) {
-    this.queues[streamId] = []
-  },
-
-  setConfig: function (streamId, box) {
-    const config = {
-      codec: wdi.SpiceVideoCodecValue[wdi.currentCodec],
-      codedWidth: box.width,
-      codedHeight: box.height,
-    }
-    this.decoders[streamId].configure(config)
-    this.configed[streamId] = true
-  },
-
-  decode: function (streamId, imageData) {
-    if (this.queue[streamId]?.length) {
-      this.queue[streamId].forEach((data) => {
-        const chunk = new EncodedVideoChunk({
-          type: 'key',
-          data: data,
-          timestamp: performance.now(),
-        })
-        this.decoders[streamId].decode(chunk)
-      })
-      this.resetQueues(streamId)
-    }
-
-    const chunk = new EncodedVideoChunk({
-      type: 'key',
-      data: imageData,
-      timestamp: performance.now(),
-    })
-    this.decoders[streamId].decode(chunk)
-  },
-
-  _handleFrame: function (streamId, context, box, frame) {
-    if (!this.pendingFrames[streamId]) this.pendingFrames[streamId] = []
-    this.pendingFrames[streamId].push(frame)
-
-    if (this.underflow[streamId] === undefined) this.underflow[streamId] = true
-    if (this.underflow[streamId])
-      setTimeout(this._renderFrame.bind(this, streamId, context, box), 0)
-  },
-  _renderFrame: async function (streamId, context, box) {
-    this.underflow[streamId] = this.pendingFrames[streamId].length === 0
-    if (this.underflow[streamId]) return
-
-    const frame = this.pendingFrames[streamId].shift()
-
-    // Based on the frame's timestamp calculate how much of real time waiting
-    // is needed before showing the next frame.
-    const timeUntilNextFrame = this._calculateTimeUntilNextFrame(
-      frame.timestamp,
-      streamId
-    )
-    await new Promise((r) => {
-      setTimeout(r, timeUntilNextFrame)
-    })
-
-    context.drawImage(frame, box.x, box.y, box.width, box.height)
-    frame.close()
-
-    // Immediately schedule rendering of the next frame
-    setTimeout(this._renderFrame.bind(this, streamId, context, box), 0)
-  },
-  _calculateTimeUntilNextFrame: function (timestamp, streamId) {
-    if (!this.baseTime[streamId]) this.baseTime[streamId] = performance.now()
-    const mediaTime = performance.now() - this.baseTime[streamId]
-    return Math.max(0, timestamp / 1000 - mediaTime)
-  },
-}
+wdi.CodecH264 = {
+  video: {},
+  jmuxer: {},
+  loadedVideo: {},
+  queues: {},
+  isReady: {},
+
+  create: function (streamId) {
+    if (this.video[streamId]) return
+
+    const video = document.createElement('video')
+    video.id = `video${streamId}`
+    video.setAttribute('autoplay', '')
+
+    this.video[streamId] = video
+
+    this.jmuxer[streamId] = new JMuxer({
+      node: video,
+      mode: 'video',
+      flushingTime: 0,
+      fps: 60,
+      onReady: () => {
+        this.isReady[streamId] = true
+      },
+    })
+  },
+
+  addQueue: function (streamId, imageData) {
+    if (!this.queues[streamId]) this.queues[streamId] = []
+    this.queues[streamId].push(imageData)
+  },
+
+  resetQueues: function (streamId) {
+    this.queues[streamId] = []
+  },
+
+  feed: function (streamId, data) {
+    this._addListener(streamId)
+
+    if (this.queues[streamId]?.length) {
+      this.queues[streamId].forEach((queue) => {
+        this.jmuxer[streamId].feed({
+          video: queue,
+        })
+      })
+      this.resetQueues(streamId)
+    }
+
+    this.jmuxer[streamId].feed({
+      video: data,
+    })
+  },
+
+  destroy: function (streamId) {
+    this._removeListener(streamId)
+    this.video[streamId]?.remove()
+    this.video = {}
+    this.jmuxer = {}
+    this.loadedVideo = {}
+  },
+
+  _addListener: function (streamId) {
+    this.video[streamId]?.removeEventListener(
+      'loadedmetadata',
+      this.loadedVideo[streamId]
+    )
+    this.video[streamId].addEventListener(
+      'loadedmetadata',
+      this.loadedVideo[streamId]
+    )
+  },
+
+  _removeListener: function (streamId) {
+    this.video[streamId]?.removeEventListener(
+      'loadedmetadata',
+      this.loadedVideo[streamId]
+    )
+  },
+}
+
+wdi.CodecVp8 = {
+  decoders: {},
+
+  create: function (streamId) {
+    this.decoders[streamId] = new vp8_decoder_ctx()
+  },
+
+  destroy: function () {
+    this.decoders = {}
+  },
+
+  feed: function (streamId, imageData, context, box) {
+    const errorCode = vp8_dixie_decode_frame(
+      this.decoders[streamId],
+      imageData,
+      imageData.length
+    )
+    if (VPX_CODEC_OK === errorCode) {
+      this._I420toRGBA(this.decoders[streamId].ref_frames[0].img, context, box)
+    }
+  },
+
+  _I420toRGBA: function (vp8, context, box) {
+    const yuvwidth = vp8.w
+    const height = vp8.d_h
+    const width = vp8.d_w
+
+    let output = context.createImageData(width, height)
+    let outputData = output.data
+    let R, G, B
+
+    for (let h = 0; h < height; h++) {
+      for (let w = 0; w < width; w++) {
+        const Y = vp8.planes[0][vp8.planes_off[0] + 0 + w + yuvwidth * h]
+        const U =
+          vp8.planes[1][
+            vp8.planes_off[1] + 0 + (w >> 1) + (yuvwidth >> 1) * (h >> 1)
+          ]
+        const V =
+          vp8.planes[2][
+            vp8.planes_off[2] + 0 + (w >> 1) + (yuvwidth >> 1) * (h >> 1)
+          ]
+
+        R = Math.round(Y + 1.13983 * (V - 128))
+        G = Math.round(Y - 0.39465 * (U - 128) - 0.5806 * (V - 128))
+        B = Math.round(Y + 2.03211 * (U - 128))
+
+        // outputData[0 + w * 4 + width * 4 * h] = R
+        // outputData[1 + w * 4 + width * 4 * h] = G
+        // outputData[2 + w * 4 + width * 4 * h] = B
+        // outputData[3 + w * 4 + width * 4 * h] = 255
+        // Изменим порядок записи пикселей, чтобы перевернуть изображение
+        const flippedIndex = ((height - 1 - h) * width + w) * 4
+        outputData[flippedIndex] = R
+        outputData[flippedIndex + 1] = G
+        outputData[flippedIndex + 2] = B
+        outputData[flippedIndex + 3] = 255
+      }
+    }
+
+    context.putImageData(output, box.x, box.y)
+  },
+}
+
+wdi.CodecH265 = {
+  queue: {},
+  configed: {},
+  isReady: {},
+  decoders: {},
+  pendingFrames: {},
+  underflow: {},
+  baseTime: {},
+
+  create: async function (streamId, context, box) {
+    const init = {
+      output: this._handleFrame.bind(this, streamId, context, box),
+      error: (e) => {
+        console.log(e)
+      },
+    }
+    const config = {
+      codec: wdi.SpiceVideoCodecValue[wdi.currentCodec],
+      codedWidth: 640,
+      codedHeight: 480,
+    }
+    const { supported } = await VideoDecoder.isConfigSupported(config)
+    // Проверяем поддерживает ли браузер VideoDecoder
+    if (supported) {
+      this.decoders[streamId] = new VideoDecoder(init)
+      this.decoders[streamId].configure(config)
+      this.isReady[streamId] = true
+    } else {
+      // Try another config.
+      console.log('not supported')
+    }
+  },
+
+  destroy: function () {
+    this.queue = {}
+    this.configed = {}
+    this.isReady = {}
+    this.decoders = {}
+    this.pendingFrames = {}
+    this.underflow = {}
+    this.baseTime = {}
+  },
+
+  addQueue: function (streamId, imageData) {
+    if (!this.queues[streamId]) this.queues[streamId] = []
+    this.queues[streamId].push(imageData)
+  },
+
+  resetQueues: function (streamId) {
+    this.queues[streamId] = []
+  },
+
+  setConfig: function (streamId, box) {
+    const config = {
+      codec: wdi.SpiceVideoCodecValue[wdi.currentCodec],
+      codedWidth: box.width,
+      codedHeight: box.height,
+    }
+    this.decoders[streamId].configure(config)
+    this.configed[streamId] = true
+  },
+
+  decode: function (streamId, imageData) {
+    if (this.queue[streamId]?.length) {
+      this.queue[streamId].forEach((data) => {
+        const chunk = new EncodedVideoChunk({
+          type: 'key',
+          data: data,
+          timestamp: performance.now(),
+        })
+        this.decoders[streamId].decode(chunk)
+      })
+      this.resetQueues(streamId)
+    }
+
+    const chunk = new EncodedVideoChunk({
+      type: 'key',
+      data: imageData,
+      timestamp: performance.now(),
+    })
+    this.decoders[streamId].decode(chunk)
+  },
+
+  _handleFrame: function (streamId, context, box, frame) {
+    if (!this.pendingFrames[streamId]) this.pendingFrames[streamId] = []
+    this.pendingFrames[streamId].push(frame)
+
+    if (this.underflow[streamId] === undefined) this.underflow[streamId] = true
+    if (this.underflow[streamId])
+      setTimeout(this._renderFrame.bind(this, streamId, context, box), 0)
+  },
+  _renderFrame: async function (streamId, context, box) {
+    this.underflow[streamId] = this.pendingFrames[streamId].length === 0
+    if (this.underflow[streamId]) return
+
+    const frame = this.pendingFrames[streamId].shift()
+
+    // Based on the frame's timestamp calculate how much of real time waiting
+    // is needed before showing the next frame.
+    const timeUntilNextFrame = this._calculateTimeUntilNextFrame(
+      frame.timestamp,
+      streamId
+    )
+    await new Promise((r) => {
+      setTimeout(r, timeUntilNextFrame)
+    })
+
+    context.drawImage(frame, box.x, box.y, box.width, box.height)
+    frame.close()
+
+    // Immediately schedule rendering of the next frame
+    setTimeout(this._renderFrame.bind(this, streamId, context, box), 0)
+  },
+  _calculateTimeUntilNextFrame: function (timestamp, streamId) {
+    if (!this.baseTime[streamId]) this.baseTime[streamId] = performance.now()
+    const mediaTime = performance.now() - this.baseTime[streamId]
+    return Math.max(0, timestamp / 1000 - mediaTime)
+  },
+}