IOS11 - Web RTC compatability

[ddwyer]

Thankyou for this Great work,
we are trying to implement this code for scanning QR code in IOS browser , we are testing with the latest IOS11 beta which has support for Web RTC.

we have access to eth camera , and webRTC getUserMedia()

however i am getting a persistent error = Unhandled Promise Rejection: TypeError: Type error at line 13231

case 3:
return this._stream = i.sent, i.abrupt("return", window.URL.createObjectURL(this._stream));


also IOS webkit version which is RTC compatible = 604
so will probably need to update line 13168

if (!navigator.userAgent.match(/Version\/(\d+).(\d+)/)) return e.browser = "Unsupported webkit-based browser with GUM support but no WebRTC support.", e; e.browser = "safari", e.version = this.extractVersion(navigator.userAgent, /AppleWebKit\/([0-9]+)\./, 1), e.minVersion = 602 }

[ddwyer]

$500 Bounty

I am unable to resolve this issue
Perhaps a bounty of $500 would encourage someone who is more capable than me to solve this issue. I believe that IOS11 Beta now supports webRTC getUserMedia() .
You can see a working demo (only if you have iOS11 beta installed :-)

--> https://tokbox.com/developer/sdks/js/

--> https://tokbox.com/developer/beta/safari/

[ddwyer]

This bounty is still valid - and i will honor it.
we intend to use instascan in our project , but need some support (which we are prepared to pay for)
is there anyone who can
[1] solve the issue
[2] contribute open source code to the instascan project
[3] and earn a little bit of money for your efforts

[bchr02]

+1

[lnorbert]

@ddwyer We implemented Instascan in out application recently. It's a great library and worked as expected. We didn't use the released version, but built a fresh one from master.

Here is what I did to get a fresh build to our app:

git clone git@github.com:schmich/instascan.git
cd instascan/
npm install gulp-cli -g
npm install
gulp release
cp dist/instascan.min.js /path/to/our/libraries/include/dir

Selecting a camera based on ID didn't work. It always used the front camera. We solved this by adding an ugly patch to camera.js:

diff --git a/src/camera.js b/src/camera.js
index 5403b3c..4a46e32 100644
--- a/src/camera.js
+++ b/src/camera.js
@@ -31,6 +31,11 @@ class Camera {
       }
     };

+    var userAgent = window.navigator.userAgent;
+    if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
+        constraints.video.facingMode = "environment";
+    }
+
     this._stream = await Camera._wrapErrors(async () => {
       return await navigator.mediaDevices.getUserMedia(constraints);
     });

I wouldn't create a PR for this change as it's not a nice solution. But it works, feel free to use it in your projects.

[jsmithdev]

Just fyi, in iOS11 beta the <video /> element needs attribute playsinline . Seemed to be a bug for awhile but now that it's out of beta soon idk...

serratus/quaggaJS@e8352c7#diff-afd7828cb7f3e7a1f8fe7305f50b5021

PaulKinlan/qrcode@b79718b

[ddwyer]

i can confirm that we followed the instructions by @Inorbert and shazam .. like magic it's all working.
we will look to improve what we have found and report back .
-- Darren

[PallasKatze]

This is fixed in /pull/78. Don't forget to manually include the latest webrtc-adapter in your project.

[ddwyer]

@PallasKatze is a javascript GURU - this is all working now and maybe should be tested and merged ? in case anybody is interested the bounty was paid in full -- thanks for your help.

[anthonyyuan]

why do I not work it on safari11
var userAgent = window.navigator.userAgent;

• if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {

•    constraints.video.facingMode = "environment";
  

• }
• this._stream = await Camera._wrapErrors(async () => {
  return await navigator.mediaDevices.getUserMedia(constraints);
  });

[jerodfritz]

Here is a version that works compiled from https://github.com/centogram/instascan
instascan.zip

[pandalion]

@centogram is it possible for me to use the front camera with your ios11 code? thanks :)

[jerodfritz]

@pandalion yes, but you will need to modify the code. You'll just want to change the constraints.video.facingMode constraint from "environment" to "user".

[cpapazoglou]

@centogram work like a charm. Grats!

[adelsadek1]

@centogram @hrrsppzgl
which line I have to modify it?

[cpapazoglou]

@centogram @hrrsppzgl
which line I have to modify it?

@adelsadek1
What do you really need? Have you downloaded @centogram modified code from here?
https://github.com/centogram/instascan

[adelsadek1]

@hrrsppzgl yes I have but still not working @centogram mentioned to modify line but I didn't which line I have to modify

[cpapazoglou]

@hrrsppzgl yes I have but still not working @centogram mentioned to modify line but I didn't which line I have to modify

Search for
facingMode: { exact: "environment" },
Change "environment" to "user"

[Govind13100]

Hi @lnorbert

I tried to follow your steps,

git clone git@github.com:schmich/instascan.git
cd instascan/
npm install gulp-cli -g
npm install
gulp release
cp dist/instascan.min.js /path/to/our/libraries/include/dir

But when try the first cmd, it throws the below error

Please, can you help me out here?

Thank you