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 dynamic video link’);