How to Embed My Foscam R2 Camera into Web Site

How to Embed My Foscam R2 Camera into Web Site

by

Embedding your Foscam R2 camera into a website allows real-time video streaming for home or business monitoring. This guide walks you through setup, configuration, and integration using HTML, RTSP, and third-party tools.

Key Takeaways

  • Understand the basics: The Foscam R2 supports RTSP and MJPEG streams, which can be embedded using HTML and JavaScript.
  • Access your camera locally: Ensure your camera is connected to your network and accessible via its IP address.
  • Use secure credentials: Always use strong passwords and enable HTTPS if exposing your stream externally.
  • Choose the right method: Options include direct iframe embedding, using a media server, or integrating with platforms like Home Assistant.
  • Test before going live: Verify stream stability and performance on different devices and browsers.
  • Consider privacy and security: Avoid exposing your camera feed publicly without authentication or access controls.
  • Troubleshoot common issues: Address buffering, login errors, and firewall blocks with proven solutions.

Introduction: Why Embed Your Foscam R2 Camera?

So, you’ve got a Foscam R2 camera—great choice! It’s a reliable, high-definition IP camera perfect for home security, baby monitoring, or keeping an eye on your pets. But what if you want to view that live feed directly on your website? Whether you’re building a personal dashboard, a security portal, or a smart home interface, embedding your Foscam R2 stream can add real-time visibility and convenience.

In this guide, we’ll walk you through how to embed your Foscam R2 camera into a website—step by step. You’ll learn how to access your camera’s video stream, choose the best embedding method, write the necessary code, and troubleshoot common issues. No need to be a coding expert—we’ll keep things simple and practical.

By the end of this guide, you’ll have a working live video feed from your Foscam R2 displayed on your webpage, whether it’s hosted locally or online. Let’s get started!

What You’ll Need Before You Begin

Before diving into the technical steps, make sure you have the following ready:

How to Embed My Foscam R2 Camera into Web Site

Visual guide about How to Embed My Foscam R2 Camera into Web Site

Image source: foscam.eu

  • Foscam R2 camera powered on and connected to your Wi-Fi network.
  • Router access to check IP addresses and configure port forwarding (if needed).
  • Computer or device to access the camera’s web interface and edit your website code.
  • Basic knowledge of HTML—don’t worry, we’ll explain everything.
  • Text editor like Notepad++, VS Code, or any code-friendly editor.
  • Web hosting or local server to test your embedded stream (e.g., XAMPP, WAMP, or a live website).

Optional but helpful:

  • A domain name (if embedding on a public site).
  • SSL certificate (for secure HTTPS streaming).
  • Third-party tools like VLC, FFmpeg, or a media server (for advanced setups).

Step 1: Access Your Foscam R2 Camera

The first step is to make sure your Foscam R2 is properly set up and accessible on your network. Here’s how:

Connect the Camera to Your Network

Plug in your Foscam R2 and connect it to your Wi-Fi. Use the Foscam app (available on iOS and Android) to complete the initial setup. The app will guide you through connecting the camera to your home network.

Find the Camera’s IP Address

Once connected, you need to find the local IP address assigned to your camera. Here’s how:

  • Open your router’s admin page (usually by typing 192.168.1.1 or 192.168.0.1 into your browser).
  • Log in with your router credentials.
  • Look for a section like “Connected Devices,” “DHCP Clients,” or “Network Map.”
  • Find your Foscam R2 (it may appear as “Foscam” or the camera’s MAC address).
  • Note down the IP address (e.g., 192.168.1.105).

Alternatively, use the Foscam app—go to camera settings and check the network info.

Test Camera Access via Browser

Open a web browser and type the camera’s IP address into the address bar:

http://192.168.1.105

You should see the Foscam login page. Enter your username and password (default is usually admin with no password, but you should change this for security).

If the page loads, great! Your camera is accessible. If not, check your network connection or firewall settings.

Step 2: Understand Foscam R2 Streaming Options

The Foscam R2 supports two main video streaming protocols:

  • RTSP (Real-Time Streaming Protocol) – Ideal for low-latency, high-quality video. Used by media players and servers.
  • MJPEG (Motion JPEG) – Simpler, works in browsers without plugins. Each frame is a JPEG image.

For web embedding, MJPEG is often easier because it works directly in HTML. RTSP requires additional tools or plugins but offers better performance.

Find Your Stream URLs

Each protocol has a specific URL format. Here are the standard Foscam R2 stream URLs:

MJPEG Stream URL

http://[CAMERA_IP]/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=[USERNAME]&pwd=[PASSWORD]

Example:

http://192.168.1.105/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=admin&pwd=yourpassword

RTSP Stream URL

rtsp://[USERNAME]:[PASSWORD]@[CAMERA_IP]:554/videoMain

Example:

rtsp://admin:yourpassword@192.168.1.105:554/videoMain

Note: Replace [CAMERA_IP], [USERNAME], and [PASSWORD] with your actual details.

You can test these URLs in VLC Media Player (Open Network Stream) to confirm they work.

Step 3: Embed the Camera Using HTML (MJPEG Method)

The simplest way to embed your Foscam R2 into a website is using the MJPEG stream with an HTML <img> tag. Here’s how:

Create a Basic HTML Page

Open your text editor and create a new file called camera.html. Add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Foscam R2 Live Feed</title>
</head>
<body>
    <h1>Live Camera Feed</h1>
    <img src="http://192.168.1.105/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=admin&pwd=yourpassword" 
         alt="Foscam R2 Stream" 
         width="640" height="480">
</body>
</html>

Customize the Code

  • Replace the src URL with your camera’s IP and credentials.
  • Adjust width and height to fit your layout.
  • Add a <div> container or CSS for styling if needed.

Test Locally

Save the file and open it in your browser. You should see the live video feed from your Foscam R2.

If the image appears but is frozen or blank, check:

  • Camera is powered and connected.
  • IP address is correct.
  • Username and password are accurate.
  • No firewall is blocking the stream.

Step 4: Improve Security and Performance

While the MJPEG method works, it has security and performance drawbacks. Let’s fix them.

Avoid Hardcoding Credentials

Putting your username and password in the HTML source is risky—anyone viewing the page source can see them.

Better approach: Use a proxy script (PHP, Node.js, etc.) to hide credentials.

Example: PHP Proxy Script

Create a file called stream.php:

<?php
$url = "http://192.168.1.105/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=admin&pwd=yourpassword";
header("Content-Type: multipart/x-mixed-replace; boundary=--myboundary");
readfile($url);
?>

Then update your HTML:

<img src="stream.php" alt="Secure Camera Feed" width="640" height="480">

Now the credentials are hidden on the server side.

Enable HTTPS (If Hosting Online)

If your website uses HTTPS, browsers may block HTTP streams (mixed content). To fix this:

  • Use a reverse proxy (e.g., Nginx) to serve the camera stream over HTTPS.
  • Or use a cloud-based relay service.

Optimize Stream Quality

In the Foscam web interface, go to Settings > Video and adjust:

  • Resolution: 720p or 1080p (higher = better quality, more bandwidth).
  • Frame rate: 15–30 fps (lower = less lag).
  • Bitrate: Auto or set manually to balance quality and speed.

Step 5: Embed Using RTSP (Advanced Method)

RTSP offers better performance but doesn’t work directly in most browsers. You’ll need a media server or plugin.

Option 1: Use a Media Server (Recommended)

Convert RTSP to HLS or WebRTC using a server like:

  • FFmpeg + Nginx
  • Wowza Streaming Engine
  • Unifi Video or Shinobi

Example: FFmpeg to HLS

Run this command on a server:

ffmpeg -i rtsp://admin:yourpassword@192.168.1.105:554/videoMain \
       -c:v libx264 -preset ultrafast -tune zerolatency \
       -f hls -hls_time 2 -hls_list_size 5 -hls_flags delete_segments \
       /var/www/html/stream.m3u8

Then embed the HLS stream in HTML5:

<video width="640" height="480" controls autoplay>
    <source src="stream.m3u8" type="application/x-mpegURL">
    Your browser does not support HLS.
</video>

This method is more complex but offers smooth, low-latency streaming.

Option 2: Use a WebRTC Gateway

Tools like Janus Gateway or Mediasoup can convert RTSP to WebRTC for real-time browser streaming.

This is ideal for live monitoring with minimal delay but requires technical setup.

Step 6: Embed in Popular Platforms

Want to integrate your Foscam R2 into a smart home or CMS? Here’s how:

Home Assistant

Add this to your configuration.yaml:

camera:
  - platform: ffmpeg
    name: Foscam R2
    input: rtsp://admin:yourpassword@192.168.1.105:554/videoMain

Restart Home Assistant, and the camera will appear in the dashboard.

WordPress

Use a plugin like IP Video Embed or add the MJPEG <img> tag directly in a custom HTML block.

Node-RED

Use the node-red-contrib-camera node to display the stream in a dashboard.

Step 7: Troubleshooting Common Issues

Even with perfect setup, things can go wrong. Here are common problems and fixes:

No Video or Blank Screen

  • Check camera power and network connection.
  • Verify IP address hasn’t changed (use static IP or DHCP reservation).
  • Test the stream URL in VLC.

Login Failed or Access Denied

  • Double-check username and password.
  • Reset the camera if needed (hold reset button for 10 seconds).
  • Ensure the camera allows remote access (check settings).

Stream Buffering or Lagging

  • Reduce resolution or frame rate in camera settings.
  • Use a wired Ethernet connection instead of Wi-Fi.
  • Upgrade your internet upload speed if streaming externally.

Browser Blocks Mixed Content

  • Serve your website over HTTPS.
  • Use a proxy to convert HTTP stream to HTTPS.

Firewall or Router Blocks Port

  • Ensure port 80 (HTTP) or 554 (RTSP) is open.
  • Set up port forwarding if accessing from outside your network.

Best Practices for Safe and Reliable Streaming

Embedding a camera feed comes with responsibility. Follow these best practices:

  • Change default credentials immediately after setup.
  • Use a strong, unique password for the camera.
  • Enable HTTPS on your website if exposing the stream publicly.
  • Limit access with IP whitelisting or login walls.
  • Update firmware regularly to patch security flaws.
  • Avoid public exposure unless absolutely necessary—use private dashboards instead.
  • Monitor bandwidth usage to avoid slowing down your network.

Conclusion: You’re All Set!

Congratulations! You’ve successfully learned how to embed your Foscam R2 camera into a website. Whether you used the simple MJPEG method or went advanced with RTSP and media servers, you now have a live video feed integrated into your site.

Remember, the key is balancing ease of use with security. Start simple, test thoroughly, and scale up as needed. With the right setup, your Foscam R2 can become a powerful part of your home automation, security system, or personal website.

Got questions? Check the FAQs below or consult the Foscam support page. Happy streaming!

Related posts:

  1. How to Install Foscam Camera: Step-by-Step Guide for Beginners
  2. How to Connect Foscam to Wifi: Step-by-Step Guide for Beginners
  3. How to Connect Foscam Wirelessly: Easy Step-by-Step Guide
  4. How to Access Foscam Dvr from Remote Location