I built a local TV station to keep myself and my kids occupied. You can too!
Published: 2020-04-13 12:47:08

---
title: I built a local TV station to keep myself and my kids occupied. You can too!
published: true
date: 2020-04-07 00:00:00 UTC
tags: 
canonical_url: https://apivideo.github.io/2020/04/07/localtv.html
---

It must have been over a hundred degrees inside the panda suit, but I wasn't complaining. I felt a sense of fulfillment, unlike anything I had ever felt before.

It would be totally fair for you to ask what I was doing in the said panda suit and why I'm claiming that I was happy with that situation. I can't promise to settle all the doubts in your mind, but I'll give it my best shot.

* * *

Take a look at this photo:<picture style="">
            <source srcset="https://images.storychief.com/account_21166/IMG_20200319_070058_fa072b72d4c4717edbc64d195e1abe8d_800.jpg 1x, https://images.storychief.com/account_21166/IMG_20200319_070058_fa072b72d4c4717edbc64d195e1abe8d_1600.jpg 2x" media="(max-width: 768px)"></source>
<source srcset="https://images.storychief.com/account_21166/IMG_20200319_070058_fa072b72d4c4717edbc64d195e1abe8d_800.jpg 1x, https://images.storychief.com/account_21166/IMG_20200319_070058_fa072b72d4c4717edbc64d195e1abe8d_1600.jpg 2x" media="(min-width: 769px)"></source><img style="" alt="" src="https://images.storychief.com/account_21166/IMG_20200319_070058_fa072b72d4c4717edbc64d195e1abe8d_800.jpg">
        </picture>

That's my son, the apple of my eye, on day number eleven of this wretched lockdown.

And he's not the only one who felt this way. The thrill of an unexpected and "until further notice" vacation was wearing off on my older girls as well and they were beginning to get BORED:

<picture style="">
            <source srcset="https://d37oebn0w9ir6a.cloudfront.net/account_21166/AnimatedGIF-downsized_large_f43ec9136fe22edb4910c2164c1e250a.gif 1x" media="(max-width: 768px)"></source>            <source srcset="https://d37oebn0w9ir6a.cloudfront.net/account_21166/AnimatedGIF-downsized_large_f43ec9136fe22edb4910c2164c1e250a.gif 1x" media="(min-width: 769px)"></source>            <img style="" alt="" src="https://d37oebn0w9ir6a.cloudfront.net/account_21166/AnimatedGIF-downsized_large_f43ec9136fe22edb4910c2164c1e250a.gif">
        </picture>

I was also getting bored with teaching fourth-grade math and kindergarten level English.

To complicate matters, I had just started a new job at [api.video](https://api.video/) and needed to get familiar with their [video API](https://docs.api.video/5.1/introduction/api-endpoints). I love working from home as much as anybody. Still, even the most optimistic, "look on the bright side," type of person, would not call what those of us with kids are trying to accomplish, "working from home." More like "suffer from home."
<picture style="">
            <source srcset="https://d37oebn0w9ir6a.cloudfront.net/account_21166/IMG_20200117_132251-ANIMATION_30dcead609975d00f5a594b9c2a17d75.gif 1x" media="(max-width: 768px)"></source>            <source srcset="https://d37oebn0w9ir6a.cloudfront.net/account_21166/IMG_20200117_132251-ANIMATION_30dcead609975d00f5a594b9c2a17d75.gif 1x" media="(min-width: 769px)"></source>            <img style="" alt="" src="https://d37oebn0w9ir6a.cloudfront.net/account_21166/IMG_20200117_132251-ANIMATION_30dcead609975d00f5a594b9c2a17d75.gif">
        </picture><figcaption>He's cute, but I can't work like this.</figcaption>

* * *

> I realized that it was up to me to keep my family from imploding. I needed to think of an idea, a mission, if you will. Something to give meaning to this endless stream of days.

What I was looking for was a family goal. A challenge that would inspire my kids and fire up their imaginations. It also needed to be something that would be fun and challenging for me.

Yet another requirement was that it needed to enable me to get **actual** work done.

This all seemed impossible.

I decided to pull out my secret weapon. I don't remember what it's called or where I learned it. I think it's somewhat of a cross between a technique that Neil Gaiman uses to get himself to write and something I read in Deep Work.

It works like this.

1. You are not allowed to think about anything besides the problem for X minutes.

That's it.

So I did that and came up with perhaps the most **brilliant** idea I have ever had in my life.

* * *

### A local TV station!

Not unlike the famed Simpson's monorail, building and managing a local TV station would solve ALL these problems and more!

- The kids would love it. What kid wouldn't like the idea of creating movies that their friends can watch on TV?        
- It would be super-educational for the kids. They would get to learn some of the most essential skills that aren't taught in schools.        
- It would be educational for me. Video and video streaming are obviously essential to TV. I would get to do what I was **supposed** to be doing for work, and my kids would let me do it because they want to see themselves on TV already.        
- It would provide **meaning.** We would be helping our community. We are a very close community and spend lots of time in each other's houses. This would be a way to bring the community together and help people feel less lonely.        

* * *

### How I did it (and how you can too!)

**Step 1. Onboarding.**

I called a family meeting.

More accurately, I said, really loudly:

"Ditsa, Libi, and Yaffa come here, I have something to tell you."

When no one responded, I tried again:

"Ditsa, Libi, and Yaffa come here, I have something to tell you **that you are going to like!**"

Now I had an audience 😄.

I shared my idea with them, and they were **TOTALLY** down.

"Dad, you are telling us that if we put together a play, you can get it on TV??"

Before I could even explain that I would first need to BUILD the TV station, they had run off, eager to begin planning for their TV debut.

**There could be no turning back now.**

**Step 2. Creating the station.**

I needed to get a website up quickly. I wanted to build something that would be fast to create, lightweight, easy to explain to the kids, and easy to replicate.

I think I succeeded!

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" href="https://via.placeholder.com/70x70">
    <link rel="stylesheet" href="https://andybrewer.github.io/mvp/mvp.css">

    <meta charset="utf-8">
    <meta name="description" content="My description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Local TV</title>
</head>

<body>
<header>
    <h1><u>Local<i>TV</i></u></h1>
    <p>Brought to you by
        <mark><a href="https://api.video">api.video</a></mark>!
    </p>
</header>
<main>
    <article>
        <div style="position:relative;padding-top:56.25%;">
        <!-- replace src with the embed code you get from api.video -->
            <iframe src="https://embed.api.video/live/li4G2ooxtZEgsgdsgdsgdsHn7WxQtYJuHn3"
                    style="position:absolute;top:0;left:0;width:100%;height:100%;"
                    allowfullscreen></iframe>
        </div>
    </article>
</main>
<footer>
</footer>
</body>
</html>
```

Yup! That's the **ENTIRE** website. You can literally just copy/paste that into a text file, save it with a .html suffix, and you're done (well, with the TV website UI at least)!

You can see what this looks like in action at [mishktv.com](http://mishktv.com). It's dead air much of the time, but you just may get lucky and catch a live performance!  
  
You can also play around with this[on Codepen](https://codepen.io/yitzi/pen/ExjBMdE).

If you are actually following along and implementing your own TV station, I'd recommend forking [the repo](https://github.com/apivideo/LocalTV) from Github. If you don't know what that means, don't worry, all you need is the code block above saved in a .html file.

**Step 3. Set up an account with a video API**

To stream, we need a platform that can receive that broadcast and play it back live to a broad and distributed audience (your neighbors).

I chose to use [api.video](https://api.video/), and if you want to follow along, then it would be easiest to use them as well.

- Visit [api.video](https://api.video) (duh!)

<picture style="">
            <source srcset="https://images.storychief.com/account_21166/Capture_b55bf40e308917e6e2af370791c1943b_800.PNG 1x" media="(max-width: 768px)"></source>
            <source srcset="https://images.storychief.com/account_21166/Capture_b55bf40e308917e6e2af370791c1943b_800.PNG 1x" media="(min-width: 769px)"></source>
            <img style="" alt="" src="https://images.storychief.com/account_21166/Capture_b55bf40e308917e6e2af370791c1943b_800.PNG">
        </picture>

- Click the big blue "Sign up for free" button.
- You know how to sign up.

<picture style="">
            <source srcset="https://images.storychief.com/account_21166/Capture_31f9e6004c5f1e7a5e2808801ba5e08c_800.PNG 1x" media="(max-width: 768px)"></source>
            <source srcset="https://images.storychief.com/account_21166/Capture_31f9e6004c5f1e7a5e2808801ba5e08c_800.PNG 1x" media="(min-width: 769px)"></source>
            <img style="" alt="" src="https://images.storychief.com/account_21166/Capture_31f9e6004c5f1e7a5e2808801ba5e08c_800.PNG">
        </picture>

- Select "Sandbox" and then click "My live stream."

<picture style="">
            <source srcset="https://images.storychief.com/account_21166/Capture_61dd9892e702b6172e947dda78830bcf_800.PNG 1x" media="(max-width: 768px)"></source>
            <source srcset="https://images.storychief.com/account_21166/Capture_61dd9892e702b6172e947dda78830bcf_800.PNG 1x" media="(min-width: 769px)"></source>
            <img style="" alt="" src="https://images.storychief.com/account_21166/Capture_61dd9892e702b6172e947dda78830bcf_800.PNG">
        </picture>

- Name your stream. You can change this later.
- Hit "Save Livestream"

<picture style="">
            <source srcset="https://images.storychief.com/account_21166/Capture_399267764f46097f487a96c8b3625f8f_800.PNG 1x" media="(max-width: 768px)"></source>
            <source srcset="https://images.storychief.com/account_21166/Capture_399267764f46097f487a96c8b3625f8f_800.PNG 1x" media="(min-width: 769px)"></source>
            <img style="" alt="" src="https://images.storychief.com/account_21166/Capture_399267764f46097f487a96c8b3625f8f_800.PNG">
        </picture><figcaption>Leave this window open</figcaption>

🎉🎉🎉Congrats!! You have successfully created a live stream!!🎉🎉🎉

**Step 4. Update index.html**

Remember the .html file from earlier? Now that you have created a live stream we just need to make a small update to configure it to display your stream.

- Clicking on your live stream from the dashboard that you have open on api.video will bring you to a page that looks like this:        

<picture style="">
            <source srcset="https://images.storychief.com/account_21166/tempsnip_aec15b95d9d8d037ea5a23035d8804fc_800.png 1x" media="(max-width: 768px)"></source>
            <source srcset="https://images.storychief.com/account_21166/tempsnip_aec15b95d9d8d037ea5a23035d8804fc_1000.png 1x" media="(min-width: 769px)"></source>
            <img style="" alt="" src="https://images.storychief.com/account_21166/tempsnip_aec15b95d9d8d037ea5a23035d8804fc_1000.png">
        </picture>

- Clicking "Copy link" will copy everything you need to your clipboard.
- Look for the "src" attribute inside the iframe (there is only one).
- Replace the placeholder link with the link you just copied.

In my case, it now looks like this:

```html
<iframe src="https://embed.api.video/live/li4j6xLydSACIaLDWoznxSgX" style="position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe>
```

- Save the file.

Congrats!! You are now **finished** building your TV station!

**Step 5. Going live**

Your station is done, but no one is going to be able to watch it if it remains on your computer. You must deploy it to a static web host.

If you have never deployed a static site before, I recommend trying out [tiiny.host](https://tiiny.host) (not an affiliate link, just the simplest I've found).

My fingers are getting sore from all this typing, so watch this video to see how it's done:

<iframe width="480" height="270" src="https://www.youtube.com/embed/nqPreVmUdfw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>

Now all that's left to do is to share the link and get famous!  
  
Well, almost...

You do still need to plan and create content for your TV show and broadcast it to your live stream.

Don't worry if you have never used broadcasting software before. It's not difficult to learn.

To start, I'd recommend reading "[To Start a Stream](https://github.com/apivideo/LocalTV#to-start-a-stream)." and "[Lessons from my first year of live coding on Twitch](http://meow.noopkat.com/lessons-from-one-year-of-streaming-on-twitch/)."

* * *

If you haven't noticed, I did not quite accomplish what I set out to do. I never did get around to explaining what I was doing in the bear suit.  
  
But this post is definitely done.

I guess you'll have to stay tuned for **Part 2 😀 See ya then!**