How to generate thumbnail by uploading video or video url

[arham.bubbledev.1]

function createThumbnailFromVideo(videoUrl) {
const video = document.createElement(‘video’);
video.crossOrigin = ‘anonymous’; // Handle cross-origin issues
video.src = videoUrl;
video.preload = ‘metadata’; // Load only metadata to speed up

video.addEventListener('loadedmetadata', () => {
    // Ensure the video has loaded metadata (dimensions)
    video.currentTime = 0; // Jump to the start of the video

    video.addEventListener('seeked', () => {
        // Create a canvas to draw the video frame
        const canvas = document.createElement('canvas');

        // Resize to reduce the URL length
        const scaleFactor = 0.5; // Adjust this value to control the size
        canvas.width = video.videoWidth * scaleFactor;
        canvas.height = video.videoHeight * scaleFactor;

        const context = canvas.getContext('2d');

        // Draw the video frame onto the canvas
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        // Convert the canvas to a base64-encoded image
        const imageDataUrl = canvas.toDataURL('image/jpeg', 0.7); // Adjust quality (0.7 is 70%)
        console.log('Image Data URL:', imageDataUrl);

        // Return the base64 image to Bubble
        bubble_fn_createThumbnailFromVideo(imageDataUrl);
    });

    // Force the video to seek to trigger the seeked event
    video.currentTime = 0.5;
});

video.addEventListener('error', (e) => {
    console.error('Error loading video:', e);
    bubble_fn_createThumbnailFromVideo(null); // Return null if there's an error
});

}

// Example usage
createThumbnailFromVideo(’ Your video URL ');

1 - On Editor Page ** Use function Name " createThumbnailFromVideo " in your jstobubble element on editor set its type to image.
2 - On Workflow Page ** Use first action run javascript on Any Button Trigger and add the above code inside it at the end give your dynamic url of video. After that use event jstobubble and get the return value from it and you can save it.

Here is custom Javascript code to generate thumnail from uploaded video directly

[arham.bubbledev.1]

function createThumbnailFromVideo(videoUrl) {
const video = document.createElement(‘video’);
video.crossOrigin = ‘anonymous’; // Handle cross-origin issues
video.src = videoUrl;
video.preload = ‘metadata’; // Load only metadata to speed up

video.addEventListener('loadedmetadata', () => {
    // Ensure the video has loaded metadata (dimensions)
    video.currentTime = 0; // Jump to the start of the video

    video.addEventListener('seeked', () => {
        // Create a canvas to draw the video frame
        const canvas = document.createElement('canvas');

        // Resize to reduce the URL length
        const scaleFactor = 0.5; // Adjust this value to control the size
        canvas.width = video.videoWidth * scaleFactor;
        canvas.height = video.videoHeight * scaleFactor;

        const context = canvas.getContext('2d');

        // Draw the video frame onto the canvas
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        // Convert the canvas to a base64-encoded image
        const imageDataUrl = canvas.toDataURL('image/jpeg', 0.7); // Adjust quality (0.7 is 70%)
        console.log('Image Data URL:', imageDataUrl);

        // Return the base64 image to Bubble
        bubble_fn_createThumbnailFromVideo(imageDataUrl);
    });

    // Force the video to seek to trigger the seeked event
    video.currentTime = 0.5;
});

video.addEventListener('error', (e) => {
    console.error('Error loading video:', e);
    bubble_fn_createThumbnailFromVideo(null); // Return null if there's an error
});

}

// Example usage
createThumbnailFromVideo(‘Your dynamic video link’);