Real time Wireless Camera view using AppInventor2

The Plan

I was showing people how I can remotely control some LED’s connected to an Arduino and an ESP8266 through the internet while at the park today.  I had 2 phones running.  One phone had a live feed coming from a Dlink Wireless camera and the other phone was controlling the LED’s through the web page that I demoed in my previous post “LED’s Control Through ESP8266 + Arduino Web Page“.  Note: There have been other additions to enhance the setup in some of my later post that built on top of that so look for those if you are interested.

This 2 phone demo was pretty cool but it was a little clunky having 2 phones for a demo.  I was thinking a more elegant demo would be to have the LED controls and live feed all contained in one Android app.

I have also been messing around with MIT’s AppInventor environment in some of my recent posts.  I found that I can send custom strings to the Arduino through the internet using the Web.PutText feature (see post “AppInventor2 Web Interface Trial“) so controlling the LED’s can be taken care of by using that.

I did some more looking around in AppInventor2 and found the WebViewer component today.  I am going to see if I can make a portion of the app screen show a web page that is pointed to my Dlink Wireless camera.  This post will show the trials I did to get familiar with the AppInventor2 WebViewer component.

The AppInventor Setup

The screen layout is added on top of the Web Interface Trial for now.  I left the 2 buttons to send a PutText and PostText.  I added a text box to type in the URL and a load button.  The rest of the screen is just a WebViewer component….

WebViewTrialScreenLayout

The code is also simple.  When someone clicks the load button, set the WebViewer’s URL property to what is in the text box….

WebViewTrialScreenCode

The Testing

First I tried just entering http://www.google.com into the text box and couldn’t get the web page to load.  I then decided to try putting the full address of “http://www.google.com” and that worked.  Then I tried https://petestechprojects.wordpress.com and could view this blog site with no problem.

I then tried to enter the ip address of my Dlink Wireless camera.  Unfortunately all that comes up is “Error: Authorization Required…. Authentication was requested”.  When I go to the same page using a standard web browser on the PC, it pops up login dialog.  The camera could be using Java scripts.  The AppInventor WebViewer probably just doesn’t support it.

Luckily I have different type of wireless camera to try.  I recently bought a refurbished Foscam FI8910W Wireless Camera from Amazon: http://www.amazon.com/gp/product/B006ZPWS4U/ref=oh_aui_detailpage_o00_s00?ie=UTF8&psc=1.  I tried that one and it worked perfectly.  That camera has a much simpler web interface and even features a “mobile phone” interface.  I logged into the camera in the WebViewer window and could see a live feed.

The Next

Now I have tested the individual pieces to be able to make an AppInventor App that can send custom strings to my Arduino + ESP8266 + LED setup and display a live video feed in the same app to watch as the lights change.  Will hope to put it all together in my next post and show a quick video demo of it all working.

Advertisements

One thought on “Real time Wireless Camera view using AppInventor2

  1. Pingback: Arduino + ESP8266 remote control LED using an Android App with Camera Live View | PetesTechProjects

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s