Integrate Handbid data into your live stream software (OBS example)

Using streaming software looks like OBS, you can easily incorporate Handbid information that is updated in real time. Read this article on how it's done

Most streaming software allows you to incorporate a browser source into your scenes.  These browser sources can be a web page or URL that will then load in data and display it. 

In this article, we will explain what web overlays Handbid offers and how to incorporate those into OBS, an open source (and quite powerful) streaming software platform. 

Before we get started, you first need to make sure you plan to use streaming software.  Tools like Zoom Conferencing or direct web cams are not going to be able to effectively use these overlays. Instead, if you plan to use Zoom, you may just want to consider displaying live Handbid TV dashboards instead.  To learn more about Handbid TV, review this article: Handbid TV Overview

Step 1 - Create your Scenes in OBS

(or streaming software of your choice)

In OBS, you will create a series of scenes, these will be predefined layouts where you ill incorporate a number of elements (graphics, logos, images) and sources (video feeds, camera sources, web pages).

Handbid provides three different overlays, so we will create 3 different scenes in our example here:

Scene: Live Auction 

Camera source showing a live auctioneer on the screen along with the item detail for the currently promoted item in Handbid.  (What is a promoted item?  Read here on how to promote items into the live stream).

OBS-Screens-VIBLive Item - Right

Scene: Live Appeal (Ask)

Camera source showing a live auctioneer or emcee on the screen along with a thermometer below the individual. The thermometer will show live donations as they come in along with the user's information and the updated thermometer amount.

OBS-Screens-VIBDonationThermo-Bottom

Scene:  Auction Activity

Camera source showing a live auctioneer or emcee on the screen along with a lower-thirds overlay at the bottom (or anywhere you want to display it) showing live (updated) bidding activity.

OBS-Screens-VIBBidding-LowerThirds

Step 2 - Adding in Handbid to the Scene

You will complete the following for each of your scenes:

Our first step is to name the scene and then add our sources. 

For testing purposes, we will simply add a webcam source as our live camera source and fill the screen with this source.

Next we will add another source which will be our promoted item overlay.  In OBS, to add this source click on "Add Source:  Browser Source".  Name this source anything you wish and save it.  Next click on it to edit its parameters.  What we need to insert here is the URL from Handbid for your event.  We will also need to set the correct dimensions for it so that it formats correctly. 

The following screenshots will show you where to find these settings in OBS

Ok, so where do we find these source URLs in Handbid?  They are under the Promote Item settings In the Handbid Live Stream.  To get them, you will want to go to your event in Handbid, click on Live Stream and then "Promote Item":

Next, if you do not have any item promoted, promote something so that the URLs can generate.  Just promote an item and save.  When you return to the Promote Item settings, you will now see the URLs that you need.

We tried to make it easy on you and provided a button you can click to copy the URL.  Provided your computer is not being uncooperative, it should work. 

For our Live Auction scene, we want to display the "Item" overlay which is the 3rd one in the list here.  So click on the third one if you are following along and then paste this into the OBS settings for this Browser Source:

Where it may get tricky for you is getting the dimensions right.  To do that you will need to understand the layout of the video stream.  The default is 1920x1080 meaning you will have 1920 pixels of width and 1080 high.  To have this item take up 1/2 of the screen vertically (which it was designed to do), then you will want to have it be full height:  1080 and half of the width: 960

If you do this right and save it, it should appear on the screen correctly:

The next steps are to create your other sources for the thermometer and the auction activity ticker.  Follow the same steps:

  1. Add the browser source and name it accordingly (e.g. Thermometer)
  2. Go to Handbid and retrieve the URL for it from Promote Items settings (the URL with "appeal" in it is the thermometer and the one with "bid" in it is for the thermometer)
  3. Paste in those URLs into the browser source and set the dimensions as such:  1920 wide and (1/3 tall or 360 high)
  4. Save those and then incorporate those sources into your scenes (add the Thermometer to your Appeals Scene and the Bid Activity to an "Auction Activity" scene)

Step 3 -  Test the overlays!

The last step is to test this, so promote a test item (one you are fine to delete bids on) and also make sure you have at least one appeal item setup in Handbid.  

Watch the OBS screen (or broadcast it to YouTube if you want) and confirm that your bidding activity and donations appear.  Also on the Live screen, confirm the data updates as you bid on that item (you may want to test this with multiple bidders).

Uncle... I cry Uncle

Seem too complicated? Well if video streaming software is not your thing, it could be.  We would recommend you either consult a professional who knows streaming software like OBS, learn streaming software on your own, or consider Handbid's Auction in a Box bundled solution where we set all of this up for you.