Coding Easter Egg: Recording video to softr form

Hi,

I have a project coming up where I will need users to log into a softr application and record 40 short videos of themselfes. The videos are hand face gestures used for training AI.

I would like to create a way for the users to log in, and in 1 column see the gesture they need to do, and on the other side, record the video.

Something like this above.

Does anyone has any ideas on how this can be done, I did start on a script to allow users to record, and when they stop the recording, the recording is uploaded to the softr custom form, but this seems not to work.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RecordRTC Video Recorder</title>
    <style>
        #startRecording, #stopRecording, #downloadRecording {
            margin: 5px;
        }
    </style>
</head>
<body>
    <video id="preview" autoplay playsinline></video>
    <button id="startRecording">Start Recording</button>
    <button id="stopRecording" disabled>Stop Recording</button>
    <button id="downloadRecording" disabled>Download Recording</button>

    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
    <script>
        const preview = document.getElementById('preview');
        const startRecording = document.getElementById('startRecording');
        const stopRecording = document.getElementById('stopRecording');
        const downloadRecording = document.getElementById('downloadRecording');

        let recordRTC;

        async function startCapture() {
            const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
            preview.srcObject = stream;

            recordRTC = RecordRTC(stream, { type: 'video' });
            recordRTC.startRecording();

            stopRecording.disabled = false;
            startRecording.disabled = true;
        }

        async function stopCapture() {
            await new Promise(resolve => {
              recordRTC.stopRecording(resolve);
            });

            preview.srcObject.getTracks().forEach(track => track.stop());
            stopRecording.disabled = true;
            downloadRecording.disabled = false;
        }

        function downloadCapture() {
            recordRTC.save('recorded-video.webm');
        }

        function loadRecordingToUploadField() {
          const uploadField = document.querySelector('#form1 input[type="file"]');
          if (uploadField) {
            const recordedBlob = recordRTC.getBlob();
            const file = new File([recordedBlob], 'recorded-video.webm', { type: 'video/webm' });

            // Create a DataTransfer object and add the file to it
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);

            // Set the files property of the upload input field to the DataTransfer object's files
            uploadField.files = dataTransfer.files;
          } else {
            console.error('Unable to find the upload field in the Softr form');
          }
        }

        startRecording.addEventListener('click', startCapture);
        stopRecording.addEventListener('click', async () => {
          await stopCapture();
          loadRecordingToUploadField();
        });
        downloadRecording.addEventListener('click', downloadCapture);
    </script>
</body>
</html>

I have been cracking my head around alternative ideas - the issue is that if the above solution works, Airtable max storage capacity of attachements is the second problem.

Any ideas are welcome:)

I have a recording issue also. I have used Ziggeo in the past but I’ve been struggling to make a smooth integration between Ziggeo and Softr. I was able to insert a Ziggeo video recorder on my page but my challenge is with tagging the video with the user info as it saves into the Ziggeo database. I’ll give you the codes to insert the recorder on your app, maybe you can figure out the rest.
This code is inserted in the App Settings - Custom Code - Header section:

<link rel="stylesheet" href="https://assets-cdn.ziggeo.com/v1-stable/ziggeo.css" />
<script src="https://assets-cdn.ziggeo.com/v1-stable/ziggeo.js"></script>
<script>
var app = new ZiggeoApi.V2.Application({  token: "a2a1e15573b927806054d7323f753dde", webrtc_streaming_if_necessary : true,     webrtc_on_mobile : true});
</script>

This code goes into the custom code block:
<ziggeorecorder ziggeo-recordingwidth="1280" ziggeo-width="640" ziggeo-height="360" ziggeo-recordingheight="720" ziggeo-countdown="5"></ziggeorecorder>

Let me know how it goes