Support Safari 12.1, fix canvas leak, and improve recognition #214
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Based on work done in #164 - thanks! |
|
Example where the image is
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject On Safari 12 (and indeed later verisons of other browsers), the `video.src = URL.createObjectURL(mediaStream);` syntax is deprecated. Instead, it's been replaced by `video.srcObject`. However, using the srcObject syntax also lead to hundreds of individual canvases being created in Safari 12.1. This used lots of memory, slowing the app, and Safari then stopped the website from creating further canvasses and scanning failed to work. The longer the video preview was open the worse things became. This version of the code now uses a single canvas for rendering, rather than relying on garbage collection to clean them up over time. Additionally, Safari requires a new `playsinline` attribute for the display element in the html. Additionally, I found that on Safari 12.1 with an iPhone 6s plus, the generated image was vertically `squished`, and the bar-code wouldn't be recognised as it was not square. This changes the code to use the rendered window size for the canvas, rather than what the camera has been detected as. This seems to dramatically improve QR code recognition.
oskarpearson
force-pushed
the
newer-safari-fix
branch
from
f9f6e4c to
c5edd27
Compare
|
Heya @bitjson Not sure if you've seen this yet. Would you let me know your thoughts? Thanks! |
|
Any update on this? @bitjson |
| @@ -408,6 +438,7 @@ module.exports = function(){ | |||
| var video = getVideoPreview(); | |||
| if(video){ | |||
| video.src = ''; | |||
| video.srcObject = ''; | |||
There was a problem hiding this comment.
'' is not an Object
You should substitute null here.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
On Safari 12 (and indeed later verisons of other browsers), the
video.src = URL.createObjectURL(mediaStream);syntax is deprecated. Instead, it'sbeen replaced by
video.srcObject.However, using the srcObject syntax also lead to hundreds of individual canvases
being created in Safari 12.1. This used lots of memory, slowing the app, and
Safari then stopped the website from creating further canvasses and scanning
failed to work. The longer the video preview was open the worse things became.
This version of the code now uses a single canvas for rendering, rather than
relying on garbage collection to clean them up over time.
Additionally, Safari requires a new
playsinlineattribute for the displayelement in the html.
Additionally, I found that on Safari 12.1 with an iPhone 6s plus, the generated
image was vertically
squished, and the bar-code wouldn't be recognised as itwas not square. This changes the code to use the rendered window size for the
canvas, rather than what the camera has been detected as. This seems to
dramatically improve QR code recognition.