Streampunk / grandiose

Node.JS native bindings to Newtek NDI(tm).
Apache License 2.0
184 stars 47 forks source link

Writing video frame to image file. #9

Closed jonas-db closed 4 years ago

jonas-db commented 4 years ago

solved

jensstigaard commented 4 years ago

Hi Jonas

Have you made sure you have set the colorspace of the receiver to use RGB? I would assume that if you use UYUV color, it could be the cause of only 2 bytes per pixel is received, e.g. on 4:2:2 color.


Venlig hilsen/Best regards

Jens Grønhøj Stigaard +45 2172 1600 jens@stigaard.info

jonas-db skrev den 2020-04-25 11:26:

Hello

First of all: thank you, this library is pure gold!

Secondly: i'm trying to write the video frame to an image. I've tried the following code which seems to almost do what I need. However, the output is a bit strange and I can't figure out what mistake i'm making. I'm sure this will be helpful for other people as well. Any ideas? @jensstigaard [1]

{ type: 'video', xres: 1280, yres: 720, frameRateN: 60000, frameRateD: 1000, pictureAspectRatio: 1.7777777910232544, timestamp: [ 1587804321, 141302900 ], frameFormatType: 1, timecode: [ 8, 160623700 ], lineStrideBytes: 2560, data: <Buffer 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 80 10 ... > }

length of buffer is 1843200 (which makes me think this is 16bit and not 8bit as mentioned in the docs)

const width = dataFrame.xres // 1280 const height = dataFrame.yres // 720 const data = dataFrame.data

const Jimp = require('jimp');

const toImage = (data, width, height,i) => { new Jimp(width, height, (err, image) => {

let buffer = image.bitmap.data for (var x = 0; x < width; x++) { for (var y = 0; y < height; y++) { const offset = (y height + x) 4 // RGBA = 4 bytes

buffer[offset ] = data[offset] // R buffer[offset + 1] = data[offset+1] // G buffer[offset + 2] = data[offset+2] // B buffer[offset + 3] = data[offset+3] // Alpha } } image.write('./out/image'+i+'.jpg'); }); }

This gives me the following output (notice the strange duplication + it seems there are "4 blocks" in this image, of which 2 blocks are white)

[2]

while the original image is this: (transparant image) [3]

-- You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub [4], or unsubscribe [5].

Links:

[1] https://github.com/jensstigaard [2] https://user-images.githubusercontent.com/2538260/80275503-e8387880-86e1-11ea-846c-3e9daecdc25d.png [3] https://user-images.githubusercontent.com/2538260/80275509-f1c1e080-86e1-11ea-8fbc-084e14e751da.png [4] https://github.com/Streampunk/grandiose/issues/9 [5] https://github.com/notifications/unsubscribe-auth/AAO3ZMFG3ZZHXYIRDHABSLDROKUEVANCNFSM4MQU6LRQ

jonas-db commented 4 years ago

Thanks, it was indeed in the UYUV space, my bad 👍

yatsenkoleg commented 4 years ago

@jonas-db Sorry, I didn't understand how to switch the color space. Could you show the working code? Thanks

UPD: Understood. Need to specify COLOR_FORMAT_RGBX_RGBA instead of COLOR_FORMAT_UYVY_RGBA Sorry for bother