Jump to content

Capturing camera


billyChou

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>
<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.

Link to comment
Share on other sites

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

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

 

Link to comment
Share on other sites

  • 8 months later...
  • 3 years later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...