About capture picture from webcam with unigui

barutali@hotmail.com · June 25, 2013

Hi,

I'm developing test projects with unigui, as you know it's possible to take picture and save to database via webcam with HTML5. So i was wondering is this possible with UniGUI as well ?

If it's possible then how i can do it ? I prepared my project as PHP and calling with uniHTMLFrame but i couldn't find how to save database taken photo after capture via webcam.

My PHP file as below, i have to save to database with Query String's parameter which i send to query.

Thanks in advance.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
<head>
<meta charset="UTF-8" />
</head>

<body>
<p><video id="video" autoplay width="200px"/></p>
<p><input type="button" id="buttonSnap" value="Take screenshot" disabled="disabled" onclick="snapshot()" /></p>
<p>
<input type="button" id="buttonStart" value="Start" disabled="disabled" onclick="start()" />
<input type="button" id="buttonStop" value="Stop" disabled="disabled" onclick="stop()" />
</p>
<p><canvas id="canvas" /></p>
<form name="form1" method="post" action="">
<input type="hidden" name="hiddenField" id="hiddenField">
<?php

echo $_GET["GuID"];

?>
</form>
<script type="text/javascript">//<![CDATA[
"use strict";
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var videoStream = null;



function snapshot()
{
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
}

function noStream()
{
    log('Access to camera was denied!');
}

function stop()
{
    var myButton = document.getElementById('buttonStop');
    if (myButton) myButton.disabled = true;
    myButton = document.getElementById('buttonSnap');
    if (myButton) myButton.disabled = true;
    if (videoStream)
    {
        if (videoStream.stop) videoStream.stop();
        else if (videoStream.msStop) videoStream.msStop();
        videoStream.onended = null;
        videoStream = null;
    }
    if (video)
    {
        video.onerror = null;
        video.pause();
        if (video.mozSrcObject)
            video.mozSrcObject = null;
        video.src = "";
    }
    myButton = document.getElementById('buttonStart');
    if (myButton) myButton.disabled = false;
}

function gotStream(stream)
{
    var myButton = document.getElementById('buttonStart');
    if (myButton) myButton.disabled = true;
    videoStream = stream;
    video.onerror = function ()
    {
        if (video) stop();
    };
    stream.onended = noStream;
    if (window.webkitURL) video.src = window.webkitURL.createObjectURL(stream);
    else if (video.mozSrcObject !== undefined)
    {//FF18a
        video.mozSrcObject = stream;
        video.play();
    }
    else if (navigator.mozGetUserMedia)
    {//FF16a, 17a
        video.src = stream;
        video.play();
    }
    else if (window.URL) video.src = window.URL.createObjectURL(stream);
    else video.src = stream;
    myButton = document.getElementById('buttonSnap');
    if (myButton) myButton.disabled = false;
    myButton = document.getElementById('buttonStop');
    if (myButton) myButton.disabled = false;
}

function start()
{
    if ((typeof window === 'undefined') || (typeof navigator === 'undefined')) log('This page needs a Web browser with the objects window.* and navigator.*!');
    else if (!(video && canvas)) log('HTML context error!');
    else
    {
        if (navigator.getUserMedia) navigator.getUserMedia({video:true}, gotStream, noStream);
        else if (navigator.oGetUserMedia) navigator.oGetUserMedia({video:true}, gotStream, noStream);
        else if (navigator.mozGetUserMedia) navigator.mozGetUserMedia({video:true}, gotStream, noStream);
        else if (navigator.webkitGetUserMedia) navigator.webkitGetUserMedia({video:true}, gotStream, noStream);
        else if (navigator.msGetUserMedia) navigator.msGetUserMedia({video:true, audio:false}, gotStream, noStream);
        else log('getUserMedia() not available from your Web browser!');
    }
}

start();
//]]></script>
</body>
</html>

zilav · June 27, 2013

http://forums.unigui.com/index.php?/topic/2019-loading-unicanvas-and-native-canvas-to-db/

Bertifox · June 25, 2017

Hi Newbie,

Did you manage to make the capture of the webcam work? What component do you use?

rasaliad · June 25, 2017

Hi Bertifox

Have you seen this http://forums.unigui.com/index.php?/topic/4666-unispecial-component/?p=23362

Sign In

About capture picture from webcam with unigui

Recommended Posts

barutali@hotmail.com

zilav

Bertifox

rasaliad

Join the conversation

Browse

Activity