Recently someone posted on foxite about how to control your webcam using vfp.

That is a topic in itself but that got me thinking as to how to DISPLAY the output of your webcam easily in VFP using the web browser control.

Using the standard Web Browser control and HTML5 it is just not possible because of the limitations of IE and HTML5.

I have posted here http://weblogs.foxite.com/bernardbout/2012/01/07/html5-with-internet-explorer-8-in-vfp/

about how to install the Google Chrome Frame and set it up.

However because of the security restrictions of Google Chrome, using the webcam from a local file is not possible. Chrome just will not allow it.

There is an alternative and that is you need to host the HTML5 page on a web server.

So for this project to work, a number of essential elements are needed.

1. A web server to host your HTML5 file. I use wamp found here http://www.wampserver.com/en/

Its free and comes with Apache, MySQL and PHP and is very easy to install. You could also use IIS if you have it to host the file or any other web server. The thing is that using this method, you can access your Webcam from anywhere in the world!

2. Install Google Chrome Frame as described in my blog post (link above)

3. A webcam of course.

The form we use is a simple VFP form with the web browser activex added to it and a way to load a HTML page. Nothing else fancy.

The HTML page will work locally in Firefox but not in chrome and certainly not in IE.

We will be using the new navigator.getUserMedia and the HTML5 Video tag. For more info on this search Google. There are heaps of resources.

In its simplest form the HTML is

<!DOCTYPE html>
<html>
<head>
    <title>Using getUserMedia with HTML5 VFP<video></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <script>
        window.addEventListener('DOMContentLoaded', function() 
        {
            var v = document.getElementById('v');

            navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia ||
                             navigator.mozGetUserMedia ||
                             navigator.msGetUserMedia);
            if (navigator.getUserMedia) 
            {
                // Request access to video only
                navigator.getUserMedia(
                {
                    video:true,
                    audio:false
                },        
                function(stream) 
                {
                    var url = window.URL || window.webkitURL;
                    v.src = url ? url.createObjectURL(stream) : stream;
                    v.play();
                },
                function(error) 
                {
                    alert('Something went wrong. (error code ' + error.code + ')');
                    return;
                }
                                        );
            }
            else 
            {
                alert('Sorry, the browser you are using doesn\'t support getUserMedia');
                return;
            }
        }
    )
    </script>
</head>
<body>

    <video id='v'></video>
    <h4>A sample page showing HTML5, the VFP Web Browser control and Google Chrome Frame</h4>
</body>
</html>

That is all. Save this to your web server for hosting.

Now run your form and load this page but there is one extra thing you need to do.

add "gcf:" (without the quotes) to the front of your page string.

So if your page string is:

http://localhost/WebcamHTML5/webcam.html

you need to load it into your VFP form like so, given that the webbrowser control has been called "Webbrowser1":

Thisform.Webbrowser1.navigate2("gcf:http://localhost/WebcamHTML5/webcam.html")

That is all you need to do. The webpage will ask for permission to use the webcam, so click Allow:

After a short while, as Google chrome frame loads your webcam image will be displayed in the VFP window.

There is a heap more you can do with this but that is for another post.

The files - vfp form and HTML page can be downloaded here. Change the URL to wherever you are hosting the HTML page. Enjoy.webbrowser files


5 Responses to Displaying your webcam in a VFP window using HTML5 and GCF

  • Tariq Mehmood says:

    Sir thanks for providing very helpful stuff.

  • David Mustakim says:

    There is a statement above that says “..The HTML page will work locally in Firefox but not in chrome..” . Actually with latest Firefox Chrome the html works without having to fall back to Flash.

    There is a script here that allows automatic fall back to Flash for browsers tha do not support the ‘problem’ getusermedia streatimg function
    https://codeload.github.com/addyosmani/getUserMedia.js/zip/master

    Also, since the idea is to make the webcam viewable from anywhere through Internet than some discussions on how to ‘publish’ the wamp web pages on the internet may be needed. There are of course lots links that can be googled, especially also since some people may prefer XAMPP over WAMP

    Regards,
    David

    • David Mustakim says:

      correction – second sentence first paragraph should read: Actually with latest Chrome…
      – second paragraph ….automatic fall back to Flash for browsers that do not support the ‘unsuppoted’ getusermedia function required for video streaming…
      – final paragraph: … lots OF links that can be googled for furthe info…

    • Bernard Bout says:

      David, I think you misunderstood what I said.

      “..The HTML page will work locally in Firefox but not in chrome..”

      What this means is that you just DBL click the page and it will open in Firefox (provided that is your default browser) and the Webcam WILL BE displayed or use the File-Open to open the html locally without a web server.

      However you cannot do the same with Chrome. It just will not ALLOW that for a local file.
      There is no need for falling back to flash or anything. In fact to open a local file (not hosted on a web server) in Chrome you need additional startup parameters or you need to edit your registry.

Leave a Reply

Your email address will not be published. Required fields are marked *