Skip to content

some green shadow appear in the canvas。look at the pic #26

@numberwolf

Description

@numberwolf

here ,
see some green near the eggs
image

if i use yuv-canvas, will have problem (this).
if only canvas, no problem.

heres my code:
pic format: yuv420p

 var format = YUVBuffer.format({
        width: width,
        height: height,
        chromaWidth: width/2,
        chromaHeight: height/2,
        displayWidth: width,
        displayHeight: height
    });
    var frame = YUVBuffer.frame(format);

    frame.y.bytes = imageBufferY;
    frame.u.bytes = imageBufferB;
    frame.v.bytes = imageBufferR;

Activity

bvibber

bvibber commented on Dec 28, 2019

@bvibber
Owner

It looks like there's an offset on the chroma buffers maybe? Double-check that the buffers are aligned correctly, and check if there's a stride parameter for the planes that might be different from the widths or anything like that.

numberwolf

numberwolf commented on Dec 28, 2019

@numberwolf
Author

execuse me,
i have add the stride value, But it didn't change.

  • my hevc video file desc:

veilside1.hevc:
Stream #0:0: Video: hevc (Main), yuv420p(tv), 576x240 [SAR 1:1 DAR 12:5], 25 fps, 25 tbr, 1200k tbn, 25 tbc

  • code:
var format = YUVBuffer.format({
        width: width,
        height: height,
        chromaWidth: width/2,
        chromaHeight: height/2,
        displayWidth: width,
        displayHeight: height
    });
    var frame = YUVBuffer.frame(format);

    console.log("[debug]");
    frame.y.bytes = imageBufferY;
    frame.y.stride = width;
    // console.log(imageBufferY);

    frame.u.bytes = imageBufferB;
    frame.u.stride = width/2;
    // console.log(imageBufferB);

    frame.v.bytes = imageBufferR;
    frame.v.stride = width/2;
    // console.log(imageBufferR);

    this.drawBuffer(frame);

i have put it online , address: http://hevc.aivideo.video

  • But there's a strange phenomenon here,i try another hevc file,
    hevc desc:

csdn.hevc
Duration: N/A, bitrate: N/A
Stream #0:0: Video: hevc (Main), yuv420p(tv), 3840x2160, 25 fps, 25 tbr, 1200k tbn, 25 tbc

it has large frame size , and seems to play ok. no green shadow appeared.

so i think ,It's a matter of size ?
bvibber

bvibber commented on Dec 28, 2019

@bvibber
Owner

In your code it looks like you're extracting the three planes from your WebAssembly memory assuming that they all run up against each other and that the width and stride are identical for each plane.

The visual output with the sample file that is having trouble looks to me like the buffer is offset by a few pixels. I don't think it's the stride as it's a constant offset; I think it may be the alignment of the buffers themselves...

Looking at the contents of the buffers on your demo they appear to be offset by about 8 bytes for the U and 16 bytes for the V plane, and the bytes appearing at the beginning of them look suspiciously like they encode a buffer length. Are they three separate allocations which just happen to be next to each other, or is there additional data encoded between them in your C structures?

numberwolf

numberwolf commented on Dec 28, 2019

@numberwolf
Author

You are right.

The reason was that I forgot to calculate the ptr size which in C structures , i add the ptr size and no problem now.

Thank you ,very much!
I can fall asleep now~~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @bvibber@numberwolf

        Issue actions

          some green shadow appear in the canvas。look at the pic · Issue #26 · bvibber/yuv-canvas