Embed IP camera in web browser [closed]

Asked 21/10, 2017 at 0:56 Answered 9/8, 2019 at 6:30

I'm currently working on a smart home project, which conects sensors and that stuff. The main server runs on a Raspberry Pi, and was designed using Node JS. On the local network, you can access the system web page and see logs, users and manage the sensors.

I would also like to add a camera streaming. I have an IP camera, and I would like to connect it to the same network, and be able to see it live on a web page. I don't mind having some delay or latency, and I don't need to access the service outside of my home network.

I searched a little, but I could not find any easy solution. I read about RTSP and RTMP protocols, and that they may be helpful in these cases. I alo read that there are some plugins available, like VLC and Quick Time, but I would prefer a solution that does not require them. Apparently, HTML5 supports that, but I wasnt able to move forward on that. Browser support should not be an issue, as I pretend to use only Google Chrome, and the last version of it. So if there are any plugins that are easy to integrate and compatible with Chrome, that should be fine!

I also found some services like these:

They appear to offer some free services, but I'm not sure if this is the best solution.

So, could anyone help with this situation? How can I easily stream video from an IP camera to a Web Browser in my local network (even with latency or lag)?

Thanks, Igor!

Rikkiriksdag answered 21/10, 2017 at 0:56 Comment(0)

I solved the issue. If anyone has a problem similar to this, I hope this might help!

To achieve this like I was trying, depends a lot on the camera you are using. I was using a rg-ip01 camera. Some cameras will use different protocols and technologies. So I installed the camera and accessed its IP address. I inspected the web page (on Chrome) and started looking for some clues. Some views recquired ActiveX or Internet Explorer, but the mobile view did not, and its HTML was like that:

<img name="main" id="main" border="0" width="640" height="480" src="http://192.168.1.109:8080/videostream.cgi?loginuse=admin&amp;loginpas=">

I inserted it in my HTML and it worked fine on Chrome! Change the IP to your camera's IP and check if there isn't any password defined (if so, add it too the field in the link, and also, check the user!).

I believe this may vary from camera to camera, but apprerently a lot of them use the same software, so maybe it works!

Thanks, Igor!

Rikkiriksdag answered 29/10, 2017 at 23:18 Comment(1)

Does it work without RTSP? – Honky 20/1, 2022 at 14:53

I have used Node js node RTSP Stream from an RTSP URL.

Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp://username:password@IP Address/h265/ch1/main/av_stream',
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
  '-stats': '', // an option with no neccessary value uses a blank string
  '-r': 30 // options with required values specify the value after the key
}
})

https://www.npmjs.com/package/node-rtsp-stream

And also install FFmpeg in the system by typing

sudo apt-get install ffmpeg

The above code is on the backend and also in the front end or the view part we type a simple index.html file

<!DOCTYPE html>
<html>
<head>
 <title>JSMpeg Stream Client</title>
 <style type="text/css">
    html, body {
        background-color: #111;
        text-align: center;
    }
  </style>

 </head>
 <body>
 <canvas id="video-canvas"></canvas>
 <script type="text/javascript" src="jsmpeg.min.js"></script>
 <script type="text/javascript">
 var canvas = document.getElementById('video-canvas');
 console.log(document.location.hostname);
    var url = 'ws://localhost:9999/';
    var player = new JSMpeg.Player(url, {canvas: canvas});
</script>
</body>
</html>

Then the file is loaded the browser we can get the live streamming

Civilian answered 9/8, 2019 at 6:30 Comment(2)

And it can easily implement in react JS also. – Civilian 9/8, 2019 at 6:32

possible to use without rstp? – Rattlebrained 28/4, 2021 at 9:0

I have published project on Github that help you to stream ip/network camera on to web browser real time without plugin require, which I contributed to open source project under MIT License that might be matched to your need, if you need to try check this out:

Streaming IP/Network Camera on web browser using NodeJS

There is no full package of framework yet, but it is a kickstart that might give you a way to proceed further.
As a student, I hope this helpful and please contribute to this project.

Sclerometer answered 7/1, 2019 at 12:49 Comment(0)

Almost every camera support MJPEG stream that can be displayed on the web easily using an IMG tag. However MJPEG stream requires really high bandwidth (e.g. 20-30mbps for megapixel resolution). If bandwidth consumption counts you need H264/H265 video streaming.

Problem is that IP cameras use RTSP protocol for H264/H265 streaming. Unfortunately this is not web compatible. This means that you need to convert/transcode this stream in order to be able to play on the web. What's more if you would like to publish the video on the Internet, then you need bandwidth for every single viewers.

Fortunately, there are some cloud based providers like ipcamlive.com which do this job for you. All you need to do is to register your camera and then copy+paste the snippet to your web page:

<iframe src="http://ipcamlive.com/player/player.php?alias=mycameraalias" width="1280px" height="960px"/>

Ultranationalism answered 26/3, 2019 at 9:55 Comment(0)

Where is IP camera stream to? Seem I not found Streaming server.

You need RTMP Server, but some IP camera build-in RTMP server.
ipcamlive is a streaming service. but you need bandwidth for sending.
You would't install any plugin, but RTMP need plugin, i.e. flash, vlc. You need to convert to HTTP protocols. for example HLS, Mpeg-DASH
you can use nginx-rtmp module to convert them.

Daggett answered 22/10, 2017 at 23:20 Comment(1)

The camera should stream to a web browser. How can I setup this server and stream the image in the browser ? – Rikkiriksdag 23/10, 2017 at 21:15

Recommended topics

Hot tags