Issue metadata
Sign in to add a comment
|
canvas.captureStream is not refreshing
Reported by
a...@tokbox.com,
Mar 7 2018
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36 Steps to reproduce the problem: 1. Visit http://output.jsbin.com/jisutos const randomColour = () => { return Math.round(Math.random() * 255); }; canvas.width = 640; canvas.height = 480; const ctx = canvas.getContext('2d'); // Draw a random colour in the Canvas every 1 second const interval = setInterval(() => { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = `rgb(${randomColour()}, ${randomColour()}, ${randomColour()})`; ctx.fillRect(0, 0, canvas.width, canvas.height); }, 1000); video.srcObject = canvas.captureStream(1); video.play(); What is the expected behavior? You should see a Canvas on the left and a Video tag on the right. The Canvas should update the colour every 1 second on a setInterval. The Video should update to reflect that. What went wrong? If you call canvas.captureStream then the canvas stops updating. Did this work before? Yes 63 Chrome version: 65.0.3325.146 Channel: stable OS Version: OS X 10.12.6 Flash Version: This worked in Chrome 63. It also works in Firefox and Safari. It stopped working with Chrome 64. Also the refresh rate is really slow in other cases, eg. drawing a camera onto a canvas and capturing that. See https://aullman.github.io/snapchat-killer/
,
Mar 7 2018
,
Mar 7 2018
Unable to reproduce this issue on reported version 65.0.3325.146 using Mac 10.12.6. Attaching screencast consisting M-65,M-67 and Firefox behaviors. Navigated to http://output.jsbin.com/jisutos and observed video tag color change on change in canvas. @Reporter: Could you please check the video and let us know if we miss anything. This info would help in triaging of the issue in a better way. And for https://aullman.github.io/snapchat-killer/ issue please raise a new bug if both are not same. Thanks!
,
Mar 13 2018
I think it only happens sometimes. It seems like the colour gets stuck because you keep refreshing and you get the same colour every time. If you put a breakpoint in there the code is trying to update the colour but it is not reflected in the Canvas or Video element. I asked other people in the office to give it a try and it worked for some and not others. For me now it works if I go to the https version of the jsbin but not if I go to the http (without s) version.
,
Mar 13 2018
If I quit the browser and open it again then it sometimes works. Another URL that reproduces the problem is https://opentok.github.io/opentok-web-samples/Publish-Canvas/ It's basically the same code except it doesn't display the Canvas. I'm trying to narrow down what makes it happen. We have one machine here that it does not happen on. Trying to make it happen on that machine.
,
Mar 13 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Mar 13 2018
For some reason when I click a link that loads https://output.jsbin.com/jisutos it works for me but if I go directly there it does not work. Here is a screen capture of the issue as I see it.
,
Mar 13 2018
Re-checked the issue on Macbook Air 10.12.6 using 65.0.3325.146 with steps mentioned in comment#0 and comment#8 but issue is not reproducible from TE end. As reporter also mentioned like issue is seen only sometimes and on some machines and not reproducible from TE end, removing Needs-Bisect label. Could someone from Blink>MediaStream>CaptureFromElement team please have a look at this issue. Thanks!
,
Mar 16 2018
,
Mar 21 2018
I cannot reproduce the issue either. Your observed difference between http vs https sounds like it might be hitting some origin-clean checks. Re https://aullman.github.io/snapchat-killer/ slowness, one thing I observed is that your canvas is not opaque. This means extra capture/convertion of alpha plane. If it isn't necessary for your work, you can use specify {alpha: false}. Other than that, you should make sure that Js main thread is available piping capture calls and offload work to others.
,
Apr 26 2018
,
Apr 27 2018
I can't actually reproduce the canvas refreshing colour issue anymore using Chrome 66. https://aullman.github.io/snapchat-killer/ still does not perform as well for me on Chrome as it used to, or as well as it does on Firefox or Safari. They both have a much higher framerate. I tried setting alpha:false when I get the 2d context and it didn't seem to make a difference.
,
Apr 27 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 4 2018
,
May 7 2018
Now it is happening for me again at: http://output.jsbin.com/jisutos This is definitely still a problem and a serious problem for anyone trying to process video in a Canvas tag. I'm really surprised that you would resolve it as Wont' Fix.
,
May 7 2018
What version can you reproduce this on? I cannot reproduce on 66.0.3359.139 or 68.0.3422.0 on Mac. This was marked as "WontFix" because there was no reproduction, including your feedback in #12.
,
May 8 2018
Yes, sorry, I couldn't reproduce the Canvas issue specifically but the slow rendering of the camera in a Canvas I was still able to reproduce on https://aullman.github.io/snapchat-killer/ which I believe is related because it was the same version of Chrome where it started to be a problem. Now I can reproduce the Canvas issue. I'm not sure what causes it to happen but sometimes it works and other times not. I can now reproduce it with 66.0.3359.139.
,
May 8 2018
I just tested Canary though, Chrome 68 and I can't reproduce the problem there. The colour updates on http://output.jsbin.com/jisutos and the camera renders nicely on https://aullman.github.io/snapchat-killer/ Perhaps this was fixed as part of another bug?
,
May 9 2018
Yes, it might be affected by the fix on issue 824752 . I am marking this as WontFix as it isnt reproducible in canary. Btw, I went through your code in http://output.jsbin.com/jisutos. You are using canvas.captureStream(1) there. That |1| indicates maximum 1 frames every seconds. Considering there are small glitches in setInterval(), there are some cases where there is less than a second between actual render updates. Then the latter frame is tossed away and you see glitches. Using captureStream() should fix it. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by ajha@chromium.org
, Mar 7 2018