Jump to content

About capture picture from webcam with unigui


Recommended Posts

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">
<meta charset="UTF-8" />

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

echo $_GET["GuID"];

<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;
        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)
        video.mozSrcObject = stream;
    else if (navigator.mozGetUserMedia)
    {//FF16a, 17a
        video.src = stream;
    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!');
        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!');




Link to comment
Share on other sites

  • 3 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...