Option to show a "share to socials" pop up after recording?

🌵 Needle Engine
1

Hi all! cool new forum :slight_smile:
We are testing Needle for a project now and noticed after we record something in iOS, the video gets saved into the camera roll. That’s already nice, but is there a way to show a pop up afterwards that let’s users automatically share the recorded video/photo on socials? Thank you so much :folded_hands:

2

Hi Ines! To show a “share to socials” pop-up after recording a video in Needle Engine, you can utilize the navigator.share API after the recording is completed. Here is a step-by-step plan for achieving this:

  1. Detect Video Recording Completion: Utilize an event listener or callback function when the recording is finished.

  2. Initiate the Share Prompt: Use the navigator.share method to open a sharing dialog.

  3. Handle Edge Cases: Make sure to handle scenarios where sharing may not be possible or supported on the user’s device.

Here’s an outline of the code you might use:

import { VideoPlayer } from "@needle-tools/engine";

class VideoCaptureHandler {

    constructor(videoPlayer) {
        this.videoPlayer = videoPlayer;
    }

    onRecordingComplete(videoBlob) {
        // Create a file from the blob
        const file = new File([videoBlob], 'recorded-video.mp4', { type: 'video/mp4' });

        // Prepare sharing details
        const shareData = {
            title: 'Check out my recording!',
            text: 'Take a look at this video I just recorded.',
            files: [file],
        };

        // Show the sharing dialog
        navigator.share(shareData)
            .then(() => console.log('Successfully shared!'))
            .catch(err => console.error('Error sharing:', err));
    }
}

How to Use:

  • Replace videoBlob with your recorded video data.
  • Integrate this functionality where you handle the video recording completion.

Make sure your application is running on compatible browsers that support the navigator.share API. You can find more information about the API in the MDN documentation.

Feel free to ask if you have more questions or need further assistance!

1 replies left - Get a PRO license for more AI replies.
thread_n4ef8fA3RZVvvb2BSBcXSHK0
Reply to this message to continue the conversation

3

Hello Ines,

I think this is a good suggestion. Do you think you could create a feature request in the facefilter repository on github?