Announcement

Collapse
No announcement yet.

Universal Camera Web Page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Universal Camera Web Page

    I've been scouring the web looking for some simple code to display a camera on a web page. Many years ago I had something setup; I cannot remember if the whole page refreshed or just the image, however, nothing I can find now seems to work.

    What I'd like to be able to do is using any camera as a source, streaming either RTSP or continuously reloading a jpg, create a web page that shows multiple and/or one-at-a-time camera feed. All the scripts I've found seem to not work.

    Right now, all of my cameras are hikvision and I use a hikvision NVR to manage them. I can also access each camera's RTSP, JPEG and MJPEG streams individually, and the JPEG/MJPEG are how I currently have them integrated into HSTouch. It's VERY slow, however. The activex that shown them in IE shows everything in real-time in HDTV quality, even when all 16 cameras are on the screen at once. How do we get that kind of performance on a non-activex containing web page.

    Ideally, I'd like to be able to just serve the pages off my HS machine, however, I can easily throw an RPi or PINE64 at the problem, if I need to serve pages with them or install a view only (non-recording, since my NVR already does that) camera program that will give me the feed I'm looking for.

    Any ideas?
    John
    Hardware: i5-6400T w/16GB RAM & SSD w/HS3Pro, Z-Net, Harmony Hub x2, Echo Dot x2, Ocelot
    Plugins: Z-wave, HSTouch, BLBackup, Harmony, GTS CPUXA, UltraMon3, Nest
    HSTouch: Multiple Android Devices; 5 x ToteVision MD-1001 10.1" Win 7 Tablets
    Devices: Cooper RF9501 x4, RF9517 x6, RF9534 x1, RF9540-N x7, RF9542 x1, RF9542-Z x2, RFHDSCG x1, RFWC5 x5; Intermatic HA02 x6; FortrezZ MIMOLite x3; Leviton VRPD3-1LW x4, VRR15-1LZ x6; Nest Tstat & 9x Protects; Dragon PD-100 x3, PA-100 x3

    #2
    Here I have had good luck with VLC. I do custom line commands and leave buttons on the left.

    You can size the screen / window anyway you want. It is local only.
    Last edited by Pete; February 15, 2017, 07:48 AM.
    - Pete

    Auto mator
    Homeseer 3 Pro - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e 64 bit Intel Haswell CPU 16Gb
    Homeseer Zee2 (Lite) - 3.0.0.548 (Linux) - Ubuntu 18.04/W7e - CherryTrail x5-Z8350 BeeLink 4Gb BT3 Pro
    HS4 Lite - Ubuntu 22.04 / Lenovo Tiny M900 / 32Gb Ram

    HS4 Pro - V4.1.18.1 - Ubuntu 22.04 / Lenova Tiny M900 / 32Gb Ram
    HSTouch on Intel tabletop tablets (Jogglers) - Asus AIO - Windows 11

    X10, UPB, Zigbee, ZWave and Wifi MQTT automation-Tasmota-Espurna. OmniPro 2, Russound zoned audio, Alexa, Cheaper RFID, W800 and Home Assistant

    Comment


      #3
      John, I do this now with my BlueIris server, i was never able to get any kind of performance through HSTouch handling the camera feeds. I have a small htm file for each camera and one for all cameras that allows selection by touch (I found them on a BlurIris forum) They get displayed in a text box inside HSTouch but never go through the HS3 server. I get 10 fps easily with the only catch that HSTouch wont let the connection die unless you clear the address from the text box "before" you leave the page or even kill HSTouch. I can put the files up for you but they are for BlueIris which I highly recommend.

      Another much better option if you happen to run Android clients is using TinyCam Pro, with it I can overlay H264 camera feeds on top of what ever is running on the tablet in a sizable movable window. I also fire those from HS3 via the Tasker plugin or with actual individual apps that i made for each camera so they can be run locally on each tablet as well, hands down the best solution you will find.

      John

      Comment


        #4
        Originally posted by lj502 View Post
        ...I do this now with my BlueIris server...
        I installed the Blue Iris demo on my old Dual Core HS machine and am testing it with 5 cameras - just for streaming as my NVR takes care of everything else. It's running 90-100%, steady, but it's serving the 5 cameras I'm testing very well. I still have 11 more to setup. At first, it was lagging like crazy until I swtiched it to stream from the mjpeg substream, now I'm getting a sold 10 fps, even with all 5 cameras up at once. Using the web pages here:

        https://ipcamtalk.com/threads/i-made...-view-page.93/

        I get a fast, clean, scalable interface that looks like it will work perfect in HSTouch.

        I'm going to see how many cameras I can add before my old PC can't keep up any longer, but I'll probably need another i5-6400 machine (lenovo m700 tiny is what my current HS machine is) to run Blue Iris effectively. Again, all my recording is on my NVR (16TB), so I won't need much storage on the BI PC.
        John
        Hardware: i5-6400T w/16GB RAM & SSD w/HS3Pro, Z-Net, Harmony Hub x2, Echo Dot x2, Ocelot
        Plugins: Z-wave, HSTouch, BLBackup, Harmony, GTS CPUXA, UltraMon3, Nest
        HSTouch: Multiple Android Devices; 5 x ToteVision MD-1001 10.1" Win 7 Tablets
        Devices: Cooper RF9501 x4, RF9517 x6, RF9534 x1, RF9540-N x7, RF9542 x1, RF9542-Z x2, RFHDSCG x1, RFWC5 x5; Intermatic HA02 x6; FortrezZ MIMOLite x3; Leviton VRPD3-1LW x4, VRR15-1LZ x6; Nest Tstat & 9x Protects; Dragon PD-100 x3, PA-100 x3

        Comment


          #5

          Comment


            #6
            Originally posted by lj502 View Post
            John, I do this now with my BlueIris server, i was never able to get any kind of performance through HSTouch handling the camera feeds. I have a small htm file for each camera and one for all cameras that allows selection by touch (I found them on a BlurIris forum) They get displayed in a text box inside HSTouch but never go through the HS3 server.
            John
            lj502, can you share what you have in the htm file for both the single cameras and all cams. This is actually exactly what I want to do, i.e. have a camera page in HSTouch with all cameras displayed. Then when clicking on one of the cameras it's being enlarged showing just that camera.

            Comment


              #7
              Here you go, this is for camera 2 obviously, you can set the number in the file by replacing the "Cam2" with your other cameras short name in BlueIris and the rename accordingly, you will also need to change the file extension from txt to htm and put it in your www folder on your Blue Iris server. You will need the above package from the first post, it contains the necessary support files to make it work.
              Let me know how it goes

              John
              Attached Files

              Comment


                #8
                lj502, thanks a lot for that file. This is more complex than I expected. I thought it might just be a one-liner with an img or video link embedded in the website. How do you display all cameras on a single page? Are you just adding each individual one as a separate element on that site?

                Comment


                  #9
                  Inside that package from first post is a few differant web pages that all serve video from your BlueIris server, one named (allcams.htm) will show all your cameras in a grid with nothing else, you just click a camera image and it goes full touch again and back to the grid view. It is really not difficult, the first post links to the files and you just unzip them on your BLueIris server to the www folder inside the BlueIris program files. Test it out by opening a browser on another device on the same network and entering (http://your local ip of blueiris server with the port#/allcams.htm) (http://192.168.1.xxxort#/allcams.htm) and you should have a stream.
                  John

                  Comment


                    #10
                    The link is in the fourth post, sorry
                    John

                    Comment


                      #11
                      Interesting, once I purchased a BI license, my CPU use went down and is now (with a client connected) in the 30s with BI minimized and in the 40-60s with it displayed on screen.

                      Regardless, I found a refurbished HP ProDesk 400 G2 on Woot with an i5-6500T, 8GB RAM and a 128 SSD for a great price and it supports QSV. I like the small form factor and low power usage and it will be a good compliment to my Lenovo Mini that runs HomeSeer. It's amazing how powerful these machines are and still sip electricity!

                      Again, I have a 16TB dedicated NVR for recording, so all BI is going to do is send my clients an easy to handle feed. I even noticed my Android IPCamViewer works better with the BI feed than it did interfacing directly with the cameras.

                      Another note: I had issues with allcams.htm displaying in HSTouch - just gave me a black screen for some reason. I ended up commenting out the parts of jpegpull2.htm that I did not need, so now it looks just like allcams.htm in a browser, and it works fine. Is it that allcams uses the activex viewer and jpegpull2 uses java?
                      John
                      Hardware: i5-6400T w/16GB RAM & SSD w/HS3Pro, Z-Net, Harmony Hub x2, Echo Dot x2, Ocelot
                      Plugins: Z-wave, HSTouch, BLBackup, Harmony, GTS CPUXA, UltraMon3, Nest
                      HSTouch: Multiple Android Devices; 5 x ToteVision MD-1001 10.1" Win 7 Tablets
                      Devices: Cooper RF9501 x4, RF9517 x6, RF9534 x1, RF9540-N x7, RF9542 x1, RF9542-Z x2, RFHDSCG x1, RFWC5 x5; Intermatic HA02 x6; FortrezZ MIMOLite x3; Leviton VRPD3-1LW x4, VRR15-1LZ x6; Nest Tstat & 9x Protects; Dragon PD-100 x3, PA-100 x3

                      Comment


                        #12
                        Ok, I got confused because John's post (#3) was before the post with the link to the files (#4). So post #4 is a follow up for what John was referring to in his post (#3). I now copied the files to the www directory of BlueIris. When I pull up http://localhost:[BlueIrisPort]/allCams.htm I can see all cameras. However, when I set the text property to that same value I just get a blank/black image.

                        jrfuda, what did you comment out to make this work? I am actually not even sure how jpegpull2.htm is related to allcams.html.

                        Now this brings up another question. Why is an html file required for showing an individual camera like John does? Looking at the allcams.js file, it seems all of this is already handled in that script, i.e. clicking on a video feed doesn't load a separate page but simply changes the source of the feed to the single camera, hence one always stays on the same HSTouch site. Obviously I am missing something.

                        Comment


                          #13
                          mulu, the attached zip has my modified version of jpegpull2.htm

                          I just commented out a few lines, and probably did a sloppy job of it as I know squat on coding.

                          Full credit for this page goes to bp2008 at ipcamtalk, since I'm reposting slightly edited code he created. I think I owe him a PayPal donation!

                          This (or allcams if it works for you) should be the only file you need to load.

                          All your cameras will display, click and camera, and that camera will fill the display. Click again and return to the view of all cameras.

                          If it's not working right in HSTouch, it's becuase your browser it out of date. On my Windows 7 tablets, HSTouch was working fine, but this page was not. Once I upgraded IE from 9 to 11, these pages worked fine. With IE 9 running, the page would display, but clicking on an individual camera image did nothing.

                          I also have BI set to not prompt for user/pass on LAN, which makes the page come right up. The only bad thing is it treats "LAN" as only the same subnet and I cannot see where to expand this to specific subnets, as when I VPN into my network, my VPN clients are on a different subnet (I have 3 subnets - main, VOIP and VPN).

                          Anyway, hope you can just drop the attachment into your BI WWW root and it works!

                          EDIT: I had a few issues with the top bar displaying again when motion was detected. I've deleted the modified jpegpull2 and now attached a file jpegpull3 which fixes this issue and now has the excess code deleted instead of commented out.
                          Attached Files
                          Last edited by jrfuda; February 25, 2017, 06:03 AM. Reason: changed attachment
                          John
                          Hardware: i5-6400T w/16GB RAM & SSD w/HS3Pro, Z-Net, Harmony Hub x2, Echo Dot x2, Ocelot
                          Plugins: Z-wave, HSTouch, BLBackup, Harmony, GTS CPUXA, UltraMon3, Nest
                          HSTouch: Multiple Android Devices; 5 x ToteVision MD-1001 10.1" Win 7 Tablets
                          Devices: Cooper RF9501 x4, RF9517 x6, RF9534 x1, RF9540-N x7, RF9542 x1, RF9542-Z x2, RFHDSCG x1, RFWC5 x5; Intermatic HA02 x6; FortrezZ MIMOLite x3; Leviton VRPD3-1LW x4, VRR15-1LZ x6; Nest Tstat & 9x Protects; Dragon PD-100 x3, PA-100 x3

                          Comment


                            #14
                            I think BlueIris disables direct to disk recording and a couple other things on the demo version.
                            I use the allcams but on some uses I just want a single camera (front door, back gate) displayed with no interaction.
                            I have been trying other methods on Android to display my cameras, TinyCam Pro is fast and stable but it also has widgets for camera displays that you can set the update interval so you are getting snapshots instead of full video. It also has a Tasker plugin that I can bring up floating windows of camera views on top of any app, I just set a time out in the Tasker task so the feed goes away after 20 seconds, If I want I just tap the camera window and the TinyCam app opens.
                            I have found that if you want full video on your HSTouch clients showing all the time you will be chasing your tail trying to get it right. The other thing about letting TinyCam handle the video is it pulls your video regardless of local connection or remote connection, which is tough inside HSTouch.
                            John

                            Comment


                              #15
                              Originally posted by lj502 View Post
                              ...the only catch that HSTouch wont let the connection die unless you clear the address from the text box "before" you leave the page or even kill HSTouch....John
                              Just now catching this comment you made earlier.

                              So, HSTouch continues to stream the BI page, even after you leave the page unless you clear it? Is that on Windows clients or Android?

                              So far I've not seen any performance hits if this is true for Windows clients, but I only have 1 full time client running at the moment, with the others part-time android or future full timers still on the test bench.

                              I assume I need to have my "home" button on my camera screen clear the text box, or have my home screen clear the text box upon load (which is probably better since I have "return to home screen after x time setup).

                              Originally posted by lj502 View Post
                              I use the allcams but on some uses I just want a single camera (front door, back gate) displayed with no interaction.
                              I will eventually need a few screens that only display single cameras, for controlling/monitoring my garage door and two automated gates (for visual confirmation of open/close status, even though they have sensors as well), so I'll need to look into the methods to display a single camera in an HSTouch textbox as well.
                              John
                              Hardware: i5-6400T w/16GB RAM & SSD w/HS3Pro, Z-Net, Harmony Hub x2, Echo Dot x2, Ocelot
                              Plugins: Z-wave, HSTouch, BLBackup, Harmony, GTS CPUXA, UltraMon3, Nest
                              HSTouch: Multiple Android Devices; 5 x ToteVision MD-1001 10.1" Win 7 Tablets
                              Devices: Cooper RF9501 x4, RF9517 x6, RF9534 x1, RF9540-N x7, RF9542 x1, RF9542-Z x2, RFHDSCG x1, RFWC5 x5; Intermatic HA02 x6; FortrezZ MIMOLite x3; Leviton VRPD3-1LW x4, VRR15-1LZ x6; Nest Tstat & 9x Protects; Dragon PD-100 x3, PA-100 x3

                              Comment

                              Working...
                              X