obsproject/obs-studio

Local html file has issue showing images served from local network

subokita opened this issue · 7 comments

subokita commented

Operating System Info

macOS 12.0

Other OS

No response

OBS Studio Version

Other

OBS Studio Version (Other)

27.2.0-rc2

OBS Studio Log URL

https://obsproject.com/logs/WP8MGySQX5RK6x5x

OBS Studio Crash Log URL

No response

Expected Behavior

I have a local html file that used to be able to show the artwork of the music I'm listening to from my Plex server

  • My machine is in 192.168.1.102 and my Plex server is at 192.168.1.101
  • the image url generated by the plex server is something like http://192.168.1.101:32400/library/metadata/327163/thumb/1644103064
  • In OBS 27.1.3 and previous versions, it's working perfectly okay. I could use the local html file, and it will show the image from 192.168.1.101

Current Behavior

  • In the version 27.2.0-rc2, the image from the other IP address (in this case my Plex server IP), cannot be shown.
  • If I were to open the html file on chrome / safari browser, everything is working properly without any warning on error in the console.

Steps to Reproduce

  1. Create a local html file
  2. Use img tag that points to a image file served on a machine in the local network
  3. Create browser source and use that local html file
    ...

Anything else we should know?

  • It doesn't have any issue when the img tag is pointing to address in the web, just the file on the local machine with different IP address that's having issue
  • Is this related with CORS (cross origin resource sharing)?
WizardCM commented

To expose Chrome Dev Tools for your browser sources, add --remote-debugging-port=1234 to your OBS Studio shortcut (where 1234 is your preferred port number) and navigate to http://localhost:1234/ in Chrome to connect to the session.

That should give you info as to why obs is failing to load it. My guess is you will have to run a Web server on your local machine and use that in the browser source rather than local file mode.

skeletonbow commented

Or possibly set up a DNS server on the LAN, such as dnsmasq

rbromero commented

This looks to be an issue with files on the local file system as well. I am seeing this as well as someone posting here: https://obsproject.com/forum/threads/browser-source-wont-update-and-wont-work-no-matter-what-i-do.153203/

My html file lives at D:\Documents\Streaming\testing.html

This is the img source tag that I have in my HTML file: <img src="D:\Documents\Streaming\testingImages\hello4.gif" height="500"></img>

When I added remote debugging, I got the following when in "Elements" and hovering my mouse over the path in the "img src":
http://absolute/D:/Documents/Streaming/D:/Documents/Streaming/testingImages/hello4.gif

This same setup was working up until a recent update of OBS

NOTE: Loading this HTML file directly in Chrome works without any issues.

When loading the html file directly into Chrome, I see the following when hovering over the path in the "img src":
file:///D:/Documents/Streaming/D:/Documents/Streaming/testingImages/hello4.gif

OBSvsChrome

cattywampus04 commented

Hi, I would just like to chime in on this as I am having the same problem.

I posted on the OBS forums about this (https://obsproject.com/forum/threads/27-2-browser-source-no-longer-html-css-will-no-longer-load-local-images-with-absolute-paths.153581/)

The content of the post:

Hi,

I've used a browser source for a while now to show some rudimentary HTML pages as part of what I'm recording. I write the HTML and CSS myself. Until the 27.2 update and the new browser source backend, everything worked fine, but now I'm unable to get the webpages to load local images with an absolute path.

I was able to have something like (in CSS) "background-image: url("S:/Dropbox/A Folder/Another Folder/Yet another Folder/the image.png") and it would work fine. The only way I've been able to get it to work is to use a relative path structure (url("../.../../../Dropbox/A Folder/Another Folder/Yet another Folder/the image.png")...which is a pain for how I use it cause the web page isn't always in the same location when I'm opening it so the relative path can change.

Am I doing something wrong?

I've tried replacing all spaces with %20, I've tried with/without "file:///". The webpage loads fine with absolute paths in Chrome/Edge/Firefox, just not in the browser in OBS.

rbromero commented

I was also able to get my images to show up in the browser source when using relative pathing as described by @Stuwot

  • ❤️1
gxalpha commented

As mentioned earlier in the issue, this is due to an update to Chromiums security policies.
It's recommended to run a small webserver (for example via python) for browser sources that involve loading other files instead (other workarounds mentioned in this thread may or may not work, you're milage may very).