Capture IP Camera Stream and Publish on my Website

Question

I am using IP Cam (an app for android phones) to stream live video. It basically functions as a basic IP camera. It gives me a URL where the feed is. It looks like this http://192.168.2.32:8080/ when I'm connected to my WiFi network. The video stream is at http://192.168.2.32:8080/videofeed.

I want to capture the video feed of the camera which is at http://192.168.2.32:8080/videofeed and embed it in an HTML5 player (the one I plan to use is Video JS) or a Flash player if the HTML5 doesn't work (prefer HTML5 though). The HTML5 player is asking me for a source file (such as .mp4, webm, mov, etc) but at http://192.168.2.32:8080/videofeed there is no source file. It's just HTML stream.

My question is how to I embed that video stream into my HTML5 player and post it on my website.

Answer 1

From what I could see, the streaming is already made by the app to a webpage and this page has the video for you to see. So you want to stream something that's already streaming.

You could try to signup for a dynamic dns like www.no-ip.com to get a url for your network, change your router to accept incoming connection on port 8080 and then use an iframe on your website with the dynamic dns url.

I used to stream a lot of live concerts to websites, but I had a camera connected to a computer and using Adobe Flash Media Streaming (free) connected to a server running Wowza streaming.

Answer 2

You need to get the data that camera is capturing decode it to some common format. RGB or YUV2 or whatever. Encode it to Vp8/webm or thora/ogg . h264/Mp4 wont do it as it needs a special header in the mp4 file called mdat(unless it is fragmented mp4).

Client video tag makes the request to your phones ip/where you handling the http GET for that app hold that http connection and start streaming to it. This is sort of like long polling.

Answer 3

Most IP cameras have a way to get the raw stream of video. Using RTSP or RTMP

I suggest you get the steeam URI for the «camera», which would be something like rtsp://<camera-ip>:<some-port> or rtmp://<camera-ip>:<some-port>. That is a common feature of IP cameras, even those emulated on a phone, so probably it is mentioned on the docs or can be enable/set on the app configuration.

If there is no documentation, you can do some research by using Chrome to access the feed on the webpage and open the developer tools to see the actual code for the page, the URI may be visible on the embedded player they provide.

Once you get it, open that stream with VLC and see the properties (encoding, framerate, size, etc) and with that you can choose a compatible embedded player for your site.

Hope it helps!

///Pablo