webcam

[dkeene]

Hi

Being able to take pictures with a webcam seems to be a basic function on modern apps. Is there a way to check if the user's computer has a webcam and to snap an image with it using uniGUI? Currently i am using unigui desktop, but have not used the mobile version. I have seen references to this in the forum, but have not found any success.

Thanks

doug

[Mehmet Emin]

1) to check if the user's computer has a webcam there is a code on stackoverflow.com you can use.

2) To snap an image and save to server I use these pieces of code:

Have those index.html, adapter-latest.js and main.js available to browser (fix path references in index.html)

On your TUnimForm put  a TUnimHTMLFrame (hfrWebCam) and a TUnimBitBtn (btnTakePicture)

for hfrWebCam

    HTML.Strings = (
      '<iframe id="webcamframe"'
      '   src="/files/webrtc/index.html" '      
        '   style="width:[width]px; height:[height]px; border:none;"></if' +
        'rame>')
 

before activating hfrWebCam you replace [width] and [height] like below:

  hfrWebCam.HTML.Text := StringReplace(hfrWebCam.HTML.Text, '[height]', IntToStr(UniApplication.ScreenHeight - 20), []);
  hfrWebCam.HTML.Text := StringReplace(hfrWebCam.HTML.Text, '[width]', IntToStr(UniApplication.ScreenWidth - 20), []);

 

then for btnTakePicture:

function tap(sender, e, eOpts)
{     
   Ext.get(sender.id).setVisible(false);
   var win = document.getElementById("webcamframe").contentWindow;
   ajaxRequest(frmWebcamm.btnTakePicture, "saveimg", ["img="+win.getPicture()]);
}

To save the picture create an AjaxEvent:

procedure TfrmWebcamm.btnTakePictureAjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
var
  SS: TStringStream;
  MS: TMemoryStream;
  FN: String;
  UploadDir: string;
  //frmCropImagem: TfrmCropImagem;
  LTextDetection: string;
begin
  if SameText(EventName, 'saveimg') then begin
    SS := nil;
    MS := nil;
    FN := '';
    try
      SS := TStringStream.Create(Params.Values['img']);
      MS := TMemoryStream.Create();
      DecodeStream(SS, MS);
      UploadDir := TPath.Combine(UniServerModule.ServerRoot, 'protected\saveimg');
      ForceDirectories(UploadDir);
      FN := TPath.Combine(UploadDir, LowerCase(TPath.GetGUIDFileName + '.jpg'));
      MS.SaveToFile(FN);

      LTextDetection := GoogleTextDetection(FN);
      if LTextDetection <> '' then
        TfrmChatm(frmChatm).edtChatMessage.Text := LTextDetection;
      Close;
    finally
      SS.Free;
      MS.Free;
    end;
  end;
end;
 

I hope it helps.

 

 

 

index.html

adapter-latest.js

main.js

[dkeene]

Thanks, Mehemet for sharing and the quick reply!

Does this only work on the Mobile unigui environment?
Is your device working now?
Thanks

Doug

[Mehmet Emin]

It is a working code (mobile form) in production. But it should work on desktop also.

[Mehmet Emin]

But dont forget that all communication must be over https/ssl otherwise it will not work. This is browser requirement

[Mehmet Emin]

On 6/13/2020 at 7:55 PM, dkeene said:

Does this only work on the Mobile unigui environment?
Is your device working now?

By the way just tested on desktop it works fine.

[dkeene]

Hi, Mehmet

Is there any way you could send me a form ? I don't quite understand where to put the javascript attachments...

Thank you much

[Mehmet Emin]

I dont have any access to laptop now. I will attach to this thread as I return on Wednesday.

[dkeene]

OK, thank you i will wait and I am trying to make this work, based on your post. Are you saying that the attached index.html, adapter-latest.js and main.js files need to reside on each remote computer?

 

 

[Mehmet Emin]

3 minutes ago, dkeene said:

you saying that the attached index.html, adapter-latest.js and main.js files need to reside on each remote computer?

no. just on your server. Its my bad English. I mean put them in a location your uniGUI server can see that is all.

[Mehmet Emin]

Compile this one. webcam.7z

webcam.7z

[dkeene]

Thank you, Mehmet I will try this now! I hope i can get this working

[Mehmet Emin]

I just found a little late. There is already a component developed for webcam. I recommend you also have look into this.

 

 

[dkeene]

Thanks, Mehmet. I tried the link to the other solution but it has been removed ;(. I tried your solution but I get "Project webcam raised exception EIdOSSLCouldNotLoadSSLLibrary" have you heard of this? I have not seen it.

[Mehmet Emin]

  you will need ssl dlls 64/32bit (FMSoft\Framework\uniGUI\SSL\dll) put them to your executable location

  You will require cert.pem, key.pem and root.pem to start SSL.
  https:// is required for webcam access by browser.
 

[dkeene]

so copy these files as they are  (both dll from x64 and x86) right into the executable directory?

[Mehmet Emin]

Depending on your build. Copy  x64 or x86 dlls (not both) into where your exe located.

[Taweesak Sodjit]

Thank...