Jump to content
uniGUI Discussion Forums
billyChou

Capturing camera

Recommended Posts

AFAIK there is no browser based access to the camera on these devices unless you use a wrapper such as phonegap that does then provide a JS route.

Another alternative might be to use a web cam app on the device and then access the images via its webpages ?

Share this post


Link to post
Share on other sites

You can use this in an UniHtmlFrame:

<div id="viddiv" style="display:block; width:100%; height:100%">
  <video id="livevideo" width="100%" height="100%" autoplay></video>
</div>
<div id="picdiv" style="display:none;">
  <div id="picdivbuttons" style="width:100%">
    <button onclick="upload();">Upload</button>
    <button onclick="tryagain();">Try again</button>
    <button onclick="closeapp();">Close</button>
  </div>
  <div id="picdivcanvas" style="width:100%;">
    <canvas id="takenpic"></canvas>
  <div id="picdivbuttons">
</div>

<script type="text/javascript">
  var video = document.getElementById("livevideo");
  var canvas = document.getElementById("takenpic");
  var context = canvas.getContext("2d");
     
  navigator.getMedia = (
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
  );
  
  navigator.getMedia(
    {video: true},
    function(stream) {
      video.src = window.URL.createObjectURL(stream);
    },
    function(err) {
      alert("No camera access!");
    }
  );
  
  video.addEventListener('click', takepic, false);
 
  function takepic() {
    document.getElementById("picdiv").style.display = "block";
    canvas.width = document.getElementById("viddiv").offsetWidth;
    canvas.height = document.getElementById("viddiv").offsetHeight;
    context.drawImage(video, 0, 0);
    document.getElementById("viddiv").style.display = "none";
  }
  
  function upload() {
    alert('Upload the canvas here...');
  }
  
  function tryagain() {
    document.getElementById("picdiv").style.display = "none";
    document.getElementById("viddiv").style.display = "block";  
  }

  function closeapp() {
    ajaxRequest(frmMain.hfrWebCamPic, "closeapp", []);
  }
</script>

After that you have a picture on a Canvas. To upload the canvas (picture) see here:

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

 

 

Tested with FF and Chrome on Windows and Chrome on Android.

Share this post


Link to post
Share on other sites

Hi,

i use this sample camera code. but i can not save cam photo.

how i can on canvas picture save?

thanks

Share this post


Link to post
Share on other sites

It's so simple :

Use TUnimUpload

UnimUpload.Accept:='image';

UnimUpload.Capture:='camcorder';  //For some reason 'camera' did not work

UnimUpload.Execute;

and OnCompleted

       CopyFile(PChar(AStream.FileName), PChar(DestName), False);

      where DestName is where on the server you want the picture saved.

That's all

 

Share this post


Link to post
Share on other sites

Sorry, exist this TUnimUpload component?  The  TUnimFileUpload is the same?  because i can capture any  image from the camera.

Thank's

Share this post


Link to post
Share on other sites

Felipe, Mobile (I will assume iOS/Safari in this case) requires a https Digital Certificate off memory.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×