How to Set Up a Webcam Web Page

Man smiling while using a computer
Cavan Images/The Image Bank/Getty Images

Webcams are nothing new to the Internet. That doesn't mean they're not still incredibly popular. In fact, it's easier than ever to set up your own webcam page. All you need is a computer with a webcam, an Internet connection, and a server to host your site on. Getting set up doesn't take too long either.

  1. You're going to need hosting. A web host is a server that you rent on the Internet to host your site. They're usually inexpensive and don't require much maintenance. Before you begin, get your host set up. You can do this with virtually any web host.

  2. Make sure that your webcam is connected to the computer you want to stream from. You can use your desktop or a smaller dedicated computer, like a Raspberry Pi. It doesn't really matter which you pick. Just make sure that your webcam is connected with the latest drivers installed.

  3. VLC is a fantastic open source media player. It's completely free, and it works on Windows, Mac, and Linux. VLC is a fantastic choice for just about all multimedia activities on your computer, and it comes with built-in streaming capabilities. That makes it a perfect option, creating the stream from your webcam.

    Download button on VLC website

    Head over to VLC's download page, and grab the latest version of the installer. If you're on Linux, you'll probably find VLC in your distribution's repositories, so check there first.

  4. Once you have the VLC installer, run through the process of installing it on your system. The wizard is dead simple, so just walk through the process and install VLC on your system.

    Install VLC
  5. Open up VLC. The associated icon is an orange traffic cone, which has become one of the most recognizable software logos out there.

    VLC Running on Windows 10
  6. From the VLC home screen, select Media in the upper left corner of the menu.

    Media tab in VLC Media Player on Windows
  7. VLC will display a new drop-down menu for the available Media options. Locate Stream toward the lower-middle and select it.

    Stream menu option for VLC on WIndows
  8. A new window will pop open with four tabs across the top. Select Capture Device.

    Capture Device in VLC for Windows
  9. Use the Video device drop-down to select your webcam. If you plan on capturing audio too, select the Audio device too. When you have them both, press Stream at the bottom of the window.

    Stream button in VLC for Windows
  10. The next window will ask you to enter the source of your stream. You won't need to worry about this, it'll already have the location of your webcam. If you want to specify something else here, you can, but you can just go with the default in most cases.

  11. On the next screen, you'll set up the destination for your stream. Use the drop down to select HTTP. and press Add to add it. You can create multiple destinations, if you choose, but HTTP is all you'll need for your stream.

    HTTP tab in VLC for Windows
  12. After you press Add, VLC will create a new tab for your HTTP stream. The tab contains two options, one for the port and one for the path. Unless you have something else using the default port, it's fine to leave that. The path is the exact path to your stream following the main URL. So, by default, it'll look like http://localhost:8080/path. Enter "/stream" or something similar to keep the stream separate from anything else you may be running.

  13. Now, select the encoding profile for your stream. The easiest and most universal format to work with here is OGG. Use the drop down to select Video - Theora + Vorbis (OGG). You can use the wrench icon next to the drop down to tweak specific settings, but the default profile will work for most situations.

    Encoding options button (wrench icon) in Stream Output settings in VLC for Windows
  14. Check the box to Stream all elementary streams, and press Stream to begin.

    Stream button in VLC for Windows
  15. Your stream is now running on your computer at the port that you specified. You can access it on some browser and media players via your computer's IP address and the port and path that you specified. When you want to do this for the Internet, you're going to need to allow access to your home network from the Internet. There are a few ways you can accomplish this.

    The simplest thing you can do is set up port forwarding from your router to your computer over the port running your stream. You'll also need to set up dynamic DNS from someone like No-IP.com in order to ensure that your home IP address doesn't change. With this method, you'd access your camera the same way, but you'd use the external URL you got from No-IP followed by the port number and path. Your address would look like yourstream.no-ip.org:8080/stream. It's kind of ugly, but when you build your site, that address will be buried in HTML code anyway.

    The other option is to set up a VPN. You can connect both your computer and the server hosting your site to the VPN. Through the VPN, they'll behave like they're both on the same local network, making your stream available and easily accessible to your server. This is probably the "better" option, but it's not nearly as simple to set up.

  16. Once you have access to your stream sorted out, you can write some basic HTML to test out how your webcam will appear on your page. If you're going for something really minimal, you can use the code on your page itself.

    Start by creating the basic skeleton of an HTML page with a text editor. Notepad works fine on Windows. Linux users can use something graphical like Gedit or a command line editor like Vim. Use a basic layout like the one below.

    <html>
    <head>
    <title>Webcam Test</title>
    </head>
    <body>
    </body>
    </html>
  17. Now, create the HTML5 video tag within the <body> tags. Set the source attribute to the location of your stream.

     <video src="yourstream.no-ip.org:8080/stream" />

     Of course, you can test this locally on your own computer too.

     <video src="localhost:8080/stream" />
  18. Add in the rest of the attributes for your video, beginning with the ID, height, and width.

    <video id="stream" width="640" height="480" src="localhost:8080/stream" />

    Then, add in the information about the video itself, specifying the type of video, the codec, and how the browser should play it.

    <video id="stream" width="640" height="480" src="localhost:8080/stream" type="video/ogg; codecs=theora" autoplay="autoplay" />
  19.  Take a look at the whole thing. It should look something like the example below.

    <html>
    <head>
    <title>Webcam Test</title>
    </head>
    <body>
    <video id="stream" width="640" height="480" src="http://localhost:8080/stream" type="video/ogg; codecs=theora" autoplay="autoplay"/>
    </body>
    </html>

     When everything looks right, save it.

  20. Open the file in your browser. If you're testing it locally, you can right click on the file and select your browser to open it. Chrome seems to work best. Otherwise, upload the file into your HTML root directory on your server.

    VLC Webcam Stream in Chrome

    You should see your webcam stream playing on a mostly blank page.

  21. There is plenty more that you can do here. If you plan on building your site with WordPress, there are tons of webcam plugins ready for you to plug in the stream address and use them. If you're building the site yourself, use the HTML5 video tag and work around that.