mirror of
https://github.com/lxsang/antd-web-apps
synced 2025-07-27 02:59:47 +02:00
use web assembly and web worker for data decoder
This commit is contained in:
Xuan Sang LE
@ -6,9 +6,8 @@ class WVNC extends window.classes.BaseObject
|
||||
@uri = @args[0] if @args and @args.length > 0
|
||||
@canvas = undefined
|
||||
@canvas = ($ @args[1])[0] if @args and @args.length > 1
|
||||
@buffer = $("<canvas>")[0]
|
||||
@lastPose = { x: 0, y: 0 }
|
||||
@scale = 0.8
|
||||
@scale = 1.0
|
||||
@decoder = new Worker('/assets/scripts/decoder.js')
|
||||
me = @
|
||||
@mouseMask = 0
|
||||
@ -40,7 +39,7 @@ class WVNC extends window.classes.BaseObject
|
||||
me.sendPointEvent p.x, p.y, me.mouseMask
|
||||
|
||||
return unless me.canvas
|
||||
($ me.canvas).css "cursor", "none"
|
||||
#($ me.canvas).css "cursor", "none"
|
||||
($ me.canvas).contextmenu (e) ->
|
||||
e.preventDefault()
|
||||
return false
|
||||
@ -91,47 +90,30 @@ class WVNC extends window.classes.BaseObject
|
||||
initCanvas: (w, h , d) ->
|
||||
me = @
|
||||
@depth = d
|
||||
@buffer.width = w
|
||||
@buffer.height = h
|
||||
@canvas.width = w
|
||||
@canvas.height = h
|
||||
@resolution =
|
||||
w: w,
|
||||
h: h,
|
||||
depth: @depth
|
||||
@decoder.postMessage @resolution
|
||||
ctx = @buffer.getContext('2d')
|
||||
data = ctx.createImageData w, h
|
||||
ctx.putImageData data, 0, 0
|
||||
|
||||
process: (data) ->
|
||||
data.pixels = new Uint8ClampedArray data.pixels
|
||||
data.pixels = data.pixels.subarray 10 if data.flag is 0 and @resolution.depth is 32
|
||||
ctx = @buffer.getContext('2d')
|
||||
imgData = ctx.createImageData data.w, data.h
|
||||
imgData.data.set data.pixels
|
||||
ctx.putImageData imgData, data.x, data.y
|
||||
|
||||
@draw() if data.x isnt @lastPose.x or data.y > @resolution.h - 10
|
||||
@lastPose = { x: data.x, y: data.y }
|
||||
process: (msg) ->
|
||||
if not @socket
|
||||
return
|
||||
data = new Uint8Array msg.buffer
|
||||
#w = @buffer.width * @scale
|
||||
#h = @buffer.height * @scale
|
||||
ctx = @canvas.getContext "2d"
|
||||
imgData = ctx.createImageData msg.w, msg.h
|
||||
imgData.data.set data
|
||||
ctx.putImageData imgData, msg.x, msg.y
|
||||
|
||||
|
||||
setScale: (n) ->
|
||||
@scale = n
|
||||
@draw()
|
||||
|
||||
draw: () ->
|
||||
if not @socket
|
||||
return
|
||||
|
||||
w = @buffer.width * @scale
|
||||
h = @buffer.height * @scale
|
||||
@canvas.width = w
|
||||
@canvas.height = h
|
||||
ctx = @canvas.getContext "2d"
|
||||
ctx.save()
|
||||
ctx.scale @scale, @scale
|
||||
ctx.clearRect 0, 0, w, h
|
||||
ctx.drawImage @buffer, 0, 0
|
||||
ctx.restore()
|
||||
|
||||
openSession: () ->
|
||||
me = @
|
||||
@ -152,7 +134,7 @@ class WVNC extends window.classes.BaseObject
|
||||
initConnection: () ->
|
||||
vncserver = "localhost:5901"
|
||||
data = new Uint8Array vncserver.length + 5
|
||||
data[0] = 16 # bbp
|
||||
data[0] = 32 # bbp
|
||||
###
|
||||
flag:
|
||||
0: raw data no compress
|
||||
@ -160,7 +142,7 @@ class WVNC extends window.classes.BaseObject
|
||||
2: raw data compressed by zlib
|
||||
3: jpeg data compressed by zlib
|
||||
###
|
||||
data[1] = 2
|
||||
data[1] = 3
|
||||
data[2] = 50 # jpeg quality
|
||||
## rate in milisecond
|
||||
rate = 30
|
||||
@ -237,11 +219,8 @@ class WVNC extends window.classes.BaseObject
|
||||
# status command for ack
|
||||
@socket.send(@buildCommand 0x04, 1)
|
||||
when 0x84
|
||||
#console.log "update"
|
||||
# send data to web assembly for decoding
|
||||
@decoder.postMessage data.buffer, [data.buffer]
|
||||
#@decodeFB d
|
||||
# ack
|
||||
#@socket.send(@buildCommand 0x04, 1)
|
||||
else
|
||||
console.log cmd
|
||||
|
||||
|
||||
@ -1,84 +1,48 @@
|
||||
#zlib library
|
||||
importScripts('pako.min.js')
|
||||
# jpeg library
|
||||
importScripts('jpeg-decoder.js')
|
||||
importScripts('wvnc_asm.js')
|
||||
api = {}
|
||||
resolution = undefined
|
||||
pixelValue = (value, depth) ->
|
||||
pixel =
|
||||
r: 255
|
||||
g: 255
|
||||
b: 255
|
||||
a: 255
|
||||
#console.log("len is" + arr.length)
|
||||
if depth is 24 or depth is 32
|
||||
pixel.r = value & 0xFF
|
||||
pixel.g = (value >> 8) & 0xFF
|
||||
pixel.b = (value >> 16) & 0xFF
|
||||
else if depth is 16
|
||||
pixel.r = (value & 0x1F) * (255 / 31)
|
||||
pixel.g = ((value >> 5) & 0x3F) * (255 / 63)
|
||||
pixel.b = ((value >> 11) & 0x1F) * (255 / 31)
|
||||
#console.log pixel
|
||||
return pixel
|
||||
|
||||
getImageData = (d) ->
|
||||
return d.pixels if resolution.depth is 32
|
||||
step = resolution.depth / 8
|
||||
npixels = d.pixels.length / step
|
||||
data = new Uint8ClampedArray d.w * d.h * 4
|
||||
for i in [0..npixels - 1]
|
||||
value = 0
|
||||
value = value | d.pixels[i * step + j] << (j * 8) for j in [0..step - 1]
|
||||
pixel = pixelValue value, resolution.depth
|
||||
data[i * 4] = pixel.r
|
||||
data[i * 4 + 1] = pixel.g
|
||||
data[i * 4 + 2] = pixel.b
|
||||
data[i * 4 + 3] = pixel.a
|
||||
return data
|
||||
|
||||
decodeRaw = (d) ->
|
||||
d.pixels = getImageData d
|
||||
return d
|
||||
|
||||
decodeJPEG = (d) ->
|
||||
raw = decode d.pixels, { useTArray: true, colorTransform: true }
|
||||
d.pixels = raw.data
|
||||
return d
|
||||
###
|
||||
blob = new Blob [d.pixels], { type: "image/jpeg" }
|
||||
reader = new FileReader()
|
||||
reader.onloadend = () ->
|
||||
d.pixels = reader.result
|
||||
postMessage d
|
||||
reader.readAsDataURL blob
|
||||
###
|
||||
|
||||
update = (msg) ->
|
||||
d = {}
|
||||
data = new Uint8Array msg
|
||||
d.x = data[1] | (data[2]<<8)
|
||||
d.y = data[3] | (data[4]<<8)
|
||||
d.w = data[5] | (data[6]<<8)
|
||||
d.h = data[7] | (data[8]<<8)
|
||||
d.flag = data[9]
|
||||
d.pixels = data.subarray 10
|
||||
# the zlib is slower than expected
|
||||
switch d.flag
|
||||
when 0x0 # raw data
|
||||
raw = decodeRaw d
|
||||
when 0x1 # jpeg data
|
||||
raw = decodeJPEG(d)
|
||||
when 0x2 # raw compress in zlib format
|
||||
d.pixels = pako.inflate(d.pixels)
|
||||
raw = decodeRaw d
|
||||
when 0x3 # jpeg compress in zlib format
|
||||
d.pixels = pako.inflate(d.pixels)
|
||||
raw = decodeJPEG(d)
|
||||
return unless raw
|
||||
raw.pixels = raw.pixels.buffer
|
||||
# fill the rectangle
|
||||
postMessage raw, [raw.pixels]
|
||||
#frame_buffer = undefined
|
||||
Module.onRuntimeInitialized = () ->
|
||||
api =
|
||||
{
|
||||
createBuffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
|
||||
destroyBuffer: Module.cwrap('destroy_buffer', '', ['number']),
|
||||
updateBuffer: Module.cwrap("update", 'number', ['number', 'number', 'number', 'number', 'number', 'number']),
|
||||
decodeBuffer: Module.cwrap("decode",'number', ['number', 'number', 'number','number'] )
|
||||
}
|
||||
|
||||
onmessage = (e) ->
|
||||
return resolution = e.data if e.data.depth
|
||||
update e.data
|
||||
if e.data.depth
|
||||
resolution = e.data
|
||||
#api.destroyBuffer frame_buffer if frame_buffer
|
||||
#frame_buffer = api.createBuffer resolution.w * resolution.h * 4
|
||||
#else if e.data.cleanup
|
||||
# api.destroyBuffer frame_buffer if frame_buffer
|
||||
else
|
||||
datain = new Uint8Array e.data
|
||||
x = datain[1] | (datain[2] << 8)
|
||||
y = datain[3] | (datain[4] << 8)
|
||||
w = datain[5] | (datain[6] << 8)
|
||||
h = datain[7] | (datain[8] << 8)
|
||||
flag = datain[9]
|
||||
p = api.createBuffer datain.length
|
||||
Module.HEAP8.set datain, p
|
||||
size = w * h * 4
|
||||
po = api.decodeBuffer p, datain.length, resolution.depth, size
|
||||
#api.updateBuffer frame_buffer, p, datain.length, resolution.w, resolution.h, resolution.depth
|
||||
# create buffer array and send back to main
|
||||
dataout = new Uint8Array Module.HEAP8.buffer, po, size
|
||||
# console.log dataout
|
||||
msg = {}
|
||||
tmp = new Uint8Array size
|
||||
tmp.set dataout, 0
|
||||
msg.buffer = tmp.buffer
|
||||
msg.x = x
|
||||
msg.y = y
|
||||
msg.w = w
|
||||
msg.h = h
|
||||
postMessage msg, [msg.buffer]
|
||||
api.destroyBuffer p
|
||||
if flag isnt 0x0 or resolution.depth isnt 32
|
||||
api.destroyBuffer po
|
||||
Reference in New Issue
Block a user