Octoprint not showing video stream

What is the problem?

I'm using my Ubuntu machine with OctoPrint and mjpg-streamer installed separately. mjpg-streamer is working (I can stream it directly to my laptop). If I enter the URL into Octoprint and use the test button, I see the stream. However, I don't see the stream in the UI anywhere? In screenshots on octoprint.org, it seems like it should be part of the control panel?

What did you already try to solve it?

Tried a variety of settings. Looked in the FAQ.

FWIW... I cloned the Git repo last night to see if I could figure this out, but I'm no less confused. I see the

{% if webcamStream %}


in control.jinja2. Looking at the browser inspector, I'm not seeing webcam_container, however it seems like webcamStream should be set based on:

  render_kwargs.update(dict(
  	webcamStream=settings().get(["webcam", "stream"]),
  	enableTemperatureGraph=settings().get(["feature", "temperatureGraph"]),

I'm clearly not reading the code correctly or understanding the situation. Any help would be most appreciated. I was able to watch the stream in a separate browser window, but it would be much nicer inside of Octoprint.

Craig

First things first, what Ubuntu is this? If it is Ubuntu Core then this is completely different.

Standard Ubuntu Desktop 18.04. Octoprint installed "from source" (virtual environment) and mpg-streamer installed via snap.

If you installed the Snap version then something is amiss.

The Snap app world is completely different from anything we've done before. It's like the new Microsoft Metro experience with signed apps (trying to be like Apple) instead of programs. Permissioning is absolutely different in this world.

If it were me, I'd remove the mjpg_streamer that you just installed and try the compile-from-source route.

I can do that, but before I do... mjpg_streamer is working fine. I can access that URL and it works. I can set that value in the Octoprint settings dialog and the stream shows up in the "test" it shows as well. So, Octoprint is able to visualize that URL just fine. This does not feel like a permissions issue at all to me. My question is what drives the value of the "webcamStream" variable, since that seems like the reason the webcam container is not being displayed.

And we know that IE doesn't display the webcam image inline using OctoPrint's <img src="" /> technique, right?

"... but teach a man how to fish and you feed him for life."

Searching the repository itself for webcamStream we see things in the jinja2 space which are surrounded by double french braces. I believe this means—in KnockoutJS terms—that this is then run within the Python engine before rendering so as to resolve those variables or function calls into their true value. Clicking the filter for just Python files on the left, this then leaves us just with /src/server/views.py which is presumably the Python code which populates the ViewModel for OctoPrint or perhaps just the server subset of that. Around line 357:

		render_kwargs.update(dict(
			webcamStream=settings().get(["webcam", "stream"]),
			...
		))

...we see that this is punched into the ViewModel from running that Python code. It begins with an instance of settings() which puts this in the realm of what's in the ~/.octoprint/config.yaml file. That "getter" function accepts what appears to be a "path tuple", it would seem.

Reading my own config.yaml file and running to the bottom of that since it's alphabetically-sorted:

webcam:
  ffmpeg: /usr/bin/avconv
  snapshot: http://127.0.0.1:8080/?action=snapshot
  stream: /webcam/?action=stream

So that path tuple from earlier is merely pulling the value of "/webcam/?action=stream" in my case. If instead, there is no stream variable in the yaml file or it's empty then it could behave like you've described since that might seem "false-y" as we say in coding terms.

So, visit your Settings -> Webcam & Timelapse page within OctoPrint and make sure that you have something actually in that field. But you've already indicated that you pressed the Test button and this works. So that means that your yaml file has this section already, the webcamStream value is being punched into the ViewModel and the jinja2 code should have this, then.

If your JavaScript developer's console in your browser has one or more errors then this could indicate that the binding isn't happening. A typical cause might be your other plugins. The usual advice would be to try this in Safe Mode.

FWIW... I'm a software developer (Java & Javascript-EmberJS in my case). My strength is not Python, but my reading of the code was exactly what you suggested. That is why I'm even more puzzled because from what I could tell, things should be working. In the end, I may start over from scratch just to see if that somehow helps. Either way, I'm unlikely to be able to get too deep into it until the weekend at this point.

If you have any other quick thoughts, I'd love to hear them. Either way, I appreciate your help.

Forgot to mention... I'm seeing no errors in the browser console either.

Without making any changes. No server reboot. Nothing. And all of the sudden the video stream is showing up in Octoprint just like it should. Bizarre.

Brilliant. That's what I've been waiting for... /SherlockHolmes

Browser caching?

Ooops... Never saw this come in. Possibly browser caching, although I usually do a hard (shift) refresh to avoid such problems. Oh well... it has worked well ever since. I blame gremlins.