Take picture - NO Phonegap


#1

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 https://developers.google.com/web/fundamentals/media/capturing-images/
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://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
https://googlechrome.github.io/samples/image-capture/index.html


#2

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.


#3

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


#4

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

#5

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/*")

#6

Thank you! good to know!


#7

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?


#8

How are you determining this?

Have you checked what is in fileContent?


#9

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)


#10

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


#11

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.


#12

To give you a working example:

Go on pete-anne.de/webapp/AppStudio/UploadSmall 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


#13

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)


#14

Thank you for posting this!