Skip to:
Content

Opened 4 months ago

Closed 7 weeks ago

Last modified 7 weeks ago

#7676 closed defect (bug) (fixed)

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

Reported by: hnla Owned by: r-a-y
Milestone: 3.0 Priority: high
Severity: normal Version:
Component: Media Keywords: has-patch commit
Cc:

Description

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

Attachments (3)

7676.01.patch (1.8 KB) - added by DJPaul 3 months ago.
7676.ray.patch (3.0 KB) - added by r-a-y 2 months ago.
7676.ray-02.patch (3.0 KB) - added by r-a-y 7 weeks ago.

Download all attachments as: .zip

Change History (15)

#1 @DJPaul
4 months ago

  • Milestone changed from Awaiting Review to 3.0

Verified on Firefox 58.0.1.

@DJPaul
3 months ago

#2 @DJPaul
3 months ago

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
2 months ago

#3 @r-a-y
2 months ago

  • Keywords has-patch added

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

Last edited 2 months ago by r-a-y (previous) (diff)

#4 @DJPaul
8 weeks ago

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

#5 @DJPaul
8 weeks ago

  • Keywords commit added

@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
7 weeks ago

#6 @r-a-y
7 weeks ago

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.

Last edited 7 weeks ago by r-a-y (previous) (diff)

#7 @DJPaul
7 weeks ago

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

#8 follow-up: @DJPaul
7 weeks ago

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

#9 follow-up: @harshsoni_w3
7 weeks ago

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

#10 in reply to: ↑ 8 @r-a-y
7 weeks ago

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.

#11 @r-a-y
7 weeks ago

  • Owner set to r-a-y
  • Resolution set to fixed
  • Status changed from new to closed

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.

#12 in reply to: ↑ 9 @r-a-y
7 weeks ago

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.

Note: See TracTickets for help on using tickets.