How to Set Up a Webcam Web Page

Use your webcam to livestream on your website

Person smiling while using a computer and livestreaming with a webcam

Cavan Images/The Image Bank / Getty Images

Webcams aren't new to the internet and are still incredibly popular. It's easier than ever to set up a webcam page and build toward becoming one of the many webcam sites available. All you need is a computer with a webcam, an internet connection, and a server to host your site. Getting set up doesn't take too long either.

How to Set Up a Webcam for Livestreaming

Here's how to set up a webcam to work with your website:

  1. Choose a hosting service. 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. You can do this with virtually any web host.

  2. Connect the webcam to the computer you want to stream from. Use your desktop or a smaller dedicated computer, like a Raspberry Pi. Make sure the webcam is connected to a computer that has the latest drivers installed.

  3. Choose a media player. VLC is an open-source media player that's free and works on Windows, Mac, and Linux. VLC comes with built-in streaming capabilities.

    Download button on VLC website

    Go to the VLC download page and download the latest version of the installer. If you use Linux, VLC may be found in your distribution's repositories, so check there first.

  4. Install VLC. A wizard walks you through the process of installing VLC on your system.

    Install VLC
  5. Open VLC.

    VLC Running on Windows 10
  6. In the VLC home screen, select Media.

    Media tab in VLC Media Player on Windows
  7. Select Stream.

    Stream menu option for VLC on WIndows
  8. In the Open Media dialog box, select the Capture Device tab.

    Capture Device in VLC for Windows
  9. Select the Video device name drop-down arrow and choose your webcam. If you plan to capture audio too, select the Audio device name drop-down arrow and choose the audio device. Then, select Stream.

    Stream button in VLC for Windows
  10. Verify the source of your stream. VLC displays the location of your webcam. You can specify another stream but go with the default in most cases.

  11. Set up the destination for your stream. Choose HTTP, then select Add.

    Multiple destinations can be created but HTTP is all you need for your stream.

  12. VLC creates 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, keep the default. The path is the exact path to your stream following the main URL and, by default, it is http://localhost:8080/path. In the Path text box, enter /stream or something similar to keep the stream separate from anything else you may be running.

    HTTP tab in VLC for Windows
  13. Select the encoding profile for your stream. The easiest and most universal format to work with here is OGG. Select the Profile drop-down arrow and choose Video - Theora + Vorbis (OGG). Use the wrench icon to modify 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. Select the Stream all elementary streams check box, then select 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 using your computer's IP address and the port and path that you specified. When you want to do this for the internet, allow access to your home network from the internet. There are two ways to accomplish this.

    • Set up port forwarding from your router to your computer over the port running your stream. Then, set up dynamic DNS from a service such as No-IP.com to ensure that your home IP address doesn't change. With this method, you access your camera the same way, but you'll use the external URL from No-IP followed by the port number and path. Your address would look like yourstream.no-ip.org:8080/stream.
    • 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 on the same local network, making your stream available and easily accessible to your server.
  16. Once you have access to your stream, use a text editor to write some basic HTML to test how your webcam will appear on the page. For something minimal, use this code on the web page:

    <html>
    <head>
    <title>Webcam Test</title>
    </head>
    <body>
    </body>
    </html>
  17. 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" />

     To test this locally on your computer, enter:

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

    <video id="stream" width="640" height="480" src="localhost:8080/stream" />
  19. Add the information about the video. Specify 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" />
  20.  Your HTML file should look similar to this example.

    <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>
  21.  When the HTML looks right, save the file.

  22. Open the file in a browser. To test it locally, right-click the file and select a browser such as Chrome. Otherwise, upload the file to the HTML root directory on your server. The webcam stream plays on a mostly blank page.

    VLC webcam stream in Chrome

There's more you can do with your webcam. If you plan to build your site with WordPress, install one of the webcam plug-ins. With these plug-ins, all you need to do is enter the stream address. If you're building the site yourself, use the HTML5 video tag and work around that.