j7126/OctoPrint-Dashboard

Webcam not appearing with 1.18.x

help137 opened this issue · 10 comments

OctoPi 0.17.0
Octoprint v1.4.2
Camera: RasPi Cam

As of upgrading to the 1.18.2 release (from 1.17.0) the webcam no longer appears on the dashboard, the swirling "loading" circle just goes on forever. The camera shows up as normal on the Control tab.

Downgrading to 1.18.1 did NOT resolve the issue

Downgrading to 1.17.0 DID resolve the issue.

Log Attached.
octoprint.log

@help137 Does the webcam view load if you click the "hide webcam" button twice. Also, could you share a log from your browser AND what inspect element shows for the webcam block src attribute (something like this)
image

@help137 Also, is there a particular reason you are running octoprint v1.4.2 instead of a more recent version? If there is no particular reason, then I would recommend you upgrade.

Neither the Toggle Webcam, Full Browser Window nor Full Screen buttons cause the camera view to show, the "loading" swirl continues regardless (It disappears if the Toggle button is used, but just comes back when it's clicked again).

Re browser logs - To the best of my knowledge, the closest thing Firefox has to a log is a Crash Report and since there is no crash, there is no report.

Inspect Element ( I think this is what you want, I'm not good with using the inspector.)
`

  <div id="dashboard_webcam_hls_container" tabindex="0" data-bind="visible: webcamHlsEnabled()" style="display: none;">
    <video id="dashboard_webcam_hls" muted="" autoplay="" style="width: 100%" src=""></video>
  </div>

  <div id="dashboard_webcam_rotator" data-bind="visible: webcamMjpgEnabled(), css: { webcam_rotated: rotate(), webcam_unrotated: !rotate() }" style="" class="webcam_unrotated">
    <div class="webcam_fixed_ratio ratio169" data-bind="css: webcamRatioClass()">
      <div class="webcam_fixed_ratio_inner">
        <img id="dashboard_webcam_mjpg" data-bind="css: { flipH: flipH(), flipV: flipV()} " src="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' width='128px' height='128px' viewBox='-256 -256 640 640' xml:space='preserve'%3E%3Cg%3E%3Ccircle cx='16' cy='64' r='16' fill='%23000000' fill-opacity='1'/%3E%3Ccircle cx='16' cy='64' r='14.344' fill='%23000000' fill-opacity='1' transform='rotate(45 64 64)'/%3E%3Ccircle cx='16' cy='64' r='12.531' fill='%23000000' fill-opacity='1' transform='rotate(90 64 64)'/%3E%3Ccircle cx='16' cy='64' r='10.75' fill='%23000000' fill-opacity='1' transform='rotate(135 64 64)'/%3E%3Ccircle cx='16' cy='64' r='10.063' fill='%23000000' fill-opacity='1' transform='rotate(180 64 64)'/%3E%3Ccircle cx='16' cy='64' r='8.063' fill='%23000000' fill-opacity='1' transform='rotate(225 64 64)'/%3E%3Ccircle cx='16' cy='64' r='6.438' fill='%23000000' fill-opacity='1' transform='rotate(270 64 64)'/%3E%3Ccircle cx='16' cy='64' r='5.375' fill='%23000000' fill-opacity='1' transform='rotate(315 64 64)'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64' calcMode='discrete' dur='720ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E" class="flipH flipV">
      </div>
    </div>
  </div>
</div>

`

j7126 commented

@help137 you can view the browser logs by visiting the console tab at the top when you are in the inspector.

@help137 you can view the browser logs by visiting the console tab at the top when you are in the inspector.

Ah, Thank you.

Seems to be full of this one over and over.

Uncaught ReferenceError: determineWebcamStreamType is not defined _switchWebcam http://XXX.XXX.XXX.106/static/webassets/packed_plugins.js?3f921630:2014

@help137 awesome, I know what is going on here. I added HLS webcam support a while back for #255 but used some code in octoprint that must not be there in 1.4.2 in a way such that no webcams work. If you want your system to work right now, then you can upgrade your version of octoprint (assuming there is nothing blocking your update). Otherwise/for others, I can take a look at making the his support non-breaking for older versions of octoprint.

@help137 awesome, I know what is going on here. I added HLS webcam support a while back for #255 but used some code in octoprint that must not be there in 1.4.2 in a way such that no webcams work. If you want your system to work right now, then you can upgrade your version of octoprint (assuming there is nothing blocking your update). Otherwise/for others, I can take a look at making the his support non-breaking for older versions of octoprint.

I'll have to vote for the fix. My system is on older RPi hardware and is stable, I've no desire to risk breaking it before I get the newer Pi 4B with the latest version that I've got set aside finished. Plugins are (usually) easy to roll back, rolling back the base system is a PITA. :)

@help137 Install with url https://github.com/j7126/OctoPrint-Dashboard/archive/refs/heads/development.zip and your bug should be fixed--I rolled back my test instance and didn't see any issues.

@help137 Install with url https://github.com/j7126/OctoPrint-Dashboard/archive/refs/heads/development.zip and your bug should be fixed--I rolled back my test instance and didn't see any issues.

That seems to have done the trick, thank you. I had some odd issues installing it though. The install seemed to go ok, but the issue was still present after the mandatory restart and when I looked in the plugin manager it was listed as "pending install" and "needs restart", even though I had restarted after the install. I restarted again, no change, then rebooted, still no change. It finally kicked in when I disabled the plugin, restarted, enabled it and restarted again. Might this be because the version number did not change?

It could be, but since the changes were only in a static js file, what your really may have needed was a force refresh in your browser.