How to display& control IP Camera stream (Foscam / Tenvis)


#1

I have HTML & Javascript code to access, display and control an IP Camera (Foscam / Tenvis type) in a browser. I am trying to replicate this in NSB but am not getting very far…

Is there any sample code for this to get me started.

Happy to share the HTML code which shows the video steam and allows full control of PTZ etc.


#2

Here’s an article on including JavaScript in your app.

http://blog.nsbasic.com/2012/03/using-javascript-in-your-app/

If something can be done in JavaScript, it can be done in AppStudio.


#3

That is helpful thank you. The code I have is a mix of HTML & JS.

If I put this into a browser (Chrome) it works and I can login and se the camera image.
http://xxURLxx.dyndns.org:8001/videostream.cgi

If I add an HTML View into a simple form

HTMLview1.innerHTML = "Peter <src='http://xxURLxx.dyndns.org:8001/videostream.cgi'>"

I get nothing.(I have replaced the opening and closing <> with [] as this editor would not display them)
Should this work?


#4

Try this:

HTMLview1.innerHTML="Peter <iframe src='http://xxURLxx.dyndns.org:8001/videostream.cgi'>"

(If you put triple left ticks around your code, you show < characters.)


#5

Thank you.

If you just load this in a browser http://LulusCattery.dyndns.org:8001/videostream.cgi

You should get a video stream. This works in Chrome and Safari –IE doesn’t display it but that’s not a problem for now.

I have created a temp user/pass to demonstrate. Username = user Password = pass

In AppStudio and Chrome, the code below seems to connect to the camera in as much as it prompts for user & password, but no image appears. (In Chrome & IE)

In Chrome the ‘loading’ wheel just spins forever - it does seem to be downloading data (I guess the video stream) but no image shows.

I only have the one line of code HTMLview1.innerHTML="Peter <iframe src=‘http://LulusCattery.dyndns.org:8001/videostream.cgi

Do I need to define a window or such like?

Regards,

Peter


#6

Try the video control. Add it to your project and do this:

Video1.src = "http://LulusCattery.dyndns.org:8001/videostream.cgi";

http://wiki.nsbasic.com/Video

(Lulu herself appears to be 404)


#7

Thanks.

Unfortunately, that doesn’t work. I had tried it originally but the problem I suspect is that it is not a video file but a video stream.

http://LulusCattery.dyndns.org:8001/videostream.cgi

does not give a 404 error here.

This code

<!-- HTMLview1.innerHTML="Peter4 <iframe src='http://luluscattery.dyndns.org:8001/snapshot.cgi'>" Does bring up a single image Where as at some point?

#8

Have you tried the jPlayer

http://jplayer.org

Media Support

HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
Flash: mp3, mp4 (AAC/H.264), rtmp, flv

Maybe you can change the video format and point the jPlayer to your source.

If you can change it post a link and I’ll test it.

Cheers

Steve Warby…


#9

Thank you for the suggestion.
I fear that the jPlayer will have the same limitations as the video control described above in that it is intended for streaming a video file rather than a video-stream. I see that it can stream RTMP which some IP cameras support but it does not give access to any of the camera controls such as brightness or pan & tilt etc.

Given that the code works ok in a browser in its current form using HTML & JS, there must be a way to convert this into NSB compatible code. As a newbie, I just can’t get the simple front end to work.
(The spinners and buttons currently created in HTML would of course be NSB controls.)

This is the bones of what I am trying to replicate in NSB http://luluscattery.com/test/index.html
(User = user / PW = pass)


#10

Cracked it. Seems it has to be called… so put it in a button event and it seems to work OK.

Function Button1_onclick()
  HTMLview1.innerHTML="Peter8 <iframe src='http://luluscattery.dyndns.org:8001/videostream.cgi' /iframe>"
End Function

#11

Good job.

PS. I edited your code by putting triple left tics around it - then there is no problem with the less than sign.


#12

Thanks for the tip! Didn’t understand it first time round.

Whatever size I set the HTML view to, the video image remains small and has to be scrolled. How do I stretch the video image size to fit the width of the form. i.e. If I put a border around the HTMLview I can see that it is bigger but the inset image remains small.


#13

Do you have any docs on the settings etc to post here?

I’ll have a play around.


#14

Thanks.

Can’t quite see how to add a file to the post but if you click on this link and use User=user & Password=pass you can see the objective. If you then view the source code hopefully you can see how the video gets displayed and how to control the camera. It’s a bit messy but fairly straight forward.

The link that is used in the innerHTML code is this http://luluscattery.dyndns.org:8001/videostream.cgi
If you click on that, the video image shows properly - can’t see how to make that happen in the NSB form.

I tried this example from the NSB manual

Function Button1_onclick()
  HTMLview1.innerHTML="<iframe src='http://www.nsbasic.com'></iframe>"
  HTMLview1.refresh()
End Function

and the NSB web page also comes up restricted with scroll bars, even though I have disabled them in the control.
I’m clearly missing something fundamental about how to size the inner HTML page on the form. Changing height & width settings in the control only changes the frame size - not the content. How do we do that…?

I think I may have solved the mystery…
I am viewing in Chrome on a desktop - it seems that on a mobile phone, the sizing works. The NSB URL seems to work fine on a Samsung - can’t test on iPhone until I open an account.
The camera demo doesn’t work on the Samsung (yet). Nothing displays.


#15

I see you tried to mark the code up. You used regular tics (’) instead of left ticks (`).


#16

Don’t think I’ve ever used LH-tick before – got it now, thanks.

I am currently running the demo version. My paid version is VERY old (20-06-2006 Inv# 27698)

Will I get a better indication of whether this will work if I buy/upgrade to a full copy?

As you can see from the posts; I get an image in Chrome but not on a Samsung S3. The NSB demo in a scroll window in Chrome and full page on S3.

Is this a limitation of the demo version.


#17

No, it’s not a limitation of the demo version.

You might look for JavaScript code on the web which you can copy. Also, try a different webcam - the problem might be with what the camera is returning.


#18

This is working OK now.

Sub Main()
  HTMLview1.innerHTML="<img src='http://luluscattery.dyndns.org:8001/videostream.cgi?user=user&pwd=pass' width='100%'  /img>"
  HTMLview1.refresh()
End Sub

I have reverted to the <img /img> rather than <iframe /iframe> tags and it seems to work as I wanted.
I have also got the camera control to work (driving to a preset position) so all is good.
Still no video display on the old Samsung S3 but will have to try and borrow a newer model to see whether that is actually a problem that needs help or not.

Advice received so far is appreciated.


#19

If I execute this in the Chrome browser I get a snapshot image displayed.
http://192.168.0.173:8173/tmpfs/snap.jpg?usr=admin&pwd=pass
where 192.168.0.173:8173 is the IP of a local camera.

If I then click browser ‘refresh’ the image cleanly updates with the next snapshot.

However, if I execute this in NSB

Function refresh_video_display()
{
  HTMLview1.innerHTML="<img src='http://192.168.0.173:8173/tmpfs/snap.jpg?usr=admin&pwd=pass' width='100%'  /img> "
}
End Function

the first frame displays as expected but if I call the function again, nothing happens and the image does not update.

If I use <frame> & </frame> instead of <img> & </img> the snapshot updates but the screen blanks in between (I guess it’s redrawing the frame not just replacing the image) which is not acceptable.

How do I get the just the URL to update without destroying the frame and causing a flicker.


#20

It might be seeing that the URL is unchanged, and therefore just using the cached image.

Try changing the url slightly each time:

http://192.168.0.173:8173/tmpfs/snap.jpg?usr=admin&pwd=pass&i=1
http://192.168.0.173:8173/tmpfs/snap.jpg?usr=admin&pwd=pass&i=2
http://192.168.0.173:8173/tmpfs/snap.jpg?usr=admin&pwd=pass&i=3
http://192.168.0.173:8173/tmpfs/snap.jpg?usr=admin&pwd=pass&i=4