Embed live feed of IP Cam on Arduino served webpage

Hello,
I was wondering how I could embed a live feed on a webpage created with the WiFi Shield and Arduino Mega. I plan to have the IP camera plugged into the router and displaying a box with the live fed on a webpage hosted on the Arduino.

I am not looking to process the video, I do know the Ardunio isn’t quick enough for video. I am just looking for a way to stream the content of the camera within the webpage served by the Ardunio.

Some of my code is as follows:

   ...         
             // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:    
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print("<FONT size = +7><a href=\"/LS\"> New Scanner</a></FONT>
");
            client.print("<FONT size = +7><a href=\"/H\"> Scanner</a></FONT>
");
            client.print("<FONT size = +7><a href=\"/L\"> Swipe </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/O\"> Lights: Off </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/B\"> Blinds: Close </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/K\"> Blinds: Open </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/\"> Refresh Page </a></FONT>
");
            
            
            
            //Create webcam feed                This doesnt work, nothing is displayed

            client.print(<embed src="www.youtube.com/v/XGSy3_Czz8k">);




            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;         
          } 
          else {      // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        }     
        else if (c != '\r') {    // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        } ...

This guy has it, you have to hit play on the video feed but when you do, you can monitor what you are controlling.

http://try.yaler.net/~arduino/led

Does anyone know how this is done?

My IP camera uses an IMG tag rather than an EMBED tag, so you could try that. The SRC attribute is the URL which the stream will be read from. The HTTP response header would indicate what format the stream was in, and the browser would render that automatically within the page if it is a format that it supports. If you already have the camera (or have access to one that is working) you could display the feed locally and then view the HTML page source to see what URL is needed to access it.

I am not looking to process the video, I do know the Ardunio isn't quick enough for video. I am just looking for a way to stream the content of the camera within the webpage served by the Ardunio.

You could put the video link in a frame in a web page. Much depends on how the video frames are served up as how they can be displayed in a web page..

I can’t find my old IP Cam, I decided to test with and existing feed from JustinTV:

I tried using the IMG tag but ran into a problem:

client.print("<img src="http://www.justin.tv/crazy_american?utm_campaign=frontpage_player_click&utm_source=http://www.justin.tv/&utm_content=crazy_american#/w/6170309696/27" width="300" height="200">");

It seems as though the “//” from “http://” is commenting out the line of code. I’m not sure what to search online to find a solution. I tried HTML URL in C++ but can’t see what I am doing wrong.

I tried taking out the “http://” and then I got an error about a “#” symbol. I am not sure what escape characters I can use…

PeterH:
The HTTP response header would indicate what format the stream was in, and the browser would render that automatically…

Are you referring to the header I have to include in the sketch,

client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");

or a header coming from JustinTV or a similar site?

PeterH:
…(or have access to one that is working) you could display the feed locally and then view the HTML page source to see what URL is needed to access it.

I tried doing this in Chrome (and inspecting the element) but not sure what I am looking for. Is there a specific tag I can search to locate the URL I would need to use in the sketch?

You use a backslash in most cases for an escape character. For instance " lest you put a quotation mark in the string. I would assume that / would let you put in the slashes.

Th escape character does work, however I am not getting a stray ‘’ in program error.

client.print("<img src="http:/\/www.justin.tv/crazy_american?utm_campaign=frontpage_player_click&utm_source=http:/\/www.justin.tv/&utm_content=crazy_american#/w/6170309696/27" width="300" height="200">");

you need to replace in the string any occurance of::

"

with

"

Also, why on earth did you do this:

http://

Put that back to how it should be:

http://

The reason it is being seen as a comment is because of the non-escaped speech mark in front of http. The compiler sees this:

"<img src="http://

As this string:

“<img src=”

followed by the line of code:

http://

To make it work you need to escape the speech mark like so:

"<img src="http://

I have a big cheese smile because I just learned something. You made that very clear (Thanks!) and I was able to modify the code as follows:

client.print("<img src=\"http://www.justin.tv/crazy_american?utm_campaign=frontpage_player_click&utm_source=http://www.justin.tv/&utm_content=crazy_american#/w/6170309696/27\" width=\"300\" height=\"200\">");

Everything compiled correctly and I now have a better understanding of the usage of escape characters.

However, I still do not have any video box (or image for that matter) displaying on the webpage. Below is the content from “view source”

<FONT size = +7><a href="/LS"> 
New Scanner</a></FONT>
<FONT size = +7><a href="/H"> 
Scanner</a></FONT>
<FONT size = +7><a href="/L"> 
Swipe </a></FONT>
<FONT size = +7><a href="/O"> 
Lights: Off </a></FONT>
<FONT size = +7><a href="/B"> 
Blinds: Close </a></FONT>
<FONT size = +7><a href="/K"> 
Blinds: Open </a></FONT>
<FONT size = +7><a href="/"> 
Refresh Page </a></FONT>

That doesn't look like a valid HTML document and does not include the output from the client.println() call you showed earlier. My conclusion is that this is probably not actually the source of the page served out by your sketch.

My code is as follows:

...
  if (client) {                             // if you get a client,
    Serial.println("new client");           // print a message out the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {  
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:    
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print("<FONT size = +7><a href=\"/LS\"> New Scanner</a></FONT>
");
            client.print("<FONT size = +7><a href=\"/H\"> Scanner</a></FONT>
");
            client.print("<FONT size = +7><a href=\"/L\"> Swipe </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/O\"> Lights: Off </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/B\"> Blinds: Close </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/K\"> Blinds: Open </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/\"> Refresh Page </a></FONT>
");

            //Create webcam feed                THis doesnt work. Try to fix it and run your own video

            client.print("<img src=\"http://www.justin.tv/crazy_american?utm_campaign=frontpage_player_click&utm_source=http://www.justin.tv/&utm_content=crazy_american#/w/6170309696/27\" width=\"300\" height=\"200\">");
            
            //Testing some other code from a site for HTML Video
            //client.print("<video width=\"320\" height=\"240\" controls><source src=\"movie.mp4\" type=\"video/mp4\"><source src=\"movie.ogg\" type=\"video/ogg\">Your browser does not support the video tag.</video>");

             // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;         
          } 
          else {      // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        }     
        else if (c != '\r') {    // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        ...

To get the output from the above post I right clicked on the webpage served from the ardunio and clicked on view source. My Ardunio is on the WAN, I probably shouldn’t post the IP but here it is: 24.187.156.138:81

The entire code is uploaded as a file to this post.

WifiWebLight_Stepper_IfElse.ino (13.3 KB)

Oh, I see. The HTTP response you’re sending does not contain a valid HTML document, so it’s not too surprising if the browser doesn’t render all of it correctly.

I suggest you output

just before ‘the content of the HTTP response follows’ and output

just before ‘The HTTP response ends with another blank line’.

I added it but it made no change at all… The snippet of code is as follows:

          if (currentLine.length() == 0) {  
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:    
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();
            
            // Added per recamendation from PeterH on Arduino
            // Adding the appropriate HTTP responce
            
            client.print("<!DOCTYPE html>");
            client.print("<HTML><BODY>");
            
            // the content of the HTTP response follows the header:
            client.print("<FONT size = +7><a href=\"/LS\"> New Scanner</a></FONT>
");
            client.print("<FONT size = +7><a href=\"/H\"> Scanner</a></FONT>
");
            client.print("<FONT size = +7><a href=\"/L\"> Swipe </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/O\"> Lights: Off </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/B\"> Blinds: Close </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/K\"> Blinds: Open </a></FONT>
");
            client.print("<FONT size = +7><a href=\"/\"> Refresh Page </a></FONT>
");



            //Create webcam feed                THis doesnt work. Try to fix it and run your own video

            client.print("<img src=\"http://www.justin.tv/crazy_american?utm_campaign=frontpage_player_click&utm_source=http://www.justin.tv/&utm_content=crazy_american#/w/6170309696/27\" width=\"300\" height=\"200\">");
            
            //Testing some other code from a site for HTML Video
            //client.print("<video width=\"320\" height=\"240\" controls><source src=\"movie.mp4\" type=\"video/mp4\"><source src=\"movie.ogg\" type=\"video/ogg\">Your browser does not support the video tag.</video>");
            
            
            // Added per recamendation from PeterH on Arduino
            // Adding the appropriate HTTP responce
            
            client.print("</BODY></HTML>");



             // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;         
          } 
          else {      // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        }     
        else if (c != '\r') {    // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

I notice the header says:

            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

What is with the line:

Content-type:text/html

I am supposed to change the content type? Would that even have any bearing on what can be displayed on a webpage?

And here is the output from the Serial Monitor when I click on the "Swipe" link:

new client
GET /L HTTP/1.1
Host: 24.187.156.138:81
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.72 Safari/537.36
Referer: http://24.187.156.138:81/
Accept-Language: en-US,en;q=0.8

client disonnected
new client
GET /favicon.ico HTTP/1.1
Host: 24.187.156.138:81
Connection: keep-alive
Accept: */*
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.72 Safari/537.36
Accept-Language: en-US,en;q=0.8

client disonnected

I don’t know anything about the swipe link. The problem you asked about was the embedded video. The most recent code you posted should have returned a page that was valid HTML and contained an < img > element displaying the video. What page did you actually get at the browser - can you show the page source?

I don’t know anything about the swipe link.

I was using that as an example in case you/or another needed to see output from the Serial Menue

this bit of code is why I posted it:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

What does it mean “Accept: text/html,…” Does that mean it only can render text? (And why I can’t see video)

Here is the page source:

<!DOCTYPE HTML><html><body><FONT size = +7><a href="/LS">Test Scanner</a></FONT>
<FONT size = +7><a href="/H"> Scanner</a></FONT>
<FONT size = +7><a href="/L"> Lights: On </a></FONT>
<FONT size = +7><a href="/O"> Lights: Off </a></FONT>
<FONT size = +7><a href="/50"> Lights: 50% </a></FONT>
<FONT size = +7><a href="/25"> Lights: 25% </a></FONT>
<FONT size = +7><a href="/RB"> Rainbow </a></FONT>
<FONT size = +7><a href="/B"> Blinds: Close </a></FONT>
<FONT size = +7><a href="/K"> Blinds: Open </a></FONT>
<FONT size = +7><a href="/">  Refresh Page </a></FONT>
</body></html>

(I added a few new links)

When something isn't working the LAST thing you should do is "add a few new links". Take away EVERYTHING that is not absolutely essential to get the problem piece to work.

Try getting your page to display an image from another website - which will be simpler than getting a video to display.

Read stuff about web development - for example HTML Images.

...R

JamesHayek:
What does it mean "Accept: text/html,..." Does that mean it only can render text? (And why I can't see video)

text/html is just the MIME type.

The first means the media type, in this case it is being received as a plan text file.
The second means the subtype. In this case it says the file is html.

In other words the browser will know it is receiving a text based file which needs to be rendered as HTML.

Another MIME example would be:
text/plain, which says a text based file which should be rendered as plain text.

That page does not contain the output from this statement:

client.print("<img src=\"http://www.justin.tv/crazy_american?utm_campaign=frontpage_player_click&utm_source=http://www.justin.tv/&utm_content=crazy_american#/w/6170309696/27\" width=\"300\" height=\"200\">");

I suggest you investigate to find out why it is not appearing in your page. For example, try replacing the argument with a much simpler string and see whether that comes out OK. Try reinstating the first part of the longer string and see whether it comes out, and so on. Perhaps there’s a problem with the string length or something tripping you up, or perhaps you have just confused the Arduino parser and this code isn’t reaching the compiler at all.

I think time is being wasted until the OP explains how the video is served up. I've got an old cam below which works sometimes. One can view the page source to see the html code.

http://web.comporium.net/~shb/wc2000-PT-script.htm

Robin2:
When something isn’t working the LAST thing you should do is “add a few new links”. Take away EVERYTHING that is not absolutely essential to get the problem piece to work.

All lines of code (except for the video link) works. I added new links to expand my functionality of the project which has no bearing on the efforts done in this forum.

Try getting your page to display an image from another website - which will be simpler than getting a video to display.

Read stuff about web development - for example http://www.w3schools.com/html/html_images.asp.

That has been the site I was referencing during this HTML development, I have been takign lines of code directly from that site posted (w3schools).
I was also able to post a picture using the IMG tag.

In between the HTTP response added as per PeterH’s suggestion is the code(s) posted below: (I tried them all separately and one at a time)

            //Create webcam feed                 I can post a picture, not video as of now.
            
            //This displays nothing, doesnt show up on view source
              client.print("<img src=\"http://www.justin.tv/crazy_american?utm_campaign=frontpage_player_click&utm_source=http://www.justin.tv/&utm_content=crazy_american#/w/6170309696/27\" width=\"300\" height=\"200\">");

I then try a different approach by keeping a movie local.

//Also displays nothing and doesnt show up on view source
              client.print("<video width=\"320\" height=\"240\" controls><source src=\"movie.mp4\" type=\"video/mp4\"><source src=\"movie.ogg\" type=\"video/ogg\">Your browser does not support the video tag.</video>");

Try getting your page to display an image from another website - which will be simpler than getting a video to display.

So I did just that with this line and I was able to view an image.

 //This worked in displaying an image and came up on view source
              client.print("<img src=\"http://s21.postimg.org/cfdqt0uh3/Screenshot_9.png\" width=\"300\" height=\"360\">");

I then attempted the same code but with a video link, a blank box appeared but no video:

 //This worked in displaying a blank box and came up on view source
              client.print("<video src=\"http://www.youtube.com/watch?v=zlfsBlcH4ao\" width=\"640\" height=\"360\"></video>");

However, I can right click on the blank box and open video URL in another window. Its nice but not exactly what I want to do.

I then wanted to try using an iFrame tag:

 //This did not work at all and nothing came up on view source
              client.print("<iframe width=\"640\" height=\"360\" src=\"http://www.youtube.com/embed/zlfsBlcH4ao?feature=player_detailpage\" frameborder=\"0\" allowfullscreen></iframe>");

PeterH:
That page does not contain the output from this statement:

client.print("<img src=\"http://www.justin.tv/crazy_american?utm_campaign=frontpage_player_click&utm_source=http://www.justin.tv/&utm_content=crazy_american#/w/6170309696/27\" width=\"300\" height=\"200\">");

I suggest you investigate to find out why it is not appearing in your page. For example, try replacing the argument with a much simpler string and see whether that comes out OK. Try reinstating the first part of the longer string and see whether it comes out, and so on. Perhaps there’s a problem with the string length or something tripping you up, or perhaps you have just confused the Arduino parser and this code isn’t reaching the compiler at all.

Great suggestion, by using the code below I was able to get the iFrame tag to work… However there was an unsuspecting result:

//Tried this, found from: [url]http://stackoverflow.com/questions/9590383/how-to-makle-a-video-link-appear-within-a-html-code-on-arduino-w-ethernet-shield[/url]
            client.print("<iframe width=640 height=360 src=");
            client.print("http://stackoverflow.com/questions/9590383/how-to-makle-a-video-link-appear-within-a-html-code-on-arduino-w-ethernet-shield"); 
            client.println(" frameborder=0 allowfullscreen></iframe>");

That last bit of code does not render the webpage of the URL posted. Instead of the Stackoverflow link, I am seeing another instance of my Arduino served webpage within the original page, and within that iFrame is even another instance (ofmy Arduino served webpage) embeded in the original iFrame. Another words, there is a webpage withing a webpage, and another webpage within that prior one. I don’t see how the above code allows for that…

But, that’s not the topics problem. It’s the video not showing up. I believe PeterH is right and it has something to do with:

…or perhaps you have just confused the Arduino parser and this code isn’t reaching the compiler at all.

zoomkat:
I think time is being wasted until the OP explains how the video is served up. I’ve got an old cam below which works sometimes. One can view the page source to see the html code.

http://web.comporium.net/~shb/wc2000-PT-script.htm

I believe I covered that. When my IP Cam comes in the mail, the video will be served via a local URL. Until then I am trying to get the coding to work by posting any video hosted on the web. It should be the same coding… just a different URL correct? The approach should be identical.

Zoomcat, what do you mean by your …old cam works “sometimes”? Why sometimes?

Btw, it doesn’t seem like you embedded video but refresh a bunch of static images to trick the viewer into thinking it’s playing a video. Nothing close to something like that was recommended here in a prior post, or from any amenable tutorial online. I will have to review zoomkat page further prior to attempting that technique of displaying a video feed.