How to stream an IP Camera to a website via WebRTC (Free software)

In this article, I show how to stream an IP camera to a website via WebRTC.

You can use free software to convert your computer into a media server that pulls a video stream from your IP camera and changes it to WebRTC, making the video playable on most Web Browsers such as Google Chrome and others.

IP camera to WebSite via WebRTC

I've tested this type of technology by using a Samsung IP camera  and the Unreal Media Server software to stream video to my blog and other websites.

Using WebRTC technology with IP cameras 

Sometimes watch live video from your IP camera is a little bit complicated because it's necessary to use a compatible web browser and install plugins or install compatible software provided by the camera manufacturer.

Fortunately, the WebRTC technology minimizes this problem using standard real-time communication capabilities to stream video, voice, and data.

You just need to use your browser to play the video from your IP camera. 

From RTSP to WebRTC

Professional IP cameras use the RTSP protocol to stream video to different platforms. You can use a media server to convert the RTSP to WebRTC.

IP camera to Media Server to WebRTC to WebBrowsers

You can use this type of setup to stream the video from your IP camera to a web browser on your local network or a remote website on the Internet.

There's an extra step to send the video to the Internet, but that's not complicated.

If you have the WebRTC media server working in your local network, the next step is to configure your router for port forwarding, which means the router must accept a request from the Internet to come into your local network.

IP camera RTSP to WebRTC to Website

And that's the flow. The IP camera sends video to the media server (free software), which converts from RTSP to WebRTC and sends the video stream to the Internet passing through the router. Don't worry; you will learn how to do that in while...

WebRTC free software 

It's time to see the step-by-step on how to use software to work with the WebRTC technology, and the best part is that you can do that without expending a dime.

1. Download free Unreal Media Server

Download button

2. Install the software

Unteal Media Server Installation 01
Unteal Media Server Installation 02
Unteal Media Server Installation 03
Unteal Media Server Installation 04
Unteal Media Server Installation 05
Unteal Media Server Installation 06

3. Create a rebroadcast. Click the "Rebroacast live RTM/RTSP/WebRTC/MPEG-TS/HSL.MMS stream"

Unteal Media Server New Live Broadcast
Unteal Media Server New Broadcast Rebroadcast

4. Enter the IP RTSP URL, Username and Password and specify an alias (name) for this broadcast, like "Samsung" and then Click the "OK" button.

Unteal Media Server New Broadcast Rebroadcast Samsung profile 2

5. Copy the code to play the video. Open the Unreal Media WebRTC demo player webpage. Click CTRL+S and save this webpage as HTML only. Open that HTML page in Notepad or other editor and navigate to line 44. Replace "104.194.11.25" with your computer IP address, "livedemocam" with the alias you used (i.e., "Samsung") and port 80 with 5119. Save that HTML page. Open that webpage in a web browser. You should see the live video playing.

Unteal Media Server HTML code

( click to enlarge )

And it's done.

Save this file with the .html extension so you can open it in a web browser.

Now you need to test it out and then move to the next step to see on a website.

Test the WebRTC stream on your network

Now, you are ready to test the stream of your IP camera via WebRTC.

The diagram below shows how it works. The media server is ready to stream video as soon as the laptop (client) runs the .html file created in the previous step.

Unteal Media Server Test WebRTC in the local network

The web browser in the laptop requests a connection to the media server on the port 5119 for the camera with the alias "Samsung".

 The picture below shows the image I got on my web browser. Pretty cool, huh?

WebRTC Video pulled from the Unteal Media Server

Now I know that's working locally, and the next step it to change the file to work with the router's external IP address. Let's see how to do that.

Test the WebRTC stream via the Internet

OK, now it's time to stream the video from the IP camera to the Internet.

This process can be done with 3 simple steps.

  1. Edit the .html file to use the external IP;
  2. Create new rules on the Windows firewall;
  3. Configure your router for port forwarding.

Don't worry; this is not rocket science.

Edit the .html file

Just find out what's the router IP is and use it on the .html file.

Unteal Media Server code for external access

You know how to find the router external IP address, right?

This information is available in the router, or you can use the IPChicken website to show what the IP you are using at a given time.

Open the ports on the Windows firewall

Launch the Windows Firewall and create new rules for ports 5119 and 5135.

See the picture below.

Unteal Media Server Windows Firewall

( click to enlarge )

Set up port forwarding in the router

Log in to your router and create rules to forward the traffic to the ports 5119 and 5135. The requests must be redirected to the Media Server's IP.

Router WebRTC Rules

( click to enlarge )

And it's done.

Depending on your router's model, the port forwarding menu should be in a different place, but the idea is to create the rules, as shown in the picture.

Now, get a second computer, a laptop or a mobile phone that is connected to the Internet and open the .html file in a web browser. 

You should see the live video from your camera via the Internet.

WebRTC Video pulled from the Unteal Media Server via the Internet

Now, let's see how to stream an IP camera to a website.

How to stream RTSP IP Camera to a website via WebRTC or Websockets

And now for the last step. You can have the .html file on your website.

Just upload the file you've created before to your site or blog and use the URL to load the video from your IP camera as shown in the picture below.

Learn CCTV Blog with live camera

You can place the HTML code on different parts of your website and tweak it to looks better, as I just did on my blog.

Conclusion

Now you know how to stream an IP camera to a website via WebRTC.

In this article, I show basic examples of using this technology, but there's much more "under the hood".

I recommend you to download the media server and play with all the features.

I hope this article can help you; please share it with your friends.

The Learn CCTV blog is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

error: Alert: Content is protected !!