Update getUserMedia WebRTC library for broader browser compatibility (+ iOS)

[jywarren]

http://publiclab.org/spectral-workbench#Browsers lists:

Spectral Workbench should work on Chrome (in Windows/Mac/Linux/Android, but not iOS), Firefox (Windows/Mac/Linux/Android), or Opera (Android). It may work on other browsers and we are working on expanding coverage; read more on this page:

Linking here; we should be able to support:

• Safari desktop
• iOS (soon, as we hear getUserMedia is now supported on iOS???)

Let's discuss/plan/collect information here!

This would also be possible to port back to https://github.com/publiclab/spectral-workbench/ once implemented here.

[jywarren]

Relates to: publiclab/spectral-workbench#104, publiclab/spectral-workbench#353, #71

[sidntrivedi012]

@jywarren I found out that the camera capture is not working on firefox quantum as well as the firefox nightly browser. Implementing this cross-browser compatibility is very important since a lot of people don't use Chrome/Chromium since these browsers are quite heavy to work on their machine.

Please guide me as to how to implement this. Would like to work on it.

[sidntrivedi012]

[sidntrivedi012]

The camera was not starting even after giving it the permission. An warning was popping up in the console - navigator.mozGetUserMedia has been replaced by navigator.mediaDevices.getUserMedia.

But I don't think the camera is not working because of this warning. There's some other error.

[jywarren]

Hi! I think we need to identify a replacement for the getUserMedia shim we're using here:

spectral-workbench.js/examples/capture/index.html

Line 18 in a062b8d

<script src="../../node_modules/getusermedia-js/dist/getUserMedia.min.js"></script>

spectral-workbench.js/package.json

Line 32 in a062b8d

"getusermedia-js": "~1.0.0",

There are a number of other shim libraries out there. Let's find one that's really well supported, and migrate to it. Some even support iOS, i believe!

https://duckduckgo.com/?q=github+getusermedia&atb=v121-6&ia=web

This one is worth testing out: https://webrtc.github.io/samples/src/content/getusermedia/gum/

https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/gum

See it working in iOS here! processing/p5.js#2146

[jywarren]

@sidntrivedi012 I was wondering if you'd consider prioritizing the part of your project which updates the getUserMedia component? Because a recent change in Chrome for Android means we can no longer switch from the front camera to the back camera on a smartphone. So, people using these papercraft spectrometers now have a much harder time: https://publiclab.org/papercraft-spectrometer

[jywarren]

Either by trying to get an early version of your project using this fix to production in "beta" mode sooner, or, potentially trying to apply the fix to the existing codebase in parallel to developing the stand-alone library. I'm not sure what would be better?

[jywarren]

@sidntrivedi012 would you try this code to get this working on iOS?

https://github.com/processing/p5.js/pull/2147/files

[jywarren]

Do you have a version of Safari on iOS or Mac os to test?

[jywarren]

Here's a great article on webrtc adapters and what they're for!

https://bloggeek.me/webrtc-adapter-js/amp/

[sidntrivedi012]

@jywarren I would like to work on it. Have also made a PR at #125. Can we start work on it again?

[jywarren]

Sure, i'll take a look at that today, thanks!

…

On Sun, Jan 5, 2020 at 4:29 AM Siddhant N Trivedi ***@***.***> wrote: @jywarren <https://github.com/jywarren> I would like to work on it. Have also made a PR at #125 <#125>. Can we start work on it again? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#87?email_source=notifications&email_token=AAAF6JZBZRVETCEDTDWM3ULQ4GSATA5CNFSM4HCDFDI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIDSFYA#issuecomment-570893024>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J2FBOQZLCUHLPFT65TQ4GSATANCNFSM4HCDFDIQ> .

[jywarren]

This was solved by @chukohsin + team in #172 by using https://github.com/Temasys/AdapterJS !