Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
Webhooks automate workflows and integrate external services into a CMS, triggering specific processes when events occur. In video processing, webhooks can initiate tasks like transcoding, thumbnail generation, or analytics collection upon video upload or metadata updates. By integrating webhooks for video processing, a CMS can automatically manage video files through the entire lifecycle, from upload to publishing. Setting Up Webhooks in CMS Webhooks allow your CMS to communicate with other systems when specific events occur. For video processing, webhooks are triggered after a video is uploaded or metadata is updated. These webhooks can notify external services such as transcoding servers, content delivery networks (CDNs), or cloud storage services to start processing the video. Example of Setting Up a Webhook in CMS Here’s an example of setting up a webhook in Strapi , a popular headless CMS, to trigger a video processing service once a video is uploaded: module.exports = { lifecycles: { async afterCreate(result) { if (result.mime && result.mime.startsWith('video/')) { const videoProcessingUrl = 'https://your-video-processing-service.com/process'; await fetch(videoProcessingUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ videoId: result.id, videoUrl: result.url, metadata: result.metadata, }), }); } }, }, }; Explanation: After Video Upload : This code listens for a new video upload (afterCreate) in Strapi and checks if the uploaded file is a video. Triggering Video Processing : Once a video is detected, a webhook is triggered to a video processing service with the necessary video metadata and any other relevant data. Processing Video with Webhooks Once a video is uploaded, the webhook notifies the processing service to start working on the video. Common processing tasks include Transcoding Transcoding is the process of converting video files into various formats and bitrates for compatibility across different devices and network conditions. This ensures that videos can be played smoothly on devices with varying screen sizes, resolutions, and internet speeds. When setting up a video processing service, you can specify different video formats (e.g., MP4, WebM, MKV) and quality levels (e.g., 1080p, 720p, 480p) to serve a variety of use cases. For example, a video might be transcoded into H.264 format for broad compatibility or H.265 (HEVC) for more efficient compression while maintaining video quality. const transcodingServiceUrl = 'https://transcoding-service.com/api/start'; const videoId = '12345'; // Example video ID fetch(transcodingServiceUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ videoId: videoId, format: 'mp4', quality: 'high', callbackUrl: `https://your-cms.com/webhooks/complete/${videoId}`, }), }) .then(response => response.json()) .then(data => { console.log('Transcoding started:', data); }) .catch(err => { console.error('Error triggering transcoding:', err); }); Explanation : Transcoding Request : The code sends a POST request to an external transcoding service (https://transcoding-service.com/api/start) to initiate the transcoding process for the uploaded video. The request body contains important details such as the video ID , format (e.g., MP4), quality (e.g., high), and the callback URL to notify the CMS when the process is complete. Callback URL : The callbackUrl is where the transcoding service will notify the CMS after completing the video processing. This URL points to a specific endpoint in the CMS to update the video’s status or trigger the next workflow step. Error Handling : The .catch() block ensures that any error encountered while sending the request is logged for troubleshooting. Thumbnail Generation Thumbnails provide a preview of the video content and can be used for listings, previews, and other visual elements within a CMS. This process usually involves extracting a frame from the video at a specific timestamp or generating an image from keyframes. A video processing service can be configured to automatically generate a thumbnail once the video is uploaded. This can be achieved by defining specific parameters (e.g., timestamp, frame rate) to capture the appropriate preview image. For example, a video processing service might allow you to specify the time at which the thumbnail should be generated: fetch('https://video-processing-service.com/generate-thumbnail', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ videoId: videoId, timestamp: '00:00:10', // Generate thumbnail at the 10-second mark callbackUrl: `https://your-cms.com/webhooks/thumbnail/${videoId}`, }), }) .then(response => response.json()) .then(data => { console.log('Thumbnail generation started:', data); }) .catch(err => { console.error('Error triggering thumbnail generation:', err); }); Explanation : Thumbnail Request : This code sends a POST request to the video processing service, asking it to generate a thumbnail from the video at a specific timestamp (in this case, 00:00:10 — the 10-second mark). Timestamp : The timestamp indicates the specific time in the video where the thumbnail should be captured. Callback URL : Similar to the transcoding request, the callbackUrl specifies where the CMS should be notified once the thumbnail generation is complete, allowing the CMS to update the video metadata with the generated thumbnail’s URL. Error Handling : Again, any errors that occur during the request are caught and logged for troubleshooting. Analytics Collection Video processing webhooks can also gather engagement metrics from video playback. These metrics, such as play, pause, and completion rates, can be tracked to measure user interaction and engagement with the video content. For example, webhooks can be configured to collect data after each playback session, sending the data to an analytics platform for reporting and analysis. The webhook would trigger once the video starts, and periodically, during the playback, to capture interactions like view count , time spent watching , or pause/play actions . Here's an example of a webhook request that collects analytics data: const analyticsServiceUrl = 'https://your-analytics-service.com/track'; fetch(analyticsServiceUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ videoId: videoId, eventType: 'play', // Can be 'pause', 'play', 'complete', etc. playbackDuration: 30, // In seconds userId: 'user123', }), }) .then(response => response.json()) .then(data => { console.log('Analytics data sent:', data); }) .catch(err => { console.error('Error sending analytics data:', err); }); Explanation : Analytics Request : This code sends a POST request to an analytics service, tracking events such as play, pause, and completion of the video. The eventType could be set to different states (e.g., 'play', 'pause', 'complete') based on the user’s interaction with the video. Tracking Metrics : The body of the request includes playback duration , which indicates how long the user has watched the video, and userId to track the specific user interacting with the video. Error Handling : As with the previous requests, this code includes a .catch() block to log any issues that arise during the request. Post-Processing Workflow After a video is processed (e.g., transcoded, thumbnail generated, or analytics data collected), the webhook system can trigger additional workflows such as: Publishing the video for public access. Notifying content managers or stakeholders that the video is ready for consumption. Archiving the video if it’s no longer actively used or needs to be stored for historical purposes. The external service that processes the video (such as transcoding or thumbnail generation) can use the callback URL to inform the CMS that the video is now ready for these actions. The CMS can then update the video's status or trigger further workflows automatically. For instance, once transcoding is complete and the video has been converted into multiple formats, the CMS can automatically update the video’s status to 'ready for streaming' : module.exports = { lifecycles: { async afterUpdate(result) { if (result.status === 'processed') { const updatedVideo = await strapi.services.video.update( { id: result.id }, { status: 'ready', processedUrl: result.processedUrl } ); } else if (result.status === 'failed') { // Handle failure console.error('Video processing failed:', result.errorMessage); await strapi.services.video.update( { id: result.id }, { status: 'failed' } ); } }, }, }; Explanation : After Video Processing : This code listens for updates from the video processing service. If the processing is successful (status === 'processed'), the CMS updates the video’s status to ready and includes the processed video URL (processedUrl). Failure Handling : If processing fails (status === 'failed'), the CMS updates the video’s status to failed and logs the error message for reference. Handling Webhook Responses for Video Status Updates After video processing is complete (such as transcoding or thumbnail generation), the external service will send a response to the CMS. This response typically contains details like the processed video URL, metadata, or success/failure status. Here’s an example of handling the response from a video processing webhook: module.exports = { lifecycles: { async afterUpdate(result) { if (result.status === 'processed') { // Video is processed, update the video status in the CMS const updatedVideo = await strapi.services.video.update( { id: result.id }, { status: 'ready', processedUrl: result.processedUrl } ); } else if (result.status === 'failed') { // Handle failure console.error('Video processing failed:', result.errorMessage); await strapi.services.video.update( { id: result.id }, { status: 'failed' } ); } }, }, }; Explanation: After Video Processing : Once the video processing service sends a response indicating whether the video has been successfully processed or failed, the CMS updates the video status accordingly. Error Handling : If the video processing fails, the status is updated to reflect the failure, and an error message is logged. Security Considerations for Webhooks Since webhooks involve communication between external services, ensuring security is paramount. Here are a few best practices for securing video processing webhooks: 1. Signature Verification To ensure the authenticity of incoming webhook requests, use a shared secret or API key to verify the request's source. For example, you can validate the signature of the request using HMAC or a similar method. Example : const crypto = require('crypto'); const secret = 'your_shared_secret'; // Verify webhook signature const verifySignature = (req) => { const signature = req.headers['x-signature']; const computedSignature = crypto .createHmac('sha256', secret) .update(req.body) .digest('hex'); if (signature === computedSignature) { return true; } return false; }; // Check if the signature matches before processing the webhook app.post('/webhook', (req, res) => { if (verifySignature(req)) { console.log('Webhook verified, processing...'); res.status(200).send('Success'); } else { res.status(400).send('Invalid signature'); } }); Explanation: Signature Verification : This code snippet ensures that the incoming request is from a trusted source by comparing the signature sent by the webhook service with the computed signature. 2. Limit Access by IP Another security measure is limiting access to your webhook endpoint by IP address. You can configure your server or API gateway to only accept requests from known IP addresses, adding an additional layer of security. Example : Limiting IP Addresses in an Express.js App const allowedIps = ['203.0.113.1', '198.51.100.2']; app.post('/webhook', (req, res) => { const clientIp = req.connection.remoteAddress; if (!allowedIps.includes(clientIp)) { return res.status(403).send('Forbidden'); } // Process the webhook if IP is allowed res.status(200).send('Success'); }); Explanation: IP Whitelisting : This code ensures that only requests from specific IP addresses can trigger the webhook, making it harder for unauthorized services to interfere with the video processing workflow.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
