Créateur de vidéos en fenêtre contextuelle Créez des vidéos en fenêtre contextuelle avec une vidéo superposée à une autre.

L'outil de création de vidéos en picture-in-picture charge deux fichiers vidéo dans des éléments HTML5 Video distincts. Un canevas est créé aux dimensions de la vidéo principale. Pendant la lecture, requestAnimationFrame dessine la vidéo principale comme arrière-plan complet du canevas, puis dessine la vidéo de superposition à la position et à la taille spécifiées en utilisant drawImage() avec des coordonnées de destination. Les deux vidéos se jouent simultanément. Le mélange audio utilise l'API Web Audio - les sources audio des deux vidéos sont connectées via des GainNodes à un MediaStreamDestination, permettant ainsi le contrôle du volume pour chacune. Le flux de canevas combiné et le flux audio mixé sont alimentés par MediaRecorder. La superposition peut avoir une bordure (dessinée via strokeRect) et des coins arrondis (via chemin de découpe). Les présélections de position calculent les coordonnées des coins avec un rembourrage configurable.