GetUserMediaCamera sample update

1

The BASIC sample project GetUserMediaCamera needs…

Video1.src = window.URL.createObjectURL(stream)

to change to…

Video1.srcObject = stream

to work. Online discussions suggest there has been a change in the browsers these days

2

Tried this here - nice find!

It will be in the next build of AppStudio - thank you!

1 Like
3

I can’t get this camera to work on iOS15. Plently of forums have discussion on it but nothing helpful to get it going.

4

What happens when you try? Are you running as a web app or native?

5

Webapp on iOS. Camera simply doesn’t start the stream. It asks for permission to use the camera but fails to start streaming camera feed.

6

Thanks - I’ll give that a try.

7

Bsommer’s FotoPNG.appstudio.zip works on iOS.

8

Here’s what works on my iPad.

'make sure you set media-src * blob:; in contentSecurityPolicy.
'app seems to work with empty csp
'Textarea1 is a what I use to function as a 'console' on my ipad

Function Main()
  CheckCameraPermissions()
  LoadCamera()
End If

Async Function CheckCameraPermissions()
  devices = Await navigator.mediaDevices.enumerateDevices()
  Textarea1.value = Textarea1.value & vbCRLF & "Devices:" & JSON.stringify(devices,null,vbTab)
  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

Async Function LoadCamera()
  context = PictureBox1.getContext("2d")
  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()
End Sub

Function SnapButton_onclick()
  context.drawImage(Video1,0,0,288,352) 'default ipad camera aspect. Not sure on front camera.
  imageb64 = PictureBox1.toDataURL()  
  Textarea1.value = Textarea1.value & vbCRLF & imageb64
  console.log(imageb64)
End Function
9

Thanks for posting this!

10

A little time saving tip.
Don’t try and stop the camera in Javascript.
I was looping through stream.gettracks() for each track.stop(). Basically you can’t restart the camera with the same ‘stream’ variable. Known issue on a couple of stackoverflow posts.

A few hours of my life I won’t get back :wink:

11

Thanks for posting this tip!

12

Follow up to this when using in a webapp I found, for me, the app needs to be run in https, not http, to make the camera work.