Take picture - NO Phonegap

Short version:
How to tweak an AppStudio IDE Object to have this parameters?

<input type=‘‘file’’ accept=‘‘image/*’’ id=‘‘file-input’’>

Long version:
Hi, I’d like to take pictures from the built in camera. I am aware of the getUserMedia Example, but it’s not working on iOS <11 and it’s not what I want. I really would like to start the camera app with all it’s functionality and not just take a snapshot of the videostream.

Also I could do it with the PhoneGap Camera Plugin, but I dont want to wrap the webapp into a native app with phonegap.

This article उपयोगकर्ता से इमेज लेना  |  Articles  |  web.dev
describes how it works:

<input type="file" accept="image/*" id="file-input">
<script>
  const fileInput = document.getElementById('file-input');

  fileInput.addEventListener('change', (e) => doSomethingWithFiles(e.target.files));
</script>

I simply don’t know how to implement this:

<input type=‘‘file’’ accept=‘‘image/*’’ id=‘‘file-input’’>

into the AppStudio IDE

If you want more infos about media capture in webapp, see here:

https://addpipe.com/blog/correct-syntax-html-media-capture/
https://www.w3.org/TR/html-media-capture/

Using the getUserMedia API:

https://www.htmlgoodies.com/html5/mobile/taking-photos-from-your-html5-web-apps.html

Did you try the Camera sample?

It uses the Camera control:
http://wiki.nsbasic.com/Camera

Under the covers, this control uses many of the techniques you’ve researched.

Too bad, I didn’t see this example! I just checked under ‘2. Features/Device Features’ and there was only the GetUserMediaCamera example.

Next time I’ll use the built in search field in the examples window. I promise :slight_smile:

The camera example is working great. That is what I am looking for!

Btw… the BASIC example is in JavaScript though…

And still I’d like to know how to “tweak” an Object in the AppStudio IDE to have the parameter accept:

<input type="file" accept="image/*" id="file-input">

Here is the code in BASIC:

' This sample lets you get a picture from the camera or the Photo Library

rotation = 0

Function btnMail_onclick()
  location = "mailto:" & encodeURI("myaddress@yahoo.com") & "?subject=" & encodeURI("My Great Photo") & "&body=" + "<img src='" & PictureBox1.toDataURL() & "'/>"
End Function

Function btnRotate.onclick()
  Dim pb
  rotation = (rotation + 90) % 360
  If ((rotation % 180) != 0) Then 'portrait
    PictureBox1.resize(48, 100, 225, 300)
  Else 'landscape
    PictureBox1.resize(10, 128, 300, 225)
  End If
  
  pb = PictureBox1.getContext("2d")
  pb.save()
  pb.translate(PictureBox1.width / 2, PictureBox1.height / 2)
  pb.rotate(rotation * Math.PI / 180)
  imgObj = PictureBox1.img
  NSB.drawImageIOSFix(pb, imgObj, 0, 0, 0, 0, -150, -112, 300, 225)
  pb.restore()
End Function

To add an attribute like accept="image/*" to a control, add it to the attributes property in the Property Window if it has one.

Otherwise, do it at runtime with this statement:

myControl.setAttribute("accept", "image/*")

Thank you! good to know!

But, hmmm, there is one problem with your camera control: When I save the PictureBox as a file (upload with ajax)

fileContent = encodeURIComponent(PictureBox1.toDataURL())
req = Ajax(“phpUpload.php”, “POST”, “file=” & fileName & “&content=” & fileContent, done)

Then I get only the resolution of the picturebox, not of the actual image! How to resolve the full resolution of the image and save that jpg to server? Do I need to go the way I described above?

How are you determining this?

Have you checked what is in fileContent?

quite simple.

In the attached project I have a Camera control, PictureBox, Button and TextArea.

I take a picture with the camera. I put it into PitureBox1. then I’ll convert it to b64 with

TextArea1.text = PictureBox1.toDataURL()

If I decode the string at https://www.base64decode.org/ (without the start: data:image/png;base64,)
I’ll get a png that has exactly the same dimensions as my Picturebox 198x268.

That makes sense because I convert the picturebox - not the taken picture.So the question is: how to grap the full taken picture as a file?

WACamSmall.nsx (20.5 KB)

If your image is in a PictureBox, send the b64 string up to the server and have it create the file.

Yes. i did that with ajax. working. but the image dimensions are small. they have the same dimensions as the picturebox!

Well, I’ve send the pic to the server by ajax in data url format, I did not yet implement that the php decode the b64 before saving it as a file. but nevertheless…
the file that is stored on the server IS TOO SMALL. it has only the exact size of the picturebox - even though I set width and height to auto. but that didn’t help :frowning:

that’s why I’ve upload an example project that gives the b64 out directly without sending to server first as that is easier to test.

To give you a working example:

Go on Upload and open/record a picture.

After Upload it will be available on
pete-anne.de/webapp/AppStudio/UploadSmall/uploads/photo.b64

You’ll see that the decoded b64 image has the size 270x280px - same as the size of the PictureBox in AppStudio

Finally I got two worling samples.

One with your Camera1 approach:
http://pete-anne.de/webapp/AppStudio/CamCamera/

And one with the approach
http://pete-anne.de/webapp/AppStudio/CamInput/

The uploaded pictures in project one will always have the size of the picturebox1. :frowning:
In second project the uploaded picture dimensions equals the captured/choosen file dimensions. :slight_smile:

I think it is neccecary to add the functionality to the Camera1 object to retrieve the full size of captured images in order to avoid difficult approach 2

Upload.zip (87.1 KB)

1 Like

Thank you for posting this!

I’m playing with your samples, compliments.
I wonder why if i use a jpg file instead of cam.png it is not showed.
Any idea?

Can you explain more what you are doing?

ahah, sure
i want to click on a picture and open a picker to change just that picture on which i clicked without using plugings.

Right now I found what was the problem using another picture (in any format): the reason was that the program was trying to load that picture from the assets instead I had just put cam.jpg in the same folder of cam.png and of course it was not enough.
Sorry

suseday’s CamInput works great in the browser but if i build the apk with PhoneGap the Image2 is not loaded.

the instruction loading the image is
Image2.src = URL.createObjectURL(file);

in the browser URL.createObjectURL(file) contains something like:
“blob:http://127.0.0.1:63409/ca2d536c-e7b3-4c89-bb54-076c67ef46e4
and the related image is normally loaded

on the phone it contains something like:
“blob:file:///908d81ac-d05f-4be8-b578-f31901b533a5”
but no image is loaded

Does anyone know why?

If you’re running as a PhoneGap (or VoltBuilder) app, you need to use the plugin.

Apps work differently as native apps than as web apps - different rules apply.