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

Issue 801854 link

Starred by 2 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Apr 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Video stuttering when drawn to canvas on Chrome 63.0.3239.132

Reported by shachar....@gmail.com, Jan 13 2018

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce the problem:
Run the code below:

var canvas, context, video;
function drawingLoop() {
	window.requestAnimationFrame(drawingLoop);
	context.drawImage(video, 0, 0);
}

canvas = document.createElement('canvas');
document.body.appendChild(this.canvas);

video = document.createElement('video');
video.addEventListener("loadeddata", function() {
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	context = canvas.getContext('2d');
	video.play();
	window.requestAnimationFrame(drawingLoop);
});
video.autoplay = false;
video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4";
video.load();

What is the expected behavior?
Video should play smoothly on the canvas. it used to on older chrome versions and it still does on firefox and safari.

What went wrong?
The video seems to jump 2 frames ahead and one frame back, creating a "stuttering" effect.

Did this work before? Yes 58.0.3029.110

Does this work in other browsers? Yes

Chrome version: 63.0.3239.132  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version:
 
i tested with various videos from different sources, the result is the same.
when drawing onto a canvas smaller no bigger than 256x256 the bug doesn't happen. the same for any size when disabling hardware acceleration. this suggests it's a GPU issue.
Components: Blink>Canvas
Labels: Needs-Triage-M63 Needs-Bisect
Cc: vamshi.k...@techmahindra.com
Labels: Needs-Feedback Triaged-ET
Unable to reproduce the issue on reported chrome version 63.0.3239.132 and on the latest canary 65.0.3318.0 using windows 10 with the below mentioned steps.
1. Launched Chrome 
2. Pressed F12 and opened Dev tools>Console
3. Run the given code in comment#0 

We are getting an "undefined" error message after running the code. Attaching the screenshot for reference.

@Reporter: Could you please look at the screen shot and let us know if we have missed any steps while reproducing the issue. Any further inputs from your end helps us to triage the issue in a better way.

Thanks! 
801854.PNG
429 KB View Download
i don't know why you get that issue.
pasting the same code into the console on an empty page reproduces the issue successfully on my machine. i've also tried using http://www.webtoolkitonline.com/javascript-tester.html and the issue was reproduced there as well.
Project Member

Comment 6 by sheriffbot@chromium.org, Jan 15 2018

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "vamshi.kommuri@techmahindra.com" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: Needs-Feedback
Unable to reproduce the issue with reported chrome version 63.0.3239.132 and latest canary 65.0.3322.0 using windows 10 with the below mentioned steps.
1. Launched chrome
2. Navigated to p://www.webtoolkitonline.com/javascript-tester.html
3. Copied and pasted the code given in comment#0
We got the result as "Invalid javascript". Attaching the screen shot for reference.

@Reporter: Could you please check the screen shot and let us know if we have missed any steps while reproducing the issue. Any further inputs from your end helps us to triage the issue in a better way.

Thanks!
801854.PNG
430 KB View Download
i found the error in the code. try the following either through the console or the javascript tester page:

var canvas, context, video;
function drawingLoop() {
	window.requestAnimationFrame(drawingLoop);
	context.drawImage(video, 0, 0);
}

canvas = document.createElement('canvas');
document.body.appendChild(canvas);

video = document.createElement('video');
video.addEventListener("loadeddata", function() {
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	context = canvas.getContext('2d');
	video.play();
	window.requestAnimationFrame(drawingLoop);
});

video.autoplay = false;
video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4";
video.load();
Project Member

Comment 9 by sheriffbot@chromium.org, Jan 16 2018

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "vamshi.kommuri@techmahindra.com" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: Needs-Feedback
Tried checking the issue using the code provided in comment#8 on reported chrome version 63.0.3239.132 and on the latest canary 65.0.3322.0 using windows 10. We are seeing an error after code is pasted and hitting enter. Attaching the screen cast of the same. 

@Reporter: Could you please check the screen cast and let us know if we have missed anything. Please let us know if anything needs to be run in background.

Thanks!
801854.PNG
528 KB View Download
honest to god, i don't know why you get that error. i supplied some very basic video-to-canvas code. i don't think it can be simplified any further.
Project Member

Comment 12 by sheriffbot@chromium.org, Jan 17 2018

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "vamshi.kommuri@techmahindra.com" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: TE-NeedsTriageFromHYD
Rechecked the issue with the URL http://www.webtoolkitonline.com/javascript-tester.html provided  in comment#5 and the code given in comment#8 on chrome version 65.0.3239.132 and latest canary 65.0.3323.0 using windows 10. We are able to play the video , as we didn't observe any frame jump while the video is being played, requesting some one from inhouse team to have a look into this for further investigation. Hence adding label TE-NeedsTriageFromHYD. Attaching the screen cast for reference. 

Thanks!
801854.mp4
5.1 MB View Download
Cc: pnangunoori@chromium.org
Labels: Needs-Feedback
Tested on Chrome #63.0.3239.132 and latest Canary #66.0.3330.0 using Windows 10 and not able to reproduce the mentioned behavior by following the below steps:

1. Launch the Chrome browser.
2. Navigate to Dev Tools >> Console or the URL: http://www.webtoolkitonline.com/javascript-tester.html
3. Run the code provided in the C#8.
4. Observed that video is played normally.

shachar.carmi@ -- Could you please try by clearing data from chrome://settings/clearBrowserData and let us know your observations. If the issue is still reproduced please share your device GPU details.

Thanks in advance!

Comment 15 by junov@chromium.org, Apr 24 2018

Status: WontFix (was: Unconfirmed)
No longer repros (probably a dupe) -> Nothing more to do.

Sign in to add a comment