Instascan: IOS11 - Web RTC compatability

$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/

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

+1

@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 [email protected]: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.

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...

https://github.com/serratus/quaggaJS/commit/e8352c7017a2f7a7500fa054f342b9689ff5d8b7#diff-afd7828cb7f3e7a1f8fe7305f50b5021

https://github.com/PaulKinlan/qrcode/commit/b79718b2391969b2291db93ba388b4c2b2f3f9d4

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

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

@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.

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);
  });

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

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

@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".

@centogram work like a charm. Grats!

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

@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

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

@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"

Hi @lnorbert

I tried to follow your steps,

git clone [email protected]: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