Jump to content

Capturing camera


Recommended Posts

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 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 id="picdivcanvas" style="width:100%;">
    <canvas id="takenpic"></canvas>
  <div id="picdivbuttons">

<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 ||
    {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", []);

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




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

Link to comment
Share on other sites

  • 7 months later...
  • 4 years later...
  • 3 weeks later...

It's so simple :

Use TUnimUpload


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


and OnCompleted

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

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

That's all


Link to comment
Share on other sites

  • 8 months 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...