Resource icon

Free Non-Square Webcam

Overview Updates (2) Discussion
C

Caliber Mengsk

New Member
Caliber Mengsk submitted a new resource:

Non-Square Webcam - Tired of a square webcam? Look no further!

Quick link to it: http://calibermengsk.com/streamtool...om/streamtools/oddwebcam/heroesofthestorm.png

Hello all. I have been slightly tired of just having a square webcam. And while it's kind of spiffy to just use an overlay, the webcam itself is still square, so you have to have something covering the corners and such. Quite the pain. So, I made a little thing using just a basic webpage (html5 and javascript) to...
Click to expand...

Read more about this resource...
 
C

Caliber Mengsk

New Member
Caliber Mengsk updated Non-Square Webcam with a new update entry:

Added more properties (and an explanation of the url)

So, like any webpage, you can send data to the webpage using &variablename=value. Fairly simple process, but adding properties to this particular script could make for a long url. I have tried to make this accessable to everyone, so I'll explain the properties.

image: Sets the image using a URL. Does not support variable urls, so sites like Dropbox won't work. Personal websites and imgur will work though as long as you use the direct link to the .png or .gif.
width: This sets the mask image's...
Click to expand...

Read the rest of this update entry...
 
C

Caliber Mengsk

New Member
Glen Turnbull said:
Hi nice idea but is there any chance of a copy of this so can run it on my local PC
Click to expand...
Yep, just save the webpage to your local drive, then just edit the code manually (change any of the width values to what you want, and the image source.

The php stuff is simply to change those values on the fly and could probably be done in javascript to simplify things, I just didn't do it that way. I may go through and change it to javascript though so it's easier to just download like that.
 
C

Caliber Mengsk

New Member
Caliber Mengsk updated Non-Square Webcam with a new update entry:

On-screen Gui and Javascript only!

I added all of the parameters that you could have in the url and made it text boxes on the webpage, so you can update everything in real time. Underneath all of the normal inputs is a textbox that gives you a permanent url so you don't have to keep resetting everything. Enjoy!

Oh, and everything has been change to 100% javascript rather then php based. This doesn't mean anything as far as the output, but it means that you can save the page as an html file and it will function locally. Again,...
Click to expand...

Read the rest of this update entry...
 
Afgan Rasulov

Afgan Rasulov

New Member
It would be great if you make a simple video tutorial how to achieve and use it. I tried to understand but it was really hard for me to understand. Thank you.
 
T

TickleMeOzmo

Member
There's no need to make this as complicated as it is. Ingenious as it is (excellent idea using the browser), it's over-engineered.

Here is the Alpha Mask you will need for a Heroes of the Storm hexagon: http://imgur.com/eD2vEkm.png
upload_2015-9-1_9-11-46.png

  1. Add New Source -> Video Capture Device
  2. Set the video size to 320x240, and click [OK]
  3. Right-Click the new device and select Filters
  4. Under Effect Filters, click the [+]
  5. Add an Image Mask/Blend filter.
  6. Set Type: Alpha Mask (Alpha Channel) and choose the path to the file.
  7. Click [Close]
  8. Align and resize properly for your stream.
Here's how it looks in stream:
upload_2015-9-1_9-6-27.png
 
ThoNohT

ThoNohT

Developer
@TickleMeOzmo While you are correct that in obs-mp, you can use the mask filter to achieve this. At the time this tool was created, obs-mp was not yet in such a complete state and filters did not exist yet. Furthermore, this provides a solution for people who would like to use the old version of OBS, which does not have filter support at all.
 
You must log in or register to reply here.
Top