Media 'take Photo' functionality ( webcam.js ) is broken for Mozi Vendor

[hnla]

Currently it looks as though Mozi have changed their vendor prefixes ( odd that backwards compat not maintained?? )

Trying to access or allow camara results in js error:
navigator.mozGetUserMedia has been replaced by navigator.mediaDevices.getUserMedia

Replacing all occurrences does allow us past the BP screen message:
'Video error. Please upload a photo instead.
However we're then stuck on the or back to the Please allow access to camera' and no amount of allowing initiates the video.src = stream`

I found this github link which suggests mozSrcObject has changed in current stable and nigthlies, but it's pointed out that backpat should handle things.
​https://github.com/webrtc/adapter/issues/7

[DJPaul]

Verified on Firefox 58.0.1.

[DJPaul]

I posted the basic syntax change that hnla referred to, but this needs further investigation. Any Backbone experts out there?

Otherwise I shall try to make time to learn/investigate this in due course.

[r-a-y]

ray.patch fixes issues with Firefox. Major props to the MDN web docs for their documentation:
​https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Patch confirmed working in Firefox, Chrome and Opera. Chrome and Opera requires testing over HTTPS for the "Take Photo" tab to show up. I couldn't get Microsoft Edge working before and after the patch, but I'm hoping that this is just particular to my install.

Needs further testing on mobile browsers.

[DJPaul]

It does look like the latest iOS Safari does support the getUserMedia API as does Android, we could remove that check.

[DJPaul]

@r-a-y Patch works on Edge. Nice work. Just remove that console.log 😁

I tried removing the server side browser checks but it still doesn’t work on iOS (though I think it should), but someone can look at that separately in the future.

[r-a-y]

Ran JSHint through the patch and had to address a problem with using .catch since this syntax is not supported in ES3, but we still support ES3 according to our .jshintrc file:
​https://buddypress.trac.wordpress.org/browser/tags/2.9.3/.jshintrc?marks=6#L6

Any reason why we continue to use ES3 browsers such as IE6-9?
​http://jshint.com/docs/options/#es3

Anyway, the change isn't that big from ray.patch, so I'll probably commit ray-02.patch tomorrow pending any other feedback.

[DJPaul]

Any reason why we continue to use ES3 browsers such as IE6-9?

Because the jshint config was copied from WordPress. Given ​https://wptavern.com/wordpress-4-8-will-end-support-for-internet-explorer-versions-8-9-and-10 I am happy to suggest we don't formally support ES3 any more. IE11 minimum (ES4?).

[DJPaul]

If you/I/we do change the ES3 support globally, please do that as a separate commit before fixing this issue.

[harshsoni_w3]

Hi, I am too facing the same issue. How I can fix this. Will it be fixed in next BuddyPress update?

[r-a-y]

If you/I/we do change the ES3 support globally, please do that as a separate commit before fixing this issue.

Sounds good. I'll commit the patch that supports ES3 for this ticket and we can look to bump our requirements in another release.

[r-a-y]

In 11944:

Avatars: Fix webcam functionality when taking a photo in Firefox.

The navigator.getUserMedia API, which our webcam functionality relies on,
is deprecated. As a result, webcam functionality does not work in Firefox.

This commit addresses this by supporting the newer navigator.mediaDevices
API, while also adding backward-compatible support for those browsers that
still require navigator.getUserMedia.

Props r-a-y, DJPaul, hnla.

Fixes #7676.

[r-a-y]

Replying to harshsoni_w3:

Hi, I am too facing the same issue. How I can fix this. Will it be fixed in next BuddyPress update?

This fix is scheduled for v3.0 and is going to be released in a month or so.

If you want to test the fix now, you'll have to download a copy of the latest webcam.js:
​https://raw.githubusercontent.com/buddypress/BuddyPress/master/src/bp-core/js/webcam.js

And replace the one located in /buddypress/bp-core/js/webcam.min.js and /buddypress/bp-core/js/webcam.js.