All images only show the "broken image" block.

[Dernial]

So, I'm sure it's just me. But I can't get media working at all.

When I load the overlay page in the browser, it works. When I created an HTML page, loaded it up as an overlay in OBS, it worked.

I've tried static images, and animated gifs.

The event is running because I have an audio associated as well, and the audio plays.

Using version 2.2.2 OBS 17.0.2

Beam JSON: { "reportInterval": 50, "tactiles": [ { "id": 0, "type": "tactiles", "blueprint": [ { "width": 2, "height": 1, "grid": "large", "state": "default", "x": 0, "y": 0 } ], "analysis": { "holding": false, "frequency": true }, "text": "Cheer?", "cost": { "press": { "cost": 0 } }, "cooldown": { "press": 0 } } ], "joysticks": [], "screens": [] }

[itsjesski]

What steps are you taking to load the html overlay file into obs? Did you start fresh with 2.2.2 or did you upgrade to it?

[Dernial]

New Source -> Browser Source -> Create new Check Local file. Click browse. Select Firebot-win32-x64/overlay/firebot.html Change width/height to full screen size. Clear CSS box. Check Shutdown source when not visible. Check Refresh browser when scene becomes active.

I upgraded. I want to say it wasn't working on 2.2.0, but I can't remember.

I just went fresh, same thing.

[ThePerry-2015]

@Dernial When you open the firebot overlay in a browser, can you inspect or view the source and find the URL for the image that is popping up and see how it's formated? You have to trigger the button so you see the code change in the overlay to see the URL it uses. This is how it looks on my end:

<div class="1487839759793-image middle">
    <img src="file://F:\Downloads\old\Happy-new-year-from-Norway.gif?time=1487839759793">
</div>

Note: I just tested this with a brand new download of 2.2.2 and placed it in a new folder to start fresh and my animated gif plus sound file works just fine. I also tried to remove user-settings and copy in an old user-settings folder from a previous version and added the image plus sound at that worked just fine as well.

Using OBS 17.0.2.ftl-32 (64 bit Windows) and Firebot 2.2.2 from the release page.

Edit: Just download the clean OBS 17.0.2 version from the OBS website and tested with that one to see if there could have been any difference between the original and the FTL version of Beam, but it still works just fine.

[Dernial]

This is what I got when loaded up in firefox.

<div class="1487854829395-image middle" style="">
  <img src="file://G:\Streaming\Justice\Untitled-1.gif?time=1487854829395">
</div>

I just wiped out OBS and settings. Downloaded OBS-Studio 17.0.2 with FTL.32. Fresh install, added overlay and tested. The sound played, but I didn't get the image or the broken image icon.

Reinstalled OBS without FLT, broken image icon.

[itsjesski]

@Dernial

Can you download the attached main.txt and change the filename to main.js, then overwrite firebot/overlay/js/main.js? After that try restarting OBS and see if it makes any difference for you.

Download: main.txt

[Dernial]

Just tried... No luck.

From playing with it, I can add the image manually into the HTML file. (I added <img src="Untitled-1.gif" />) but I had to put the tag in the wrapper div, when I put it in the code at the end where the JS places it, it won't play in OBS. I added a bit to the main.js to move the added div in there, but still doesn't work. I even took it out of the div to reference it to delete it after. So it basically puts in what I added manually.

I started digging for log files, I can't seem to find any logs for the browser source. I did find the following in my OBS logs though.

16:04:43.918: Required module function 'obs_module_load' in module '../../obs-plugins/64bit/chrome_elf.dll' not found, loading of module failed
16:04:43.922: [CoreAudio encoder]: Adding CoreAudio AAC encoder
16:04:43.923: [AMF Encoder] Unable to load 'amfrt64.dll', error code 126.
16:04:43.929: Required module function 'obs_module_load' in module '../../obs-plugins/64bit/libcef.dll' not found, loading of module failed
16:04:43.930: Required module function 'obs_module_load' in module '../../obs-plugins/64bit/libEGL.dll' not found, loading of module failed
16:04:43.930: Required module function 'obs_module_load' in module '../../obs-plugins/64bit/libGLESv2.dll' not found, loading of module failed
16:04:43.930: Failed to load 'en-US' text for module: 'obs-browser.dll'

Googled a whole bunch on the errors, found a reference to it may be the AV. Disabled that, reinstalled... even removed AV completely and reinstalled.

If the errors were causing the problems I would think that would break StreamJar, and doing static pages. But those are working fine.

I'm pretty much running out of ideas.

Edit: Added more information.

[itsjesski]

Have you tried deleting the OBS Browser cache yet? I think there is a button for it in the settings for the source, but you could also try going to the folder and manually deleting it.

%appdata%\obs-studio\plugin_config\obs-browser

When you manually hard coded the tag in there and ignored the JS it still didn't show? That's pretty baffling. I'm trying to come up with a reason as to why it'd do that. That last thing I would try would be pulling in an image from imgur instead just to see if theres something up with the local file path.

EDIT: Read right over the part where you manually added the tag in the first time.

[Dernial]

Ok. I finally got it to work. I deleted the cache. Removed the file:// from the JS. Placed the image I wanted in the overlay directory and used just the filename in the button's media input box.

Now the question is... why?

[itsjesski]

So, my guess is that it was the caching issue. OBS is notoriously bad at caching browser assets. I'm assuming that it cached the first version you loaded into OBS and then ignored the updated js when you went to version 2.2.2.

[Dernial]

I don't think it was the cache. I did try deleting that, and leaving stock files, and it didn't work.. I basically had to make it use a local file to get it to work.

[itsjesski]

OH ... do you by chance have firebot in a program files directory?

[Dernial]

Nope. G:/Streaming/Firebot-win32-x64/

[itsjesski]

Try running firebot as an administrator and throwing the image in the regular way.

[Dernial]

Nope. Broken image icon.

[itsjesski]

I'm out of ideas right now. Could you go into your user-settings/controls folder and throw the JSON for the board your using into a txt file and attach it? I'll see if I can make the problem happen on my side.

[Dernial]

Overwatch.txt

[JimmyMac3]

I can confirm same thing happening to me - OBS-Studio Browser Source shows nothing - Chrome shows the image just fine.

Removing the File:// from the image processor section of main.js fixes the problem. I put all my images in the same folder as Firebot.html and remove the path leaving filename only and everything works because removing file:// changes the link from an absolute to a relative link.

There is some discussion on Absolute links not working in the OBS-Studio Browser Source Plugin - There is a mention of using http://absolute/FULL-PATH/FILENAME so I attempted to change the File:// to http://absolute/ but no difference still won't display the image in OBS - The relative link workaround works for me so I'm good for now.

[itsjesski]

@ThePerry-2015 was talking about maybe having the app make a copy of the image you choose and put it into the firebot folder before using. That could happen, but as a user I think it would be annoying to have your files duplicated.

Still looking into it.

EDIT: I think the local copy thing might be the only way to really fix it. It's going to take some rewriting but I'll start working on it tomorrow. This will probably be the next thing that gets patched.

[itsjesski]

According to the browser source creator OBS uses http://absolute instead of file://. So, I'll need to put a new setting in the app for OBS compatibility mode that will send that path instead of file://.

Source: https://obsproject.com/forum/threads/browser-source-classic-vs-studio.43867/#post-197540

[itsjesski]

Released update 2.2.3 Beta 1. This adds an OBS compatibility option in the settings area that changes the file path sent to the overlay to this weird http://absolute workaround the browser source creator put together.

If you're having issues download it and give me some feedback!

Download: https://github.com/Firebottle/Firebot/releases/tag/v2.2.3-beta.1

[Dernial]

Seems to have fixed it for me. I would rename the option though, maybe just make it a check box. The naming of the option seems... odd.

[itsjesski]

Well, it is compatibility mode haha. http://absolute is 100% a workaround that the browser source creator put in place. It won't work in anything else. XSplit and any other client I know of would be using file:///. If you think the name should be changed just throw an idea at me.

[Dernial]

Change it to "Fix derpy OBS plugin that doesn't follow standard HTML notation." ?

[itsjesski]

hahah

[Dernial]

It's more descriptive that way.

[itsjesski]

I'll see if I can put some text in a tooltip somewhere to explain and update the FAQ in the wiki. Might also just change it to "OBS" in the dropdown.

Anyway, I'll leave this open for a few days. If anyone else has a chance to test please let me know.

[SpontaneousJ]

I can say I have tested this 2.2.3-beat.1 and I am no longer getting the broken image but I am not getting any image. I have cleared browser cache as suggested.

[itsjesski]

@SpontaneousJ and you've set the media option in the settings area to OBS compatibility? Have you tried restarting OBS after the cache clear? Also try removing the overlay html source and re-adding it.

[SpontaneousJ]

OBS compatibility was not selected.... I had failed, but you have saved me! It is working.

[itsjesski]

Huzzah! (I should probably make it more obvious that option is there though!)

I went ahead and released the version you guys tested as a full release since it seems to be working. Thank you guys so much for the help and please let me know if you ever run into problems.

Going to go ahead and close this issue for now. Please open a new issue if you run into the problem again.