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. No need to test on mobile as we disable the webcam feature entirely for mobile devices:
​https://buddypress.trac.wordpress.org/browser/tags/2.9.3/src/bp-core/bp-core-avatars.php?marks=1973-1979#L1960

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