New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 611330 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: Oct 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows , Chrome
Pri: 2
Type: Bug



Sign in to add a comment

Drawing HTML5 video to canvas shows repeated pixels on the bottom and right edge

Reported by trsdom...@gmail.com, May 12 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36

Example URL:
http://testzone.subtest.dk/pixi_videochrome/

Steps to reproduce the problem:
1. Visit the URL pasted
2. View the video
3. Notice the repeated pixels in the bottom and right side

What is the expected behavior?
No repeated pixels

What went wrong?
I'm experiencing a weird video texture issue, when drawing a HTML5 video element onto a HTML5 canvas element.

The video is scaled in height, and the remaining pixels (where the video should have been, shows the bottom line of pixels repeated/stretched . The repeated/stretched pixels are always 12 pixels.
The issue seems to be dependent on the size of the video. I did a number of tests with the same video encoded as baseline mp4 (the height seems to be the determining factor, but I don't see any convincing pattern):

(Fails = repeated pixels, Works = looks fine)

    930x180    Fails
    960x400        Works
    1116x216        Fails  
    1025x256        works
    1024x256        Works
    1024x257        works
    1024x216        Fails
    300x216        Fails
    1024x400        Works
    1024x200        Fails
    1024x254        Works
    1024x230        Fails
    1024x240        Works
    1024x235        Fails
    1024x232        Fails
    1024x238        Fails
    1024x239        Works
    512x239        Works
    512x238        Works
    512x118        Fails
    512x119        Fails
    512x120        Fails
    512x140        Works
    512x130        Fails
    90x130        Fails

Changing from normal canvas rendering to WebGl renderer does not make any difference.
If I make a standard HTML video element, with the same video source, I do not see the issue.
(running Chrome 50.0.2661.94 m, but this is not a new issue)

This is my own repro of the issue. In this the issue also occured in the right side of the video - but mostly it occurs in the bottom:

  http://testzone.subtest.dk/pixi_videochrome/

I'm using the PixiJS 2D renderer, but I'm fairly sure this is a Chrome issue, since I found this Flash issue, which exhibits the exact same behaviour, and none of the other browsers I have tried has this issue.

  https://bugs.chromium.org/p/chromium/issues/detail?id=558799

Did this work before? N/A 

Is it a problem with Flash or HTML5? HTML5

Does this work in other browsers? Yes 

Chrome version: 50.0.2661.94  Channel: n/a
OS Version: 10.0
Flash Version:
 
Components: -Internals>Media Blink>Media>Video
I am able to repro it on Windows + Chrome 52.0.2723.3. see attached screenshot. It is video on canvas rendering bug, give to blink team.
repro.png
588 KB View Download

Comment 2 by ihf@chromium.org, May 13 2016

Cc: ihf@chromium.org dalecur...@chromium.org
Labels: OS-Chrome
No repro on Linux Firefox 46.0 and Linux Chrome 50.0.2661.94 (software decode).

Reproduces on M50-M52 Intel ChromeOS and (presumably) hw decode.
Components: -Blink>Media>Video Blink>Canvas Blink>WebGL

Comment 4 by junov@chromium.org, Jul 20 2016

Owner: junov@chromium.org
Status: Assigned (was: Unconfirmed)

Comment 5 by junov@chromium.org, Aug 8 2016

Cc: junov@chromium.org
Owner: zakerinasab@chromium.org
Project Member

Comment 6 by bugdroid1@chromium.org, Oct 6 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/feb2e37e78f375218f842448db94eae13254b536

commit feb2e37e78f375218f842448db94eae13254b536
Author: zakerinasab <zakerinasab@google.com>
Date: Thu Oct 06 21:28:49 2016

Fixing repeated pixels when drawing HTML5 video to canvas.

When the coded size of the video frame is different from the visible
rect, SkCanvasVideoRenderer::Paint tries to scale the video while it
must ignore the pixels outside visible rect. This is addressed by
clipping the SkImage object created from VideoFrame prior to painting
the frame on the canvas.

BUG= 611330 

Review-Url: https://codereview.chromium.org/2369093002
Cr-Commit-Position: refs/heads/master@{#423688}

[modify] https://crrev.com/feb2e37e78f375218f842448db94eae13254b536/media/renderers/skcanvas_video_renderer.cc
[modify] https://crrev.com/feb2e37e78f375218f842448db94eae13254b536/media/renderers/skcanvas_video_renderer.h
[modify] https://crrev.com/feb2e37e78f375218f842448db94eae13254b536/media/renderers/skcanvas_video_renderer_unittest.cc

Status: Fixed (was: Assigned)
Labels: TE-Verified-M55 TE-Verified-55.0.2883.6
Verified the issue on windows 10 using chrome dev version #55.0.2883.6 as per the steps mentioned in the comment #0.

The steps followed to reproduce the issue are as follows:
-----------
1. Visit the URL http://testzone.subtest.dk/pixi_videochrome/ 
2. Viewed the video
3. Observed no repeated pixels in the bottom and right side.

Hence, the fix is working as expected.

Attaching screencast for reference

Adding the verified labels.
611330.mp4
3.2 MB View Download
Project Member

Comment 9 by bugdroid1@chromium.org, Oct 27 2016

Labels: merge-merged-2840
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/feb2e37e78f375218f842448db94eae13254b536

commit feb2e37e78f375218f842448db94eae13254b536
Author: zakerinasab <zakerinasab@google.com>
Date: Thu Oct 06 21:28:49 2016

Fixing repeated pixels when drawing HTML5 video to canvas.

When the coded size of the video frame is different from the visible
rect, SkCanvasVideoRenderer::Paint tries to scale the video while it
must ignore the pixels outside visible rect. This is addressed by
clipping the SkImage object created from VideoFrame prior to painting
the frame on the canvas.

BUG= 611330 

Review-Url: https://codereview.chromium.org/2369093002
Cr-Commit-Position: refs/heads/master@{#423688}

[modify] https://crrev.com/feb2e37e78f375218f842448db94eae13254b536/media/renderers/skcanvas_video_renderer.cc
[modify] https://crrev.com/feb2e37e78f375218f842448db94eae13254b536/media/renderers/skcanvas_video_renderer.h
[modify] https://crrev.com/feb2e37e78f375218f842448db94eae13254b536/media/renderers/skcanvas_video_renderer_unittest.cc

Comment 10 by dimu@google.com, Nov 4 2016

Labels: -merge-merged-2840
[Automated comment] removing mislabelled merge-merged-2840

Sign in to add a comment