Embedding Axis IP camera video into a web page allows you to display live or recorded footage directly from your browser. This guide walks you through the process using VAPIX API, ONVIF protocol, and RTSP streaming, so you can choose the best method for your setup. Whether you’re building a security dashboard or monitoring system, we’ll show you how to do it securely and efficiently.
# How to Embed Axis IP Camera Video to Web Page
If you’ve got an Axis IP camera installed—whether it’s protecting your home, office, or retail space—you might want to share its live view with others online. Maybe you’re building a remote monitoring dashboard, managing multiple locations, or just curious about what’s happening at home while you’re away. The good news? You can embed Axis IP camera video directly into a webpage.
But here’s the catch: unlike regular webcams, Axis cameras don’t plug into your computer. They run on networks, use specialized protocols, and require some setup to get their video flowing into a browser. Don’t worry—this guide breaks it all down step by step, even if you’re not a tech wizard.
By the end of this article, you’ll know exactly how to display your Axis camera feed on any website using safe, modern methods. We’ll cover everything from enabling camera features to writing simple HTML code. Let’s dive in!
## Understanding Axis IP Cameras and Streaming Basics
Before we start coding, let’s talk about what makes Axis cameras special—and why embedding their video isn’t as simple as pasting a YouTube link.
Axis IP cameras are professional-grade network cameras designed for surveillance, traffic monitoring, industrial inspection, and more. Unlike consumer webcams, they communicate over IP networks using standardized protocols like **ONVIF**, **RTSP**, and their proprietary **VAPIX** interface.
When you embed an Axis camera video on a webpage, you’re essentially asking the browser to fetch and display real-time video data sent over the internet. But browsers can’t understand raw camera packets—they need video formats like **H.264** wrapped in containers like **MP4** or streamed via **HLS** or **WebRTC**.
That’s where tools and libraries come in. You won’t always need complex servers—sometimes a simple `
Let’s explore your options.
## Method 1: Using VAPIX API (Recommended for Axis Devices)
The easiest and most reliable way to embed an Axis camera feed is through its built-in **VAPIX API**. This is Axis’ own application programming interface—kind of like a remote control for your camera that runs over the web.
### Step 1: Enable VAPIX Access
First, make sure VAPIX is enabled on your Axis camera:
1. Open your camera’s web interface in a browser (usually `http://[camera-ip]`).
2. Log in with admin credentials.
3. Go to **Setup > System Options > Security**.
4. Under **Access Control**, ensure **HTTP Basic Authentication** is enabled (we’ll use this later).
5. Scroll down and check **Allow remote setup** and **Allow remote API calls**.
6. Save changes.
Now your camera is ready to respond to HTTP requests.
### Step 2: Find Your Stream URL
Every Axis camera exposes multiple video streams at different qualities. The most common ones are:
– **Main stream**: High quality, used for recording
– **Substream**: Lower resolution, ideal for live viewing
To find your stream URLs:
1. In the camera’s web UI, go to **Configuration > Live View > Stream Profiles**.
2. Note the **Profile Token** for “Main” and “Substream.”
3. Use this format to build your VAPIX URL:
“`
http://[username]:[password]@[camera-ip]/axis-cgi/mjpg/video.cgi?resolution=640×480&reqMode=stream&profile=[token]
“`
Example:
“`text
http://admin:mypassword@192.168.1.100/axis-cgi/mjpg/video.cgi?resolution=640×480&reqMode=stream&profile=1
“`
This returns a **Motion JPEG (M-JPEG)** stream—a series of JPEG images sent one after another. It’s old-school but works everywhere.
> 💡 Tip: Replace `640×480` with `1920×1080` if your camera supports it—just be mindful of bandwidth!
### Step 3: Embed M-JPEG in HTML
Browsers can display M-JPEG natively using the `` tag with `src` pointing to the stream:
“`html
“`
✅ Pros:
– Works in all browsers
– No plugins needed
– Simple to implement
❌ Cons:
– High CPU usage (each frame reloads)
– Not interactive (no audio, PTZ, or recording controls)
– Poor performance on slow connections
For basic monitoring, this is perfect. For dashboards, consider upgrading.
### Step 4: Add Controls (Optional)
Want pan-tilt-zoom (PTZ) buttons? Add them like this:
“`html
“`
> ⚠️ Warning: Never expose camera passwords in public websites! Use server-side scripts or environment variables in production.
—
## Method 2: Using ONVIF Protocol
If your Axis camera supports **ONVIF** (most do), you can treat it like any other ONVIF-compliant device. This opens doors to third-party tools and libraries.
### Step 1: Confirm ONVIF Support
Log into your Axis camera and go to **System Options > Network Services > ONVIF**. Make sure it’s enabled.
### Step 2: Get RTSP Stream via ONVIF
ONVIF uses **RTSP** (Real-Time Streaming Protocol) to deliver video. Most Axis cameras expose RTSP URLs like:
“`
rtsp://[username]:[password]@[camera-ip]/onvif1
“`
You can discover this automatically using ONVIF Device Manager tools—but for web integration, you’ll need to convert RTSP to something browsers understand.
### Step 3: Convert RTSP to HLS or WebM
Browsers can’t play RTSP directly. You must use a media server like:
– **FFmpeg + Nginx-RTMP**
– **Wowza Streaming Engine**
– **Node-Media-Server**
– **Unreal Media Server**
Here’s a quick FFmpeg command to convert RTSP to HLS:
“`bash
ffmpeg -i rtsp://admin:pass@192.168.1.100/onvif1 \
-c:v libx264 -preset ultrafast -tune zerolatency \
-f hls -hls_time 2 -hls_list_size 3 \
/var/www/html/camera/stream.m3u8
“`
Then serve the `.m3u8` playlist via HTTPS and embed with:
“`html
“`
✅ Pros:
– Smooth playback
– Supports seeking, fullscreen, adaptive bitrate
– Better UX than M-JPEG
❌ Cons:
– Requires extra server setup
– More complex for beginners
—
## Method 3: Using WebRTC (Advanced)
For low-latency, two-way communication (e.g., intercom systems), **WebRTC** is ideal—but it’s tricky with Axis cameras.
Most Axis models don’t support WebRTC natively. However, you can bridge it using:
– **Janus Gateway**
– **Mediasoup**
– **Kurento**
These act as intermediaries that convert Axis’ M-JPEG or RTSP into WebRTC streams. The setup involves signaling servers, STUN/TURN, and custom JavaScript.
Unless you’re building a pro AV system, skip this unless you have experience with WebRTC.
—
## Securing Your Embedded Camera Feed
Never hardcode passwords in HTML! Anyone who views your page can see them.
### Best Practices:
– **Use HTTPS:** Encrypt traffic between browser and camera.
– **Create limited user accounts:** Assign read-only roles instead of admin.
– **Use reverse proxy:** Route camera requests through your web server with authentication.
– **Enable CORS carefully:** Only allow trusted domains.
– **Rotate credentials regularly.**
Example secure proxy setup (Nginx):
“`nginx
location /axis-cam/ {
proxy_pass http://192.168.1.100/;
auth_basic “Restricted”;
auth_basic_user_file /etc/nginx/.htpasswd;
}
“`
Now your HTML becomes:
“`html
“`
No passwords exposed!
—
## Troubleshooting Common Issues
| Problem | Solution |
|——–|———-|
| Black screen | Check IP address, username/password, firewall rules |
| Slow refresh | Lower resolution or switch to substream |
| Audio not working | Axis cameras rarely support audio in M-JPEG; use RTSP+HLS instead |
| CORS errors | Serve page via HTTPS; configure camera CORS headers |
| Mobile doesn’t load | M-JPEG often fails on iOS; use HLS or WebM fallback |
> 🔍 Pro tip: Test your stream first with VLC (`File > Open Network Stream`) before coding.
—
## Conclusion
Embedding an Axis IP camera video on a webpage is totally doable—and there are several paths depending on your needs. For simplicity, **M-JPEG via VAPIX** is your best bet. For richer experiences, **RTSP-to-HLS conversion** gives smooth playback across devices.
Remember: security comes first. Never expose admin credentials publicly, and always prefer HTTPS. With these techniques, you’ll turn your Axis camera into a powerful part of your digital presence—whether for business, safety, or peace of mind.
Ready to try it? Grab your camera’s IP address, enable VAPIX, and paste that `` tag. You’ll see your world live on the web!
—
Quick Answers to Common Questions
Tip/Question?
Answer: Yes, but only if your Axis camera supports ONVIF and you convert the RTSP stream to HLS or WebM using a media server like FFmpeg or Wowza. Browsers cannot play raw RTSP.
Tip/Question?
Answer: Use the main stream for recording (high quality) and the substream for live viewing (low latency). Configure both in Setup > Configuration > Live View > Stream Profiles.
Tip/Question?
Answer: Yes, but avoid hardcoding passwords in HTML. Instead, use server-side authentication or proxy the request through your web server with secure credentials stored safely.
Tip/Question?
Answer: On iOS Safari, M-JPEG often fails due to lack of native support. Use HLS (.m3u8) or WebRTC for reliable mobile playback.
Tip/Question?
Answer: Go to System Options > Network Services > ONVIF in your Axis camera’s web UI. Enable ONVIF and note the supported profiles. Then use ONVIF Device Manager or code to discover RTSP endpoints.