Camera Component

Feature Requests
1

It would awesome to patch in a webcam or mobile device camera and save an image!

2

Hey @alex-westreich, what’s the exact use case here? I believe we have some scooter rental companies that use a barcode scanner keyboard for iOS to read barcodes from scooters when they arrive at the repair shop.

3

I was thinking about barcodes originally, and thought “Oh well you could probably write one using the camera component” and then realized that there isn’t one already. I think it would be a useful feature, for check in desk/employee badges, apps created specifically for company events, record keeping and recording.

4

@alex-westreich while we don’t have a camera component, if you use a File Picker component on mobile (at least on iOS) you will have the option to take a photo or video. Check out this public demo I just put together:
https://abt.tryretool.com/embedded/public/e65100bc-70eb-4a4b-9c01-ad3203cc0327
Here’s a screenshot from my iPhone demoing the native iOS support.

5

…and here’s what it looks like after you take the photo – thanks to @dvdhsu for modeling! This app simply displays the photo data but you could do anything you’d like with the image.

6

that looks very good. I need the same feature too from the webcam as i’m capturing quality control information and need to store the images.

So that image on the phone or tablet allowed a capture image from the built in camera.

What is the next step to using that now? How do store it?

7

Hi @Martin_Cahill! I don’t think there’s any way to get the same functionality on a webcam. This works with mobile, because iOS or android allow you to use the camera to supply a newly created image to upload. On desktop, we aren’t able to get device permissions from within the sandboxed JS. So this would still stand as a feature request for that situation!

8

I can confirm your app works in Android.

9

Hello, Looks like this thread was never updated from when permissions to access the webcam were enabled in Retool. Here's a quick demo app (source: https://usefulangle.com/post/352/javascript-capture-image-from-camera) of webcam capture via our custom component for anyone interested. We'll post back when a camera widget is released.
Camera test.json

10

Hi. Tried adding a custom component with this JSON as model and your sample JS/HTML. When clicking on Start Camera there is no response. Any thoughts on further troubleshooting?

11

Hey @ChrisV! It looks like it's working for me. If you import the JSON app shared by Amanda above instead of just copying the JS/HTML code, does it work for you?

Just in case you're curious about what it's supposed to look like, I attached a screen recording of the app in action :slight_smile:

Screen Recording 2023-06-28 at 5.13.10 PM.mov

12

Thanks @victoria . Not exactly sure what you mean by import the JSON app. Could you provide your Model and Iframe Contents for customComponent1?

13

Ah, my apologies! You can import app JSON files (like the one shared by Amanda) into your own org :slight_smile:

https://docs.retool.com/docs/import-export-apps

Here's the iFrame code:

<html>

<head>
  <script src="https://cdn.tryretool.com/embed.js"> </script>
  <script>
    let camera_button = document.querySelector("#start-camera");
    let video = document.querySelector("#video");
    let click_button = document.querySelector("#click-photo");
    let canvas = document.querySelector("#canvas");

    camera_button.addEventListener('click', async function() {
      try {
        let stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: false
        });
        video.srcObject = stream;
      } catch (error) {
        alert(`${error.name}`)
        console.error(error)
      }
    });

    click_button.addEventListener('click', function() {
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      let image_data_url = canvas.toDataURL('image/jpeg');

      // data url of the image
      console.log(image_data_url);
    });
  </script>
</head>

<body>
  <button id="start-camera">Start Camera</button>
  <button id="click-photo">Click Photo</button>
  <br/>
  <video id="video" width="320" height="240" autoplay></video>
  <canvas id="canvas" width="320" height="240"></canvas>


</body>

</html>

And the model is just

{}

Let me know how this works for you!

14