5. Setting up synchronized audio and video for Internet control of music sequences

If you are using xLights musical sequences, it is possible to allowing Internet viewers to watch and hear your show! Viewers can select musical sequences that they want to hear from the webpage explained earlier in these instructions. OBS Studio (a free program that streams video and audio to the Internet) and Twitch (a free video streaming provider that allows lots of people to view your video simultaneously) are the keys to making this work. This is how it all works:

The video feed from your network camera is piped into OBS Studio running on a computer or laptop. In my setup, my network camera's video feed is accessible via a webpage link; this link is fed into OBS Studio as a video source.
Your musical sequences and related MP3 files are stored on a Raspberry Pi running Falcon Player.
Audio from the Raspberry Pi is piped into OBS Studio via a 3.5mm audio cable from the Raspberry Pi to the Audio In jack of your computer or laptop.
OBS Studio combines the video & audio into a single feed, sending it to Twitch, an online streaming service.
Internet viewers watch and hear your video feed on Twitch.
As an added bonus, if you purchase a USB sound adapter with dual Audio Out / headphone jacks for your Raspberry Pi, you can send audio to your computer to OBS and audio to an FM transmitter simultaneously. This way, cars on your road can watch and hear your show, and so can Internet viewers.

How to Build It

Building the hardware

First off, buy this USB sound board from Amazon or eBay. It is natively supported by Raspberry Pi and Falcon Player:

USB Sound Card Adapter BENGOO External Audio Adapter Stereo Sound Card Converter 3.5mm AUX Microphone Jack for Gaming Headset Earphone PS4 Laptop Desktop Windows Mac OS Linux, Plug Play

https://www.amazon.com/gp/product/B072BMG9TB

Also buy this FM transmitter and antenna:

PLL LCD Digital FM Radio Receiver Module 87-108MHZ Wireless Microphone Stereo

https://www.ebay.com/itm/PLL-LCD-Digital-FM-Radio-Receiver-Module-87-108MHZ-Wireless-Microphone-Stereo/272315809627

98cm 38.5" 7 Sections Telescopic Antenna Replacement for FM Radio TV CP

https://www.ebay.com/itm/98cm-38-5-7-Sections-Telescopic-Antenna-Replacement-for-FM-Radio-TV-CP/331919180223

Connect the USB audio adapter to your Raspberry Pi, then connect a 3.5mm audio cable from the headphone jack of the USB sound adapter to the Audio In jack of the FM transmitter. Connect another audio cable from the second headphone jack on the USB sound adapter to the Audio In port of your computer.

Be sure to power the FM transmitter with a 5V Micro USB power supply. In order to attach the antenna, connect a wire to the nut at the bottom of the antenna, then solder the other end of the wire to the ANT hole on the FM transmitter's circuit board.

Note: If you would like to 3D print the frame and antenna stand as shown in the above pictures, download the STL file here. The FM transmitter enclosure can be found here: https://www.thingiverse.com/thing:2247929

Also, buy/build a network IP camera using the instructions here.

Configuring the software

The goal is to combine the video feed from your network IP camera with the audio feed from Falcon Player on your Raspberry Pi. OBS Studio is used to do this. Then, you create an account on Twitch, a free streaming service. OBS Studio is configured to send the combined video/audio feed to Twitch. Finally, you update the index.php file on the voting system with the URL to your Twitch streaming account. This way, your website will embed the video feed for visitors to see (and hear) your lights.

Creating a Twitch account

Go to www.twitch.tv then create a free account.
Login to Twitch using your account.
In the Twitch top-right toolbar, click the icon for your account, then choose "Creator Dashboard" from the menu.
On the Dashboard page, choose Settings > Channel from the left-side bar.
On the Stream Key & Preferences page, you will see "Primary Stream key". Click the Show link to reveal it.
Copy & paste this key to your computer's clipboard (press [Ctrl-C] or click the [Copy] button on this page). You will use this key when setting up OBS Studio below. It's also a good idea to paste this key into a text file as a backup copy.

Add Twitch stream to the Internet control website

In order for Internet viewer to view your video feed, you need to include your twitch account in the index.php file on your website. This is very easy to do!

Edit index.php on your website with a text editor.
On line 156, replace the text after "?channel=" with your Twitch channel name and "parent=" with the root URL to our Internet control website (do not include https://www). In my case, my Twitch channel name is "tominohio" and my Internet control website root is "itwinkle.org", so line 156 on my website looks like:

src="https://player.twitch.tv/?channel=tominohio&parent=itwinkle.org"
Save the file, then upload the file to your Internet control website.

Note: Twitch requires that your Internet control website has SSL (HTTPS) enabled.

Install and configure OBS Studio

Download and install the free OBS Studio program here.
Start OBS Studio. If a window doesn't appear, click the related icon in your system tray (near the clock, if you are running Windows).
We need to create a new "Scene" with two "Sources" in it.
1. Click the [+] button under the Scenes section to create a new scene.
2. Enter name for the scene (I called mine "Christmas lights"), then click the [OK] button.
Now create a "source" for the video feed. OBS will read the video feed coming from your network IP camera, like this:
1. Click the [+] button under the Sources section to create a new source.
2. Choose "BrowserSource" from the menu that appears.
3. In the Properties window that appears:
  1. For the "URL" field, enter the address of your network IP camera. For example, the address for my camera is "http://169.101.200.199:8080".
  2. For the "Width" and "Height" fields, enter the resolution that your network IP camera is using. My camera uses 1280x720.
  3. For the "FPS" field, enter the framerate that your network IP camera is using. Mine is set to 20 frames per second.
    
    Note: If your resulting video feed is slow and choppy, your Internet provider bandwidth may be too slow. Either ask your Internet provider for more bandwidth or lower the resolution and/or framerate on your network IP camera.
  4. Click the [OK] button to save your settings.
Now create a "source" for the audio feed coming from the Raspberry Pi into your computer.
1. Click the [+] button under the Sources section to create a new source.
2. Choose "Audio Input Capture" from the menu that appears.
3. In the Create/Select Source window that appears, click the [OK] button.
4. In the Properties window that appears:
  1. Choose "Default" in the "Device" field. This should relate to your computer's "audio in" jack, which is usually blue in color.
    
    Note: If audio is not being added to the video when watching the Twitch stream, try choosing a different device in the "Device" field.
  2. Click [OK] to save your settings.
5. You will notice a Mixer section next to the Sources section. This is where you can monitor the audio coming into your computer from the Raspberry Pi. As sound comes in, an animated bar should pulsate to the music. You can also increase/decrease the volume coming in. If you click the "gear" icon in the Mixer section, you can edit the sound volume even more.
Now configure OBS Studio to use your Twitch account
1. Click the [Settings] button on the right-side of the screen.
2. In the window that appears, click the "Stream" tab on the left sidebar.
  1. In the "Stream Type" field, choose "Streaming Services.
  2. In the "Service" field, choose "Twitch".
  3. In the "Server" field, choose "Auto (Recommended)".
  4. In the "Stream key" field, enter the key that Twitch provided when you created your account.
3. Click the "Output" tab on the left sidebar.
  1. Place a checkmark in the "Rescale Output" field, then enter your network IP camera's resolution next to the checkbox.
  2. Choose "CBR" for the "Rate Control" field.
  3. Enter "1700" for the Bitrate field.
    
    Note: If your resulting video feed is slow and choppy, your Internet provider bandwidth may be too slow. Either ask your Internet provider for more bandwidth or lower the bitrate here.
4. Click the "Video" tab on the left sidebar.
  1. In the "Base (Canvas) Resolution" and "Output (Scaled) Resolution" fields, enter your network IP camera's resolution.
  2. In the "Integer FPS Value" field, enter your network IP camera's frame rate (in my case, it's "20").
    
    Note: If your resulting video feed is slow and choppy, your Internet provider bandwidth may be too slow. Either ask your Internet provider for more bandwidth or lower the resolution and/or framerate on your network IP camera.
5. Click the [OK] button to save these settings.
Configure general settings in OBS Studio
1. The following setting tells OBS Studio to start as an icon in your system tray. This way you can keep using your computer for other tasks while OBS Studio is operating your video feed.
  1. Click the [Settings] button on the right-side of the screen.
  2. In the window that appears, click the "General" tab on the left sidebar.
  3. In the "System Tray" section, enable all three checkboxes.
  4. Click the [OK] button to save these settings.
2. The following settings allow you to enable/disable video streaming with hotkeys on the keyboard.
  1. Click the [Settings] button on the right-side of the screen.
  2. In the window that appears, click the "Hotkeys" tab on the left sidebar.
  3. Click in the "Start Streaming" field, then press the hotkey that you wish to use to begin sending video/audio to Twitch. I used Ctrl-F1.
  4. Click in the "Stop Streaming" field, then press the hotkey that you wish to use to begin sending video/audio to Twitch. I used Ctrl-F2.
  5. Click the [OK] button to save these settings.

Configure your computer to automatically start OBS Studio

Your computer can start OBS Studio and begin streaming on a schedule, such as several times a day, daily, weekly, etc. This is accomplished through the Windows Task Scheduler program that comes with Windows.

First, we need to know where OBS Studio was installed on your computer.

There should be a shortcut on your desktop to start it. Right-click this shortcut, then click Properties from the menu that appears.
Highlight the text in the Target field, then press [Ctrl-C] to copy it. Click the [Cancel] button.
Open Windows Task Manager and create a new task on a schedule. These webpages have helpful information for doing this:

https://www.thewindowsclub.com/how-to-schedule-batch-file-run-automatically-windows-7

http://www.get-itsolutions.com/create-windows-task-scheduler-and-schedule-to-run-bat-file

https://www.computerhope.com/issues/ch000785.htm
During the instructions above, when you are prompted for a program to run on a schedule, press [Ctrl-V] to paste the text from Step 2 above. At the end of the text, add this command: --startstreaming. For instance, here would be the program for my computer:

"D:\Program Files\obs-studio\binbit\obs64.exe" --startstreaming
Save your task in Windows Task Scheduler, then close the program.
To stop outputting video at a certain time each day, go to the Tools > Output Timer menu in OBS Studio. Specify the number of hours and minutes to stop streaming in the "Stop streaming after" field. For instance, if Windows Task Scheduler is starting OBS Studio at 7:00 each night and you want to stop the video stream at 10:00, enter three hours in this field.
You're done! OBS Studio should automatically start on a schedule; you will see an icon in your System Tray while it's running.
Needless to say, your computer must be powered on in order for all of this to work. If you don't want your computer running 24x7 over the holidays, your computer's BIOS may have an option to automatically turn itself on each day at a certain time. Check your computer's manual for how to do this.