Add video recorder to form submission

Custom Coding
1

I’m building an app where visitors will submit a personal video as part of their submission form. As Softr doesn’t have a video recording feature or integration, I have used an embedding code from Ziggeo. However, I’m not able to have the recorder as part of the form, so I added a separate block for that. Now my challenge is tagging the submitted video with a value from the submitted form, so the video will be associated with the person submitting the form.
The question is, does Softr have the capability to grab the fields from the form and fire an API call to add the tags to the video?

If the above is not the way to go, does anyone have any other ideas?

2

@TJ-Pitchstr I think this might be a bit of a coding use case. A code that listens on video end event grabs the link and adds into a form as a new field ?

3

Yes! If that will save the link to the video in the corresponding record in Airtable like the rest of the fields of the form.
Another way to go would be to keep the video recorder in a separate block and tag the video with an identifier value (like email) from the form, so it can be recalled on another page of the app as one set of information.
But I think the first option would look much better

4

+1 interested in this. Use case is a AI project, where we are collecting recordings of people.

5

I have done some progress on the above. By embedding the Ziggeo recorder in my page, I was not able to tag the video with a unique identifier to recall it and play it on other pages, so I did the following:
I created an automation in Airtable where once a form is submitted from Softr, an email goes to the user containing a custom link (containing the Record ID) to a landing page in Ziggeo, where the user records a video and it is automatically tagged with the Record ID.
I am now working with the Ziggeo team to build a code that reads the Record ID on the list-details page and fetch the corresponding video to be displayed along with the rest of the information from the original form.

If anyone has a better idea how to build this flow, I’m open to suggestions. The embed codes are as follows:

This goes into the Header Section of the app:

<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 is the embed code for the recorder:

<ziggeorecorder ziggeo-recordingwidth="1280" ziggeo-width="640" ziggeo-height="360" ziggeo-recordingheight="720" ziggeo-countdown="5"></ziggeorecorder>

And this is for the player:

<ziggeoplayer ziggeo-video="_sample_video" ziggeo-width=320 ziggeo-height=180 ziggeo-theme="modern" ziggeo-themecolor="red"> </ziggeoplayer>

I look forward to your ideas.

1 Like