Skip to:
Content

BuddyPress.org

Opened 2 years ago

Closed 2 years ago

Last modified 2 years 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 2 years ago.
7676.ray.patch (3.0 KB) - added by r-a-y 2 years ago.
7676.ray-02.patch (3.0 KB) - added by r-a-y 2 years ago.

Download all attachments as: .zip

Change History (15)

#1 @DJPaul
2 years ago

  • Milestone changed from Awaiting Review to 3.0

Verified on Firefox 58.0.1.

@DJPaul
2 years ago

#2 @DJPaul
2 years 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 years ago

#3 @r-a-y
2 years 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 years ago by r-a-y (previous) (diff)

#4 @DJPaul
2 years ago

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

#5 @DJPaul
2 years 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
2 years ago

#6 @r-a-y
2 years 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 2 years ago by r-a-y (previous) (diff)

#7 @DJPaul
2 years 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
2 years 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
2 years 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
2 years 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
2 years 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
2 years 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.