Can a stream of a Bosch camera be integrated into the end-user web page via http(s)?

[#1]

Question

Can a stream of a Bosch camera be integrated into the end-user web page via http(s)?

Answer

Yes! You can use stream from our Bosch cameras to be displayed in a web page. Bosch IP cameras have a web server embedded and what you see when connecting to a camera with a web browser is a web page.

There are the following ways of providing images coming from our cameras on the web pages:

1. JPEG snapshots. This is the easiest solution, what you need is just a very basic HTML code and Java script responsible for page refreshing. However, it is not recommend to use it for this purpose, as you leave the trace of a source camera in the page code. This firstly exposes a camera for potential malicious attacks like DDoS, secondly a camera can get simply overloaded with incoming requests, as internal web server in a camera has very limited capacity in this field, especially comparing to professional WWW servers. Also, keep in mind that what comes out in this solution is not a live streaming, it is more like a web camera with an image refreshed every few seconds.

 2. FTP JPEG posting. A camera keeps sending JPEG images to a folder on FTP server (potentially the same server which hosts WWW). Advantage of this solution is that camera IP address remains covered, nobody sees a camera as a source of JPEG images since the actual web server refers to own folder as imaging source. This keeps camera secured, plus allows handling huge traffic, as professional web servers are much better in doing so. Also, all security and continuity is on the web server side, not the camera, making the solution more robust. Application is easy and requires a HTML code and a Java script to refresh the image, but gives effect readable for any web browser with no need to download any special decoder etc. Disadvantage is relatively low refresh rate (max 1 image per second).

 3. Mpeg4 or RTSP stream directly from a camera. It is possible to intercept a live video stream from a camera. It is just necessary to place an object capable of decoding our video in web page code. This provides live, high framerate video. But brings some disadvantages too, as source of video streaming is included in the HTML page code and with that camera becomes exposed like with JPEG snapshots solution. Also, keep in mind that a camera displayed over the Internet needs to work in unicast or multi-unicast mode, since multicast with IGMPv3 is not widely supported over the public Internet. Last but not least, some decoding components like our ActiveX will become necessary and nowadays people don’t like plug-ins installed when web browsing.

 4. Video streaming over streaming server. In this scenario camera remains hidden and therefore all limitations applicable to a camera internal web server do not apply. What you need is a dedicated streaming server, which would intercept live video directly from a camera and publish it further for all potential web page viewers. Again security and continuity topics are handled on the web server and streaming media, pretty much like in solution # 2. You can use VLAN software to both intercept RTPS streaming from Bosch camera and then stream it further for the purposes of actual web pages, but other streaming software may be applicable too.  

🛈 The safest and simultaneously easiest in implementation is FTP JPEG posting. Unless no special requirements are present.

MP4 stream. Given that cameras deliver an MP4 stream, it can easily be integrated using the HTML5 video tag. This will pull a unicast stream. In this case, your browser needs to support the video tag. If it does, you should be able to put the code snippet into a page and get video.

💡 HTML5 video tag: If you get a "bad request 400" message", you can deactivate the "HTTP Referrer Check" feature

If a camera is password-protected, the user has to authenticate itself. If there is no possibility to enter username and password, client authentication with certificates might solve this. If multiple users need to access the same video, an application with web pages is really questionable. 

See the code example below, which gets the second stream from a camera.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Video</title>

</head>

<body>

<div id="videocontainer">

<video width="640" height="480" controls autoplay>

<source src="http://IP_address/video.mp4?line=1&inst=2" type="video/mp4">

Your browser does not support the video tag.

</video>

</div>

</body>

</html>