Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
numberwolf opened this issue Dec 28, 2019 · 4 comments
Closed

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

numberwolf opened this issue Dec 28, 2019 · 4 comments

Comments

@numberwolf
Copy link

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;
@bvibber
Copy link
Owner

bvibber commented Dec 28, 2019

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
Copy link
Author

numberwolf commented Dec 28, 2019

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
Copy link
Owner

bvibber commented Dec 28, 2019

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
Copy link
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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants