WEB interface and portforward

good morning,

I managed to install the monsterborg smoothly, and the WEB interface on local network works, but i found a problem using the WEB interface via portforward, the cam image is refreshed only if I reload the page manually, do you have some hint to fix the problem?

sorry for my english

piborg's picture

The Web UI should really behave the same using port forwarding, the page should regularly request a new image by changing the URL for the image slightly.

The only idea which comes to mind is to look for this line in the script:

httpText += ' document.images["rpicam"].src = "cam.jpg?" + Math.random();\n'

and try changing cam.jpg? to /cam.jpg? like this:

httpText += ' document.images["rpicam"].src = "/cam.jpg?" + Math.random();\n'

Let me know if this helps, or if the behaviour is still the same.

Thank you for the reply, but still the same

i found this solution:

i changed the "displayRate" value from 10 to 2 and now is working, maybe the problem is the DSL upload speed...

piborg's picture

That is a little bit surprising, but I am glad to hear it is working now :)

I try to run monsterWeb.py and then connect to http://my_monsterborg_ip then control button appeared in browser but video stream could not see.
I executed following command.
What is wrong? and What should I do ?
pi@raspberrypi:~/monsterborg $ sudo python ./monsterWeb.py
Loading ThunderBorg on bus 1, address 15
Found ThunderBorg at 15
ThunderBorg loaded on bus 1
Setup camera
Setup the stream processing thread
Wait ...
Setup the watchdog
Press CTRL+C to terminate the web-server
Reconnected...
Timed out...
Reconnected...
Timed out...
Reconnected...
Timed out...

if you run "raspistill -o cam.jpg" you can see the image? Which browser do you use?

piborg's picture

The raspistill program takes a photo from the camera and saves it to the SD card.

For example:

raspistill -o ~/cam.jpg

will save a JPEG image to ~/cam.jpg.

If the JPEG file exists after running the command then everything is probably fine. The reason to look at the image is to check the camera focus is okay and that the picture looks good.

If you are connected to the Raspberry Pi using a monitor or VNC connection you can use the File Manager program (looks like two folders), browse to /home/pi and then double-click on the cam.jpg file to open it in an image viewer.

Sorry for my late reply.
I'v run "raspistill -o cam.jp" and I could see the image.
I use google chrome with windows 7 64 bit.

piborg's picture

It sounds like you may be having the same problem as the other poster above.

Try changing this line in monsterWeb.py

displayRate = 10              # Number of images to request per second

To a much lower value, like 2:

displayRate = 2               # Number of images to request per second

If that works then it suggests that the wireless connection is not keeping up with the amount of data being transferred.

I tried change displayRate's value in monsterWeb.py from 10 to 2 but situation remains unchanged.
The video does not appear in my browser but control buttons work well.
I have attached captures which are cam.jpg and my browse's capture.

Images: 
piborg's picture

This is really strange, I am not sure what the problem is here...

I have just check using Raspbian Stretch (latest) with Chrome and the stream definitely works fine for me. As the buttons work we know that the basic network communications are fine as well.

Is it possible you have an ad blocker or script blocker in Chrome which could be preventing the page from working correctly? If so try turning them off and see if the page then works.

If that does not help try going to http://192.168.11.156/cam.jpg and see if you get a single still image from the camera.

I tried turn off an ad blocker but this problem has not solved.
BTW, What does it mean following messeage especially time out.... ?

pi@raspberrypi:~/monsterborg $ sudo python ./monsterWeb.py
Loading ThunderBorg on bus 1, address 15
Found ThunderBorg at 15
ThunderBorg loaded on bus 1
Setup camera
Setup the stream processing thread
Wait ...
Setup the watchdog
Press CTRL+C to terminate the web-server
Reconnected...
Timed out...
Reconnected...
Timed out...
Reconnected...
Timed out...

piborg's picture

The script has some code which turns the motors off if it has not sent any data to a remote machine for too long. This is to prevent the MonsterBorg running off on its own if your phone or web browser become disconnected.

The Timed out... message indicate this happened, probably because you are not receiving the images from the MonsterBorg for some reason.

The Reconnected... message indicates a message has been received so the motors have been re-enabled.

What do you see if you go to this page when the script is running: http://192.168.11.156/cam.jpg

I have tried all the above, as I had a similar issue, however I have has no luck with the fix suggested. Attached is an error message that I get when going to the web address. Alos test image shots work, but not via 172.28.209.88/cam.jpg as the page fails to load.

Any help will be appreciated. I am running a PI 4.

Images: 
piborg's picture

This is a bug in the code that we found a while ago, it looks like the fix did not make it into the MonsterBorg examples :(

I have updated the examples now, or you can get the fixed version of the script from the Web UI GitHub.

Option 1 - Update the examples

cd ~
mv thunderborg thunderborg-old
mv monsterborg monsterborg-old
bash <(curl https://www.piborg.org/installer/install-monsterborg.txt)

Option 2 - Web UI GitHub

cd ~
git clone https://github.com/piborg/diddyborg-web.git
rm ~/monsterborg/monsterWeb.py
cp ~/diddyborg-web/monsterWeb.py ~/monsterborg

Brilliant, thank you for the speedy response.

Subscribe to Comments for &quot;WEB interface and portforward&quot;