Page 1 of 1

Linux Firefox HTML page for rtsp stream using VLC plugin

PostPosted: Sun Apr 27, 2014 5:48 pm
by gatomalo
I have a FI9831W camera (HD, IR, PT - not Z).

I needed an interface with three requirements:
1- Linux compatible
2- With audio (camera -> viewer)
3- With PTZ (presets, etc.)

After a nice time spent browsing Google results I realized that I had hit a catch-33 :-)
1- As Foscam plugins are not Linux compatible, I couldn't use their "npipcam x" plugin
2- With browser image push interfaces (jpg snapshots, mjpg, etc.) I didn't have sound
3- And RTSP streaming through standard players gave me audio and video but no PTZ (e.g. VLC, Totem, FFmpeg, etc.)

So I decided to create a simple HTML interface that fulfilled all three requirements with the help of browser embedded multimedia player and an RTSP stream from the camera. Then I thought that *maybe* someone else could find this useful.

Disclaimer: I did this for myself. If I ever come back to the forum and I remember my login password, I'll try to help with any questions (if any), but do not expect Linux expertise, camera specific adaptations, plugin troubleshooting, and so on, as I'm not a Linux or IP cameras expert.

You get:
-Provided you have a VLC compatible plugin, a HTML Linux Firefox compatible page that displays up, down, left and right controls, plus some presets and cruise buttons, and an embedded player with your video stream with audio from cam.

You need:
1- Linux (Ubuntu 12.04 here)
2- Firefox (v. 28 here)
3- A VLC Firefox plugin ("mplayerplug-in is now gecko-mediaplayer 1.0.4" here)
4- Attached to this post html file "linuxFoscamViewerv01.html.tar" (untar it: tar -xvf)
5- Some html/javascript reading skills

You must:
1- In Linux: if you don't have it already, install Gecko plugin for Mozilla
2- In Firefox: disable all vlc plugins except the plugin named "mplayerplug-in is now gecko-mediaplayer 1.0.4" (feel free to experiment with different VLC compatible plugins)
3- In Linux: copy the attached file to your hard drive
3.1- In Linux: untar the file: tar -xvf fileName.tar
4- In Linux: edit the downloaded file with a text editor (gedit, vi) and change the variables between "// Start" and "// End" sections to match your setup
5- In Firefox: open your edited file ("File / Open File "), then wait a couple of seconds for the buffer to fill

You should:
1- In Firefox, to debug errors: open "Tools / Web developer / web console"
2- In Firefox: everytime you edit the code, reload the page with [Shift] + [F5]

You can: If you are willing to change the code...
1- Play with different plugins, changing the function "myInit" and enabling and disabling plugins in Firefox (in my setup, VLC freezed, Totem gave a "Python text/html decoder not installed" error, but Gecko worked just fine. Go to "Tools / Add-ons / Plugins", disable all "VLC" plugins with "Never activate", then enable just one of them)
2- Add different buttons with different commands (e.g. enable/disable IR, more/less preset points, depending on plugin change volume, play or stop, etc.
3- Change player size
4- Adapt this interface for different cameras (very easy, read the code)
5- Post your improvements to this thread

You shouldn't:
- Trust code posted by a stranger in a forum, that asks for IP addresses, user names and passwords, ever. At least, open the file in a text editor, read the code and try to understand how it works, and then, use fake data.

Good luck!

PS: illogical as it sounds, you can have many plugins installed simultaneously for the same media type, but only one will "take control" of the "<embed>" object. This means that you can write code using methods and properties for a plugin, but a different one can be "in charge", making debugging a nightmare. So, disable all VLC plugins except one, then write JS code for this plugin.

PS2: everything should work even if you have different versions of browser, plugin, Linux and cameras than me, as long as the plugin's JS methods and camera's CGI URLs are the same (obviously). Minor changes should be needed to make the page compatible.

PS3: pardon my bugs and me French