locked
What is the easiest way to implement webcam images into a webpage? RRS feed

  • Question

  • Hi Guys,

    I am working on a project with an IRobot Create. So far all is good. But now I am trying to implement a webcam image stream to my webpage of my orchestration service. (With the web page I can view the state of my robot and drive it around until now.)  My  problem is I do not really know how. With an winform it is working. I've already looked in the code of the sample webcam service but it is just confusing to me. I know it has to do with the xslt, javascript, and the Http handlers but I'm stuck. 

    So if anybody has an idea or easy solution how to do that, I would  be very thankful. 

    Regards

    DonFeser
    Wednesday, July 8, 2009 1:53 PM

Answers

  • Yes. You can type in the URL in a browser to see what happens. The easiest way is to use the Service Directory then click on the Webcam. Then put /jpeg on the end of the URL.

    If you want "live video" then you have to refresh the web page, which is what a lot of the code is about in the XSLT for the webcam. You will notice a lot of JavaScript in there that continually reloads the image on the page.

    You can specify the name of the webcam service explicitly in the manifest so that you know what it is. Otherwise it will have a GUID appended. Alternatively, you can use FindPartner to get the ServiceInfo and then get the URL from that in your code. You should save the URL in your service's state and then in the XSLT you can insert it into an <img> tag.

    Trevor

    • Marked as answer by DonFeser Friday, July 17, 2009 11:38 AM
    Tuesday, July 14, 2009 5:32 AM
  • Hi guys, finally I managed to implement the pseudo webcam stream. In fact it wasn't too hard. For all who are interested I give you the javascript code:
    Code Snippet (javascript): 

    var refreshTime = 50;
    var targetUrl = "http://"+location.host+"/webcam/jpeg";
    var runVideo = true;
    
    //Load image
    function doLoad()
    {
        var img=document.all("WebImg");
        var timestamp=new Date();
        img.src=targetUrl+"?time="+timestamp.getTime();    
    }
    
    //refresh image
    function onImageLoad()
    {
        if(runVideo)
        {
          setTimeout("doLoad()", refreshTime);
        }
    }
    
    function startVideo()
    {
        runVideo=true;
        doLoad();
        
        document.all("btnStart").disabled=true;
        document.all("btnRefresh").disabled=true;
        document.all("btnStop").disabled=false;
    }
    
    function stopVideo()
    {
        runVideo=false;
        
        document.all("btnStart").disabled = false;
        document.all("btnRefresh").disabled = false;
        document.all("btnStop").disabled = true;
    }

    function onImageError()
    {
        document.all("WebImg").alt = "Webcam Image - failed to load";
        stopVideo();
    }

     Code Snippet (HTML): 
    <img id="WebImg" name="WebImg"  alt="Webcam Image" src="/webcam/jpeg"
                       width="640" height="480" 
                       onload="onImageLoad()" onerror="onImageError()"/>

    As you can see it is similar to the code in the webcam services xslt. When the onload event of the image fires the javascript functions are called and start permanently refreshing the image. Furthermore there are some buttons to start and stop the "stream". One important thing if you take the code: don't try to shorten the code by calling 'setTimeout()' in doLoad(). This will not work! You will get only a few pictures before the browser stops refreshing or even crashes. I know this isn't the most elegant way, but it works and is easy. Hopefully I can help somebody with it. Regards DonFeser
    • Edited by DonFeser Wednesday, August 5, 2009 7:20 AM
    • Marked as answer by DonFeser Wednesday, August 5, 2009 7:21 AM
    Wednesday, August 5, 2009 7:13 AM

All replies

  • Are you trying to show the webcam image on the web page associated with a different service? You can just use the URL of the webcam service and append "/jpeg" if you want the image.

    Trevor
    • Marked as answer by DonFeser Friday, July 17, 2009 11:38 AM
    • Unmarked as answer by DonFeser Friday, July 17, 2009 11:38 AM
    Saturday, July 11, 2009 1:38 AM
  • Sorry, should have mentioned it. I wrote my own service.  So yes, I am trying to show the webcam image on the web page associated with my service. I think it is just more comfortable then open a new window and look at the webcam service. 
    That's all? Just giving the URL of the webcam service as source for the image in the xslt?
    Thanks in advance for your help.

    DonFeser
    Monday, July 13, 2009 9:58 AM
  • Yes. You can type in the URL in a browser to see what happens. The easiest way is to use the Service Directory then click on the Webcam. Then put /jpeg on the end of the URL.

    If you want "live video" then you have to refresh the web page, which is what a lot of the code is about in the XSLT for the webcam. You will notice a lot of JavaScript in there that continually reloads the image on the page.

    You can specify the name of the webcam service explicitly in the manifest so that you know what it is. Otherwise it will have a GUID appended. Alternatively, you can use FindPartner to get the ServiceInfo and then get the URL from that in your code. You should save the URL in your service's state and then in the XSLT you can insert it into an <img> tag.

    Trevor

    • Marked as answer by DonFeser Friday, July 17, 2009 11:38 AM
    Tuesday, July 14, 2009 5:32 AM
  • Hi guys, finally I managed to implement the pseudo webcam stream. In fact it wasn't too hard. For all who are interested I give you the javascript code:
    Code Snippet (javascript): 

    var refreshTime = 50;
    var targetUrl = "http://"+location.host+"/webcam/jpeg";
    var runVideo = true;
    
    //Load image
    function doLoad()
    {
        var img=document.all("WebImg");
        var timestamp=new Date();
        img.src=targetUrl+"?time="+timestamp.getTime();    
    }
    
    //refresh image
    function onImageLoad()
    {
        if(runVideo)
        {
          setTimeout("doLoad()", refreshTime);
        }
    }
    
    function startVideo()
    {
        runVideo=true;
        doLoad();
        
        document.all("btnStart").disabled=true;
        document.all("btnRefresh").disabled=true;
        document.all("btnStop").disabled=false;
    }
    
    function stopVideo()
    {
        runVideo=false;
        
        document.all("btnStart").disabled = false;
        document.all("btnRefresh").disabled = false;
        document.all("btnStop").disabled = true;
    }

    function onImageError()
    {
        document.all("WebImg").alt = "Webcam Image - failed to load";
        stopVideo();
    }

     Code Snippet (HTML): 
    <img id="WebImg" name="WebImg"  alt="Webcam Image" src="/webcam/jpeg"
                       width="640" height="480" 
                       onload="onImageLoad()" onerror="onImageError()"/>

    As you can see it is similar to the code in the webcam services xslt. When the onload event of the image fires the javascript functions are called and start permanently refreshing the image. Furthermore there are some buttons to start and stop the "stream". One important thing if you take the code: don't try to shorten the code by calling 'setTimeout()' in doLoad(). This will not work! You will get only a few pictures before the browser stops refreshing or even crashes. I know this isn't the most elegant way, but it works and is easy. Hopefully I can help somebody with it. Regards DonFeser
    • Edited by DonFeser Wednesday, August 5, 2009 7:20 AM
    • Marked as answer by DonFeser Wednesday, August 5, 2009 7:21 AM
    Wednesday, August 5, 2009 7:13 AM
  • {$content}

    I learned a lot from your answer, Thanks for your answer!
    Monday, November 8, 2010 3:54 PM