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.

Version 2, edited 2 years ago by r-a-y (previous) (next) (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.