{"id":19200,"date":"2020-09-04T12:46:15","date_gmt":"2020-09-04T17:46:15","guid":{"rendered":"https:\/\/learncctv.com\/?p=19200"},"modified":"2020-09-05T07:31:25","modified_gmt":"2020-09-05T12:31:25","slug":"ip-camera-stream-to-website","status":"publish","type":"post","link":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/","title":{"rendered":"How to stream an IP Camera to a website via WebRTC (Free software)"},"content":{"rendered":"

In this article, I show how to stream an IP camera to a website via WebRTC.<\/p>\n

You can use <\/span>free software<\/span><\/a> 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.<\/span><\/p>\n

\"IP<\/span><\/p>\n

I’ve tested this type of technology by using a Samsung IP camera  and the Unreal Media Server<\/a> software to stream video to my blog and other websites.<\/p>\n

Using WebRTC technology with IP cameras <\/h2>\n

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.<\/p>\n

Fortunately, the WebRTC technology minimizes this problem using standard<\/span> real-time communication<\/span><\/strong> capabilities to stream video, voice, and data.<\/span><\/p>\n

You just need to use your browser to play the video from your IP camera. <\/p>\n

From RTSP to WebRTC<\/h2>\n

Professional IP cameras use the <\/span>RTSP protocol <\/span><\/a>to stream video to different platforms. You can use a media server to convert the RTSP to WebRTC.<\/span><\/p>\n

\"IP<\/span><\/p>\n

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.<\/p>\n

There’s an extra step to send the video to the Internet, but that’s not complicated.<\/p>\n

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.<\/p>\n

\"IP<\/span><\/p>\n

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…<\/p>\n

WebRTC free software <\/h2>\n

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.<\/p>\n

1. Download free Unreal Media Server<\/p>\n

\"Download<\/a><\/span><\/p>\n

2. Install the software<\/p>\n

\"Unteal<\/span>\"Unteal<\/span>\"Unteal<\/span>\"Unteal<\/span>\"Unteal<\/span>\"Unteal<\/span><\/p>\n

3. Create a rebroadcast. Click the “Rebroacast live RTM\/RTSP\/WebRTC\/MPEG-TS\/HSL.MMS stream<\/em>“<\/p>\n

\"Unteal<\/span>\"Unteal<\/span><\/p>\n

4. Enter the IP RTSP URL, Username and Password and specify an alias (name) for this broadcast, like “Samsung<\/em>” and then Click the “OK” button.<\/p>\n

\"Unteal<\/span><\/p>\n

5. Copy the code to play the video. Open the Unreal Media <\/span>WebRTC demo player webpage<\/span><\/a>. 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 “<\/span>104.194.11.25<\/span><\/em>” with <\/span>your computer IP address<\/span><\/strong>, “<\/span>livedemocam<\/span><\/em>” with the a<\/span>lias you used <\/span><\/strong>(i.e., “<\/span>Samsung<\/span><\/em>“) and port 80 with <\/span>5119<\/span><\/strong>. Save that HTML page. Open that webpage in a web browser. You should see the live video playing.<\/span><\/p>\n

\"Unteal<\/span><\/p>\n

( click to enlarge )<\/p>\n

And it’s done.<\/p>\n

Save this file with the <\/span>.html extension<\/span><\/strong> so you can open it in a web browser.<\/span><\/p>\n

Now you need to test it out and then move to the next step to see on a website.<\/p>\n

Test the WebRTC stream on your network<\/h2>\n

Now, you are ready to test the stream of your IP camera via WebRTC.<\/p>\n

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.<\/p>\n

\"Unteal<\/span><\/p>\n

The web browser in the laptop requests a connection to the media server on the port 5119 <\/strong>for the camera with the alias “Samsung<\/em><\/strong>“.<\/p>\n

 The picture below shows the image I got on my web browser. Pretty cool, huh?<\/p>\n

\"WebRTC<\/span><\/p>\n

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.<\/p>\n

Test the WebRTC stream via the Internet<\/h2>\n

OK, now it’s time to stream the video from the IP camera to the Internet.<\/p>\n

This process can be done with 3 simple steps.<\/p>\n

    \n
  1. Edit the .html file to use the external IP;<\/li>\n
  2. Create new rules on the Windows firewall;<\/li>\n
  3. Configure your router for port forwarding.<\/li>\n<\/ol>\n

    Don’t worry; this is not rocket science.<\/p>\n

    Edit the .html file<\/h3>\n

    Just find out what’s the router IP is and use it on the .html file.<\/p>\n

    \"Unteal<\/span><\/p>\n

    You know how to find the router external IP address, right?<\/p>\n

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

    Open the ports on the Windows firewall<\/h3>\n

    Launch the Windows Firewall and create new rules for ports 5119 and 5135.<\/p>\n

    See the picture below.<\/p>\n

    \"Unteal<\/span><\/p>\n

    ( click to enlarge )<\/p>\n

    Set up port forwarding in the router<\/h3>\n

    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.<\/p>\n

    \"Router<\/span><\/p>\n

    ( click to enlarge )<\/p>\n

    And it’s done.<\/p>\n

    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.<\/p>\n

    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. <\/p>\n

    You should see the live video from your camera via the Internet.<\/p>\n

    \"WebRTC<\/span><\/p>\n

    Now, let’s see how to stream an IP camera to a website.<\/p>\n

    How to stream RTSP IP Camera to a website via WebRTC or Websockets<\/h2>\n

    And now for the last step. You can have the .html file on your website.<\/p>\n

    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.<\/p>\n

    \"Learn<\/span><\/p>\n

    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.<\/p>\n

    Conclusion<\/h2>\n

    Now you know how to stream an IP camera to a website via WebRTC.<\/p>\n

    In this article, I show basic examples of using this technology, but there’s much more “under the hood”.<\/p>\n

    I recommend you to download the media server and play with all the features.<\/p>\n

    I hope this article can help you; please share it with your friends.<\/p>\n","protected":false},"excerpt":{"rendered":"

    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. […]<\/p>\n","protected":false},"author":1,"featured_media":19313,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-19200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ip-cameras"],"yoast_head":"\nHow to stream an IP Camera to a website via WebRTC (Free software) - Learn CCTV.com<\/title>\n<meta name=\"description\" content=\"In this article, I show how to stream an IP camera to a website via WebRTC. You can use free software to convert RTSP to WebRTC,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to stream an IP Camera to a website via WebRTC (Free software) - Learn CCTV.com\" \/>\n<meta property=\"og:description\" content=\"In this article, I show how to stream an IP camera to a website via WebRTC. You can use free software to convert RTSP to WebRTC,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn CCTV.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/learncctvnow\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/learncctvnow\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-04T17:46:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-05T12:31:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/learncctv.com\/wp-content\/uploads\/2020\/09\/Learn-CCTV-Blog-with-live-camera.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"988\" \/>\n\t<meta property=\"og:image:height\" content=\"936\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Claudemir Martins\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Claudemir Martins\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/\",\"url\":\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/\",\"name\":\"How to stream an IP Camera to a website via WebRTC (Free software) - Learn CCTV.com\",\"isPartOf\":{\"@id\":\"https:\/\/learncctv.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learncctv.com\/wp-content\/uploads\/2020\/09\/Learn-CCTV-Blog-with-live-camera.jpg\",\"datePublished\":\"2020-09-04T17:46:15+00:00\",\"dateModified\":\"2020-09-05T12:31:25+00:00\",\"author\":{\"@id\":\"https:\/\/learncctv.com\/#\/schema\/person\/2f21941fc3f450f670146e9ed189e38a\"},\"description\":\"In this article, I show how to stream an IP camera to a website via WebRTC. You can use free software to convert RTSP to WebRTC,\",\"breadcrumb\":{\"@id\":\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#primaryimage\",\"url\":\"https:\/\/learncctv.com\/wp-content\/uploads\/2020\/09\/Learn-CCTV-Blog-with-live-camera.jpg\",\"contentUrl\":\"https:\/\/learncctv.com\/wp-content\/uploads\/2020\/09\/Learn-CCTV-Blog-with-live-camera.jpg\",\"width\":988,\"height\":936,\"caption\":\"Learn CCTV Blog with live camera\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learncctv.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to stream an IP Camera to a website via WebRTC (Free software)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learncctv.com\/#website\",\"url\":\"https:\/\/learncctv.com\/\",\"name\":\"Learn CCTV.com\",\"description\":\"The place where you can learn CCTV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learncctv.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/learncctv.com\/#\/schema\/person\/2f21941fc3f450f670146e9ed189e38a\",\"name\":\"Claudemir Martins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learncctv.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/35af46e18600905d33ae99019d429631?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/35af46e18600905d33ae99019d429631?s=96&d=mm&r=g\",\"caption\":\"Claudemir Martins\"},\"description\":\"Claudemir Martins is a former Samsung Engineer with 19+ years of experience in the surveillance industry. He has been traveling around 17 different countries to teach people how to design, and install CCTV systems. He is currently working for Axis Communications as a Technical Services Engineer and living in the United States with his family.\",\"sameAs\":[\"https:\/\/learncctv.com\",\"https:\/\/www.facebook.com\/learncctvnow\"],\"url\":\"https:\/\/learncctv.com\/author\/claudemir-martinsgmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to stream an IP Camera to a website via WebRTC (Free software) - Learn CCTV.com","description":"In this article, I show how to stream an IP camera to a website via WebRTC. You can use free software to convert RTSP to WebRTC,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/","og_locale":"en_US","og_type":"article","og_title":"How to stream an IP Camera to a website via WebRTC (Free software) - Learn CCTV.com","og_description":"In this article, I show how to stream an IP camera to a website via WebRTC. You can use free software to convert RTSP to WebRTC,","og_url":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/","og_site_name":"Learn CCTV.com","article_publisher":"https:\/\/www.facebook.com\/learncctvnow","article_author":"https:\/\/www.facebook.com\/learncctvnow","article_published_time":"2020-09-04T17:46:15+00:00","article_modified_time":"2020-09-05T12:31:25+00:00","og_image":[{"width":988,"height":936,"url":"https:\/\/learncctv.com\/wp-content\/uploads\/2020\/09\/Learn-CCTV-Blog-with-live-camera.jpg","type":"image\/jpeg"}],"author":"Claudemir Martins","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Claudemir Martins","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/","url":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/","name":"How to stream an IP Camera to a website via WebRTC (Free software) - Learn CCTV.com","isPartOf":{"@id":"https:\/\/learncctv.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#primaryimage"},"image":{"@id":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#primaryimage"},"thumbnailUrl":"https:\/\/learncctv.com\/wp-content\/uploads\/2020\/09\/Learn-CCTV-Blog-with-live-camera.jpg","datePublished":"2020-09-04T17:46:15+00:00","dateModified":"2020-09-05T12:31:25+00:00","author":{"@id":"https:\/\/learncctv.com\/#\/schema\/person\/2f21941fc3f450f670146e9ed189e38a"},"description":"In this article, I show how to stream an IP camera to a website via WebRTC. You can use free software to convert RTSP to WebRTC,","breadcrumb":{"@id":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learncctv.com\/ip-camera-stream-to-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#primaryimage","url":"https:\/\/learncctv.com\/wp-content\/uploads\/2020\/09\/Learn-CCTV-Blog-with-live-camera.jpg","contentUrl":"https:\/\/learncctv.com\/wp-content\/uploads\/2020\/09\/Learn-CCTV-Blog-with-live-camera.jpg","width":988,"height":936,"caption":"Learn CCTV Blog with live camera"},{"@type":"BreadcrumbList","@id":"https:\/\/learncctv.com\/ip-camera-stream-to-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learncctv.com\/"},{"@type":"ListItem","position":2,"name":"How to stream an IP Camera to a website via WebRTC (Free software)"}]},{"@type":"WebSite","@id":"https:\/\/learncctv.com\/#website","url":"https:\/\/learncctv.com\/","name":"Learn CCTV.com","description":"The place where you can learn CCTV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learncctv.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/learncctv.com\/#\/schema\/person\/2f21941fc3f450f670146e9ed189e38a","name":"Claudemir Martins","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learncctv.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/35af46e18600905d33ae99019d429631?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/35af46e18600905d33ae99019d429631?s=96&d=mm&r=g","caption":"Claudemir Martins"},"description":"Claudemir Martins is a former Samsung Engineer with 19+ years of experience in the surveillance industry. He has been traveling around 17 different countries to teach people how to design, and install CCTV systems. He is currently working for Axis Communications as a Technical Services Engineer and living in the United States with his family.","sameAs":["https:\/\/learncctv.com","https:\/\/www.facebook.com\/learncctvnow"],"url":"https:\/\/learncctv.com\/author\/claudemir-martinsgmail-com\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/posts\/19200"}],"collection":[{"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/comments?post=19200"}],"version-history":[{"count":97,"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/posts\/19200\/revisions"}],"predecessor-version":[{"id":19332,"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/posts\/19200\/revisions\/19332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/media\/19313"}],"wp:attachment":[{"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/media?parent=19200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/categories?post=19200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncctv.com\/wp-json\/wp\/v2\/tags?post=19200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}