Web-bugs: spectralworkbench.org - Camera feed is not displayed

[webcompat-bot]

URL: https://spectralworkbench.org/capture

Browser / Version: Firefox Mobile 68.0
Operating System: Android 8.1.0
Tested Another Browser: Yes Opera

Problem type: Something else
Description: camera is not used even after allowing it in the popup dialog.
Steps to Reproduce:
The page should display camera output, but only shows gray screen.

This works in Chrome and opera (on Android)

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20200220160940
• channel: beta
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

Submitted in the name of @jshabtai

_From webcompat.com with ❤️_

[cipriansv]

Thanks for the report.

I was indeed able to reproduce the issue. The camera feed is not displayed on Firefox.

Tested with:
Browser / Version: Firefox Preview Nightly 200302 (🦎: 75.0a1-20200301094802), Chrome Mobile [phone]
Operating System: Huawei P10 (Android 9.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Preview Nightly:

And this is the web page displayed in Chrome:

Moving the issue to needsdiagnosis.

[karlcow]

In the console it seems to be looping indefinitely on

  alert_overexposure: function () {
    console.log('Checking for overexposure');
    var t = $W.detect_overexposure();
    if (t.r || t.g || t.b) {
      var e = '<b>Light source too strong</b>; clipping in channels: ',
      a = [
      ];
      t.r && a.push('red'),
      t.g && a.push('green'),
      t.b && a.push('blue'),
      $W.notify(e + a.join(', '), 'warning'),
      $('.capture-navbar .capture-messages').html(e + a.join(', ')),
      $('.capture-navbar').addClass('red')
    } else $('.capture-navbar .capture-messages').html(''),
    $('.capture-navbar').removeClass('red')
  },

with Checking for overexposure

[karlcow]

I thought it was a kind of race issue created by

    this.canvas.height = this.waterfall_height,
    this.ctx = this.canvas.getContext('2d'),
    this.image = this.ctx.getImageData(0, 0, this.width, this.height),
    $('#preview').length > 0 && (this.preview_ctx = $('#preview') [0].getContext('2d')),
    setInterval($W.alert_overexposure, 500),
    setInterval(function () {
      $W.getRecentCalibrations('.select-calibration')
    }, 10000),

but this doesn't change if we modify the values there.

I also noticed that there are requests to https://spectralworkbench.org/capture/recent_calibrations.json?calibration_id=undefined with a response.

HTTP/1.1 422 Unprocessable Entity
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Status: 422 Unprocessable Entity
Cache-Control: no-cache, private
Date: Wed, 04 Mar 2020 08:18:37 GMT
X-Request-Id: 773739366655eb3183eabc5af76a12b5
X-UA-Compatible: IE=Edge,chrome=1
X-Runtime: 0.002968
X-Rack-Cache: miss
X-Powered-By: Phusion Passenger 6.0.4
Server: nginx/1.10.3 + Phusion Passenger 6.0.4

coming from

    getRecentCalibrations: function(t) {
      $.ajax({
        url:
          "/capture/recent_calibrations.json?calibration_id=" +
          $W.calibration_id,
        type: "GET",
        success: function(e) {
          var a =
            "<option value='calibration'>[+] New calibration/uncalibrated</option>";
          $.each(e, function(t, e) {
            (a += "<option "),
              $W.calibration_id == e.id && (a += "selected "),
              (a += "value=" + e.id + ">#" + e.id + ": " + e.title + " ("),
              e.forked && (a += "forked "),
              (a += e.created_at_in_words + " ago)</option>");
          }),
            $(t).html(a);
        }
      });
    },

but that doesn't seem to be it too.

[karlcow]

releasing it for now as I can't find a track.

[karlcow]

as a test on rdm.

Let's try on the device.

The issue still reproduces.

<div style="" id="webcam">
    <video autoplay="" width="320" height="240"></video>
</div>

race issue on checkinng the overexposure? very old usage of a getusermedia lib, not sure?

@ksy36 do you see something I don't see.

[ksy36]

This is not working because the site is still using mozSrcObject, which no longer supported.
https://www.fxsitecompat.dev/en-CA/docs/2017/htmlmediaelement-mozsrcobject-has-been-removed/

navigator.mozGetUserMedia ? e.mozSrcObject = t : e.srcObject = t from this function:

    success: function(t) {
        if ("webrtc" === $W.options.context) {
            $("#heightIndicator").show(),
            $("#webcam-msg").hide();
            var e = $W.options.videoEl;
            window.URL || window.webkitURL;
            window.stream = t,
            window.video = e,
            e.srcObject = t,
            navigator.mozGetUserMedia ? e.mozSrcObject = t : e.srcObject = t,
            e.onerror = function() {
                t.stop()
            }
            ,
            1 == $W.flipped && ($W.flipped = !1,
            $W.flip_horizontal())
        } else
            console.log("flash or something else")
    },

I've tried usingsrcObject instead and it works. We'll need to contact the site to see if this can be fixed

[karlcow]

https://github.com/publiclab/spectral-workbench/blob/866589c1837e4ff3c712eee659fdb61af8f23f26/app/assets/javascripts/capture.js#L83-L101

this is a 7 years old code.
https://github.com/publiclab/spectral-workbench/commit/c38745e3bb71244106a3d759f1a76b2809235d8b

And I guess @jywarren would be in a position to fix it :)

[ksy36]

Looks like there is some work being done on this in the github repo. There is a PR that suppose to fix the issue with Firefox https://github.com/publiclab/spectral-workbench.js/pull/125 (but seems like it doesn't work in Safari?)

And the main issue https://github.com/publiclab/spectral-workbench.js/issues/87

[jywarren]

Hello! Yes, looks like you've found the spun-out JS-only library. We are trying to transition towards spectralworkbench.js code and are making slow progress. I'm not that familiar with webcompat/web-bugs, but i am meeting on Tuesday with folks who are starting a project to revamp the JS code so I can highlight this issue. Thank you!

[karlcow]

thanks.
I will switch to sitewait.