Camera capture and line drawing

1

I want to write an app on Android to capture a photo from camera, then draw a circle onto the photo to highlight a part. Please suggest which control I can use.

2

I do this in one of my apps. All in Basic, sorry if you’re JS.

First to capture the image in a picturebox control you can use…

  1. Camera control and ensure the picturebox it loads to is the same aspect as your camera.
  2. Await navigator.mediaDevices.getUserMedia()

If using #2 then load a video stream, first I check camera permission with this

Async Function CheckCameraPermissions()
  devices = Await navigator.mediaDevices.enumerateDevices()
  ub = UBound(devices)
  BackCameraPermission = False
  FrontCameraPermission = False
  For r = 0 To ub
    '"Front Camera" = iOS; android includes the string "facing front" but is preceeded by "camera1 2", camera3 1" etc. Visible in the object displayed in Textarea1
    If devices[r].label = "Front Camera" Or InStr(devices[r].label,"facing front") > 0 Then FrontCameraPermission = True
    If devices[r].label = "Back Camera" Or InStr(devices[r].label,"facing back") > 0 Then BackCameraPermission = True
  Next r
  If FrontCameraPermission = False And BackCameraPermission = False Then
    NSB.MsgBox("App needs permission to use the camera. In iOS goto Settings-Safari-Camera and select 'Allow'","OK","Camera permission")
  End If
End Function

load the camera with this

Async Function LoadCamera()
  videoObj = {"video": {facingMode: "environment"}} 'replace 'environment' with 'user' to use front camera
  'Put video listeners into place
  stream = Await navigator.mediaDevices.getUserMedia(videoObj)
  Video1.srcObject = stream
  Video1.play()
  sessionStorage.CMS_CameraLoaded = "true"
End Sub

then take a photo with this

Function TakePhoto()
  w = PhotoPictureBox.Width
  h = PhotoPictureBox.Height
  CameraFlashLabel.show()
  PlayTone(500,50)
  pic = PhotoPictureBox.getContext("2d")
  emptyarr = []
  pic.imgQueue = emptyarr
  pic.drawImage(Video1, 0, 0, w, h)
  If Landscape = True Then
    w = 600
    h = 460
  Else
    w = 460
    h = 600
  End If
  pic2 = BigPictureBox.getContext("2d")
  emptyarr = []
  pic2.imgQueue = emptyarr
  pic2.drawImage(Video1, 0, 0, w, h)
  HideVideo()
  TakePhotoImage.hide()
  RetakeButton.show()
  PhotoOKButton.show()
  BigPictureBox.show()
End Function

You can kill the camera with this but it does stuff up trying to open the camera again

Function KillCamera()
  console.log("Kill camera()")
  Video1.srcObject = null
  Try
    tracks = stream.getTracks()
    ub = UBound(tracks)
    If ub >=0 Then
      For r = 0 To ub
        tracks[r].enabled = False
      Next r
    End If
  Catch err
  Finally 
  End Try
End Function

This is what I use to draw a circle on a picture

Function IEInjuryLocationPictureBox_ontouchstart(event)
  TouchAvailable = True
  y1=event.touches[0].pageY - 86 - IncidentEntryForm.Top
  x1=event.touches[0].pageX - 113 - IncidentEntryForm.Left
  console.log("ontouchstart:" & x1 & "," & y1 & event)
  IEInjuryLocationPointsTextBox.value =  IEInjuryLocationPointsTextBox.value & x1 & "_" & y1 & "|"
  DrawInjuryLocation(x1,y1)
End Function
'__________________________________________________'
Function DrawInjuryLocation(x1,y1)
  'console.log("x1:" & x1 & " y1:" & y1)
  pb = IEInjuryLocationPictureBox.getContext("2d")
  pb.fillStyle = vbYellow
  pb.strokeStyle = vbRed
  pb.lineWidth = 10
  pb.beginPath()
  pb.arc(x1,y1,20,0,Math.PI*2,True)
  pb.closePath()
  pb.stroke()
  'pb.fill()
End Function