[Forminator Pro] Record & Upload webRTC/HTML5 video in Forminator Pro

1

You can upload a picture. It would be great to add the ability to allow users to click a button, allow their camera/microphone, and record and upload a video (with the ability to set a time limit, for example, 3 minutes).

This would be a killer feature that would allow site owners to collect video testimonials, detailed explanations of their needs or support requests, etc…

Future versions could allow for screen capture. But not needed at first. Github has the code for webRTC as I have played around with it. This really would be a fantastic feature to add to Forminator Pro. Please give it serious consideration. Thank you.

  • Nithin Ramdas
    • Support Wizard

    Hi Jon ,

    The HTML5 and WebRTC is a specification and not a video format. Forminator at the moment only uses the file types supported by WordPress out of the box.

    In general, MP4, WebM, Ogg video formats should be able to play HTML 5 videos etc These video formats are supported out of the box in WordPress, so a user should be able to upload any video in such a format without any issue via the default “Upload” field in Forminator too.

    If you are looking more at live video chat functionality then I do get you, however, the feature drifts away from the basic functionality of how a default Form would work.

    However, I’ll let our team know regarding this feature request so that they are aware of your request and discuss its possibilities.

    Thanks for your feedback. Have a nice day ahead.

    Kind Regards,
    Nithin

  • Jon
    • Flash Drive

    Hi Nithin,

    I was referring to the ability to click a button in the form to provide the ability for someone to leave a video message (without the need for additional software or plugins) which the webRTC project allows. The result would be an MP4 file that would be uploaded via the form.

    Being able to record the file and then upload it, all within Forminator Pro, makes it much more likely for users to participate.

    Kind Regards,
    Jon

  • Jon
    • Flash Drive

    I am revisiting this post. The idea was to allow Forminator Pro users the ability to collect video testimonials. There are plenty of 3rd-party services charging for this functionality. It seems like adding the option to put a button in a form that would activate the user’s webcam/mic and allow them to record a video testimonial (2-minute maximum) is something that WP webmasters would use and would be another thing that set Forminator Pro apart from the rest. There are plenty of Github code projects that could provide a roadmap for doing this (which is why I mentioned the WebRTC), but as an example only. I do thank the developers for their consideration.

  • Luis Soriano
    • Ex Staff

    Hi Jon

    Hope you are doing fine!

    We really appreciate the additional comments. I will share this information with the development team as well, so they can evaluate and review. Keep in mind they need to consider the current features and the existing roadmap as well, implementing a feature like this may need to be put on hold meanwhile.

    Thanks for your interest on improving our products and services.

    Kind regards

    Luis

  • Alfredo Galano Loyola
    • Staff

    Hello, Jon and other members interested in this feature.
    I hope you are doing well today.

    I see the request and fell in love with it, so, I proceed to create a custom code as a workaround to achieve it.

    It’s still under development, and still needs to be tested, especially on MacOS + Safari

    Here is a link to test it: https://myblank.tempurl.host/video-testimonial/

    A video about how it works in its current state: https://youtu.be/gSecs2X29JM

    Please, it’s really important to share the information on the fields, that will help a lot to identify issues on the “feature” and improve the performance and video quality.

    Use the Note field to add any feedback, improvement, recommendations, and what you want.

    Use it wisely, the test site is on the Bronze plan.

    I hope this answer makes all of you happy in the same way I feel while coding it.

    Kind regards,
    Alfredo

  • Jon
    • Flash Drive

    Hello Alfredo,
    Thank you for the well-wishes. I hope the same for you and yours.

    I have tested it using Chrome on both Windows 10 and Android 11. Would you like me to test using Firefox and Brave as well?

    I will see if I can test on Mac and Linux, although it may take a day or two to get to those computers.

    Thank you for your work on this!
    Jon

  • Julian
    • Click Here

    Nice Alfredo Galano Loyola

    Did you just put this together quickly on the side? It’s a very nice idea.

    Some thoughts:
    – Specify a custom upload folder path. You may not want to bloat the media library with many user uploaded videos.
    – When the recording is stopped, automatically provide a video preview of what was just recorded. The user may decide to discard the video and record another one instead.
    – I tried it on mobile (with cam and mic permissions denied) and got the generic “no webcam” error message. It may be good to have a custom error message for mobile, with instructions on how to allow access to the mic and cam.
    – I couldn’t get the cam preview to show up on my iPhone (latest iOS, Safari) while recording. It does record a video, which I was only able to see afterwards.
    – Perhaps for a future update, the ability to associate recorded vids with a user and an option to display their recorded vids in their user account for them to manage.

  • Alfredo Galano Loyola
    • Staff

    Hello Julian
    I hope you are doing well today.
    Thank you very much for testing it, and sorry for the delay in answering here.

    With the current approach, add two shortcodes on the page you want to use and add a specific class to the Input Field on Forminator Pro.

    – Specify a custom upload folder path. You may not want to bloat the media library with many user-uploaded videos.

    That could be achieved right now using custom code, I will try to integrate it into the current code or indicate how to use it for members that one us a custom path for video.

    – When the recording is stopped, automatically provide a video preview of what was just recorded. The user may decide to discard the video and record another one instead.

    Thanks for the suggestion it has a lot of sense, and that will be the priority now.

    – I tried it on mobile (with cam and mic permissions denied) and got the generic “no webcam” error message. It may be good to have a custom error message for mobile, with instructions on how to allow access to the mic and cam.
    – I couldn’t get the cam preview to show up on my iPhone (latest iOS, Safari) while recording. It does record a video, which I was only able to see afterward.

    Sadly, I don’t have access to an iPhone device. I will try to ask some friends to allow me their device to test while drinking some coffee or beer.

    – Perhaps for a future update, the ability to associate recorded vids with a user and an option to display their recorded vids in their user account for them to manage.

    That sounds like a great feature but will need a lot of work and based on my experience, I think it will only allow a list, basic edit, delete, and a link to create a new “video message”.
    Not sure if possible with the current approach (custom code as a mu-plugin), will need to study the way to achieve that.

    Kind regards,
    Alfredo

  • Jon
    • Flash Drive

    Hi Alfredo,

    I gave people who I know have other systems (Mac, Linux, etc…) your link but I don’t know if they tested it or not.

    At this point, is there any way I can get the feature so I can use it on my sites? I know that it is still in development, but what better way to really test it than to put it on a couple of active sites?

    Thank you,

    Jon

  • Luis Soriano
    • Ex Staff

    Hi Jon

    Hope you are doing well!

    Since this is still under development, it may not be ready to live sites yet. Some additional testing and verification may be required. However, I have shared your post with my peer in case he can provide further updates.

    Keep in mind the reply may take some considerable time, so I’d really appreciate your understanding.

    Kind regard

    Luis

  • Alfredo Galano Loyola
    • Staff

    Hello Jon
    I hope you are doing well today!

    Related to:

    I gave people who I know have other systems (Mac, Linux, etc…) your link but I don’t know if they tested it or not.

    It’s possible they visit the page and test the video recording but never submit the form, so, I never get alerted about the test.

    At this point, is there any way I can get the feature so I can use it on my sites? I know that it is still in development, but what better way to really test it than to put it on a couple of active sites?

    Please, kindly allow me some time to test the “feature” with the latest Forminator Pro release and prepare a detailed guide to apply to your forms.

    Best regards,
    Alfredo

  • Luis Soriano
    • Ex Staff

    Hi Jon

    Hope you are doing fine!

    Thanks in advance for your patience and understanding on this matter. Please take into account this is a custom solution and it will require some thorough testing, specially to make sure it is compatible with the latest releases of Forminator.

    As soon as we have an update our team will send a notification.

    Kind regards

    Luis

  • Alfredo Galano Loyola
    • Staff

    Hello Jon
    I hope you are doing well!

    I will share with you a Beta version of the add-on to record video from the browser using the camera and microphone on the device and submit the video using a Forminator Pro form.
    To work properly the site should have these plugins installed and activated.
    – Forminator Pro or Forminator.
    – Forminator Video Recorder(Add-on)

    The Forminator Video Recorder can be installed as a plugin from a ZIP file and will provide your site with a shortcode:
    [videorecorder]
    It will create a menu link that will lead you to a page with an explanation of how to use it.

    The add-on can work by itself to allow visitors to record videos and download them but will not be able to submit them to the site.

    It needs on the same page or post exist a Forminator form with one Upload Field.

    I recommend putting the Forminator Video Recorder shortcode first and then the Forminator form.
    [attachments are only viewable by logged-in members]
    The Upload Field on the form needs some specific settings to work with the videorecorder
    1- The Upload Field needs to use a specific CSS class:
    forminator-video-testimonial
    [attachments are only viewable by logged-in members]
    2- The Upload Field needs to be Required if the main goal of the form is to submit the video.
    3- The Upload Field by default is set to an 8 MB limit, increase it to a bigger value, depending on the camera quality and the time the video could be bigger than that limit.
    [attachments are only viewable by logged-in members]

    During the tests, a 2 minutes video using a Logitech C270 HD Webcam(720p) the size of the video was around 38.4 MB, so, if possible use 128 MB.

    Please, notice a lot of submissions could make the videos use a lot of storage on the server, and if the videos use all storage available could cause issues on the site.

    On the Form-> Behavior it’s not mandatory but could avoid a lot of issues if use the behavior to Hide Form or Redirect to the URL(using a Thanks page) to avoid the visitor resend again and again the same form.
    [attachments are only viewable by logged-in members]
    The buttons of the addon will take by default the style of the Theme, which could be customized using the CSS Class and IDs of those elements.
    [attachments are only viewable by logged-in members]

    I hope this add-on helps you and other members to achieve your goals.

    Best regards,
    Alfredo