Téléchargement de vidéo sur YouTube et Vimeo avec le composant du thème

[ti0]

Ce nouveau composant de thème permet le téléchargement de vidéos depuis l’éditeur Discourse vers YouTube et Vimeo. Pour ceux qui connaissent déjà le plugin que j’ai développé récemment, la même fonctionnalité est désormais disponible dans ce composant de thème, qui peut être ajouté à n’importe quel thème. Cela rend l’installation beaucoup plus simple et fonctionne exactement de la même manière que le plugin.

Fonctionnalités

Tous les membres du forum peuvent télécharger des vidéos sur Vimeo ou YouTube (les administrateurs peuvent choisir d’activer l’un, l’autre ou les deux).

Les administrateurs peuvent contrôler la confidentialité de l’affichage et de l’intégration des vidéos téléchargées sur Vimeo via les paramètres d’administration.

Les utilisateurs peuvent contrôler la confidentialité de l’affichage des vidéos téléchargées sur YouTube depuis la fenêtre de téléchargement.

Vous pouvez regarder une démonstration du plugin ici (tout est identique dans le composant, sauf pour la page des paramètres. La page des paramètres du composant se trouve sous Administration > Personnaliser > Composants > Téléchargement de vidéos) :

Discourse Video Upload Plugin with YouTube and Vimeo Demo

Configuration

Important : Pour les composants de thème, vous devez vous assurer d’activer le composant pour les thèmes utilisés sur votre instance (soit en cliquant sur Ajouter tous les thèmes, soit en choisissant les thèmes souhaités).

La configuration pour activer les téléchargements vers YouTube et Vimeo est répertoriée ci-dessous. Si vous préférez que quelqu’un le fasse pour vous, vous pouvez demander une assistance en me contactant, @ti0.

Pour les téléchargements vers YouTube

Les téléchargements vers YouTube vont vers le compte de l’uploadeur, contrairement aux téléchargements vers Vimeo qui vont vers un compte commun.

Voir les étapes

• Créez un compte et un projet sur https://console.developers.google.com

• Activez l’API YouTube Data v3

• Configurez l’écran de consentement OAuth pour les utilisateurs externes (sauf si tous les utilisateurs de votre forum Discourse appartiennent à une seule organisation Google).

• Configurez vos identifiants :

  • Créez un ID de client OAuth
  • Choisissez le type d’application Web
  • Ajoutez l’URL de votre instance Discourse dans la section Origines JavaScript autorisées

• Copiez uniquement l’ID de client généré

• Accédez à la page des paramètres du composant dans l’administration Discourse et collez l’ID de client dans le champ youtube api client id.

• Activez les téléchargements YouTube en activant ce paramètre : youtube upload enabled

• Ajustez les options de confidentialité d’affichage par défaut pour YouTube si nécessaire.

• Vous devriez maintenant pouvoir télécharger des vidéos directement depuis l’éditeur de sujets Discourse vers YouTube.

Pour les téléchargements vers Vimeo

Une fois que vous avez configuré le composant en suivant les étapes ci-dessous, tous les utilisateurs de la communauté pourront télécharger des vidéos vers votre compte Vimeo.

Vous êtes responsable des limites et de l’utilisation de votre compte Vimeo.

Voir les étapes

• Créez un compte et une application sur Vimeo Developers :
  https://developer.vimeo.com/apps/new

• Générez un jeton d’accès avec les autorisations de téléchargement

• Accédez à la page des paramètres du composant dans votre administration Discourse, ajoutez le jeton d’accès généré dans le paramètre vimeo api access token, puis enregistrez

• Activez les téléchargements Vimeo en activant le paramètre vimeo upload enabled.

• Ajustez les options de confidentialité d’affichage et d’intégration

  • Consultez cette page Vimeo pour les options de confidentialité : privacy.view et privacy.embed

• Vous devriez maintenant pouvoir télécharger des vidéos directement depuis l’éditeur de sujets Discourse vers Vimeo

Publication d’une vidéo

• Pour publier une vidéo, créez un nouveau sujet ou répondez à un sujet existant.

• Cliquez sur le nouveau bouton Télécharger vers une vidéo dans la barre d’outils de l’éditeur (l’icône vidéo). Ce bouton n’est visible que si vous avez activé YouTube ou Vimeo (ou les deux) dans les paramètres du plugin.

• Choisissez un fichier vidéo et modifiez les détails tels que le titre et la description, si vous le souhaitez.

• Cliquez sur le bouton Télécharger vers Vimeo ou Télécharger vers YouTube.

  • Les boutons affichés dépendent de l’activation des téléchargements YouTube / Vimeo (l’un, l’autre ou les deux).

  • Il affichera la progression du téléchargement, puis attendra que la vidéo termine le processus de transcodage.

  • La fenêtre modale restera ouverte jusqu’à ce que le transcodage soit terminé.

  • Une fois le transcodage terminé, le lien vidéo sera ajouté à l’éditeur (sauf en cas d’erreur de transcodage).

• Enregistrez le message, et votre vidéo pourra être consultée par tous les autres utilisateurs de la communauté
  (selon les options de confidentialité que vous avez sélectionnées).

Demandes de fonctionnalités

Vous pouvez demander des fonctionnalités supplémentaires ou une assistance en me contactant @ti0.

Contributions

Si vous avez trouvé ce composant de thème utile, veuillez envisager de faire un don au développeur via ce lien PayPal : PayPal.Me

Les contributions importantes et mineures sont également les bienvenues

Si vous souhaitez améliorer le composant / le plugin, les PR sont les bienvenues.

	Aperçu	Aperçu du créateur de thème
	Dépôt	discourse-video-upload
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau sur les thèmes Discourse ?	Guide pour débutants sur l’utilisation des thèmes Discourse

[Canapin (Coin-coin le Canapin)]

@ti0

Cela rend l’installation beaucoup plus simple et fonctionne exactement de la même manière que le plugin.

Le plugin sera-t-il alors abandonné ?

[ti0]

Pas pour le moment, mais je pense que ce sera beaucoup plus simple de simplement maintenir le composant thème. Je garderai le plugin pour l’instant, mais je recommande de migrer vers le composant thème.

[Don]

Merci @ti0 C’est encore une fois génial C’est beaucoup plus facile d’utiliser un composant de thème qu’un plugin.

Une question. Pouvez-vous ajouter ces textes à traduire ? Téléchargement, transcodage de la vidéo et le titre, la description, etc. des détails de la vidéo ? Merci !

[ti0]

@Don, tous les libellés du composant peuvent désormais être personnalisés

[Don]

Bonjour,

J’apprécie vraiment votre composant, merci encore de l’avoir créé.

Il a très bien fonctionné, mais nous rencontrons maintenant quelques problèmes
Parfois, une erreur se produit lors du transcodage vidéo (uniquement pour les fichiers mp4) : status.error.transcode. La vidéo est correctement téléchargée, mais elle n’apparaît que sur Vimeo et le lien n’est pas inséré dans le compositeur.

L’autre problème est que nous ne pouvons pas télécharger de fichiers mp4 depuis le navigateur Safari sur MacOS.

Est-il possible de résoudre ces problèmes d’une manière ou d’une autre ?

Merci pour votre réponse !

[ti0]

Bonjour @Don, merci d’avoir relevé ce cas limite sur Safari pour MacOS. Il semble s’agir d’un problème lié à Safari (une référence sur SO). J’ai corrigé ce problème dans le composant du thème ; une fois que vous l’aurez mis à jour et rafraîchi la page, vous devriez pouvoir télécharger des fichiers MP4 depuis Safari. Je viens de tester sur ma propre machine et cela fonctionne désormais.

En ce qui concerne les erreurs de transcodage, elles se produisent côté Vimeo ; nous ne pouvons rien faire de notre côté.

[Don]

Merci pour la correction rapide ! Maintenant, cela fonctionne parfaitement sur Safari

[Don]

Bonjour @ti0 ,

Il semble que le mécanisme de téléchargement Vimeo ait changé. Lorsque vous placez le lien dans l’éditeur du forum, Vimeo commence à convertir la vidéo. Par conséquent, la vidéo ne peut pas être intégrée et lue directement sur le forum car elle n’est pas encore prête. Merci pour votre aide !

[anon82467725]

@Don

L’autre problème est que nous ne pouvons pas télécharger de fichiers mp4 depuis le navigateur Safari sur MacOS.

Même chose ici, mais le problème semble maintenant affecter Mozilla Firefox sur toutes les plateformes.

Il y avait quelques autres problèmes survenus dans Mozilla Firefox, mais je devrai revenir sur ces problèmes pour fournir plus de précisions.

[Don]

Donc, je pense que le problème est le suivant. Sur Vimeo, il y a une section En attente de conversion après Téléchargement mais avant Conversion.

Dans le composant, il y a
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

Si je ne me trompe pas, cela signifie qu’après le processus de téléchargement, une requête est envoyée à Vimeo toutes les 10 secondes, ce qui explique pourquoi le processus d’attente se termine lorsque la vidéo est complète. Comme l’API Vimeo ne prend pas en charge les webhooks, etc., nous devons envoyer des requêtes périodiquement pour savoir si le processus de transcodage est toujours en cours ou s’il est terminé.

J’ai modifié cette valeur à 60 secondes pour nous, en attendant une meilleure solution ; cela devrait suffire pour que la plupart des téléchargements évitent la requête du processus d’attente. J’ai testé avec de petits fichiers (~10 Mo), des fichiers moyens (~500 Mo) et de gros fichiers (~2 Go).
Avec les petits fichiers, le temps d’attente est de quelques secondes (~4-5 s), pour les fichiers moyens c’est ~10-15 s, et pour les gros fichiers ~40-45 s. Je pense que cela dépend de la taille du fichier téléchargé.
Cela semble fonctionner, mais si le processus d’attente de conversion prend plus de 60 secondes, le lien sera collé comme auparavant. Si nous pouvions éviter ce processus d’attente, ce serait idéal.

[Zup]

Je préférerais que les uploads Vimeo aillent sur le compte de l’uploadeur plutôt que sur mon compte commun… est-ce possible ?

[linzo (Collins)]

@ti0 Je ne sais pas si c’est seulement moi, mais je pense que quelque chose ne fonctionne pas. Le téléchargement est bloqué à « Authentification » et l’erreur suivante s’affiche dans la console Chrome :

Certaines ressources sont bloquées car leur origine n’est pas répertoriée dans la Politique de Sécurité du Contenu (CSP) de votre site. La CSP de votre site est basée sur une liste blanche ; par conséquent, les ressources doivent figurer dans cette liste pour pouvoir être accessibles.

La Politique de Sécurité du Contenu d’un site est définie soit via un en-tête HTTP (recommandé), soit via une balise HTML meta.

Pour résoudre ce problème, procédez comme suit :

1. (Recommandé) Si vous utilisez une liste blanche pour `'script-src'`, envisagez de passer d'une CSP de type liste blanche à une CSP stricte, car les CSP strictes sont plus robustes face aux attaques XSS. Consultez la procédure pour définir une CSP stricte.

2. Ou vérifiez attentivement que toutes les ressources bloquées sont fiables ; si c'est le cas, ajoutez leurs sources à la CSP de votre site. ⚠️N'ajoutez jamais une source à la CSP de votre site si vous ne lui faites pas confiance. Si vous ne faites pas confiance à la source, envisagez d'héberger les ressources sur votre propre site.

RESSOURCES CONCERNÉES
https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu`

bloqué script-src-elem api.js:12

[ti0]

@linzo, il s’agit d’un problème CSP, sans aucun lien avec le composant de thème. Veuillez consulter les informations sur la CSP de Discourse ici : Mitigate XSS Attacks with Content Security Policy

@Zup

Je préférerais que les uploads Vimeo soient attribués au compte de l’uploadeur plutôt qu’à mon compte commun… est-ce possible ?

@Zup, il s’agit d’une demande de fonctionnalité supplémentaire. Bien sûr, c’est possible, mais cela représente un travail supplémentaire qui devra être payé si vous souhaitez sa mise en œuvre. Faites-moi savoir si vous le souhaitez.

@Don

Donc la vidéo ne peut pas être intégrée dans un onebox et lue sur le forum car elle n’est pas prête.

Désolé pour la réponse tardive – oui, il y a un processus de transcodage après l’upload, et la boîte de dialogue d’upload l’affichera avant d’intégrer la vidéo. De mon côté, cela fonctionne comme prévu. Il attend que le transcodage soit terminé, et ce n’est qu’alors qu’il ferme la boîte de dialogue et intègre la vidéo. Voici une démonstration :

[debryc (Deborah Chang)]

Je suis vraiment enthousiaste à l’idée du potentiel de ce composant de thème. Ce composant fonctionne-t-il également sur mobile ? Autrement dit, si je suis sur mon téléphone, puis-je télécharger une vidéo depuis ma bibliothèque de photos ?

J’ai essayé de le visualiser dans l’aperçu du Créateur de thèmes et j’ai reçu un message d’« Accès refusé ».

[Don]

Bonjour Deborah,

Nous l’utilisons sur notre forum avec des uploads Vimeo, et cela fonctionne très bien sur tous les appareils. Le processus de sélection est le même que pour Discourse, mais après avoir sélectionné la vidéo, vous devez cliquer sur le bouton « uploader Vimeo » ou « uploader YouTube » pour lancer le téléchargement.

[debryc (Deborah Chang)]

Ton forum est-il public ? Pourrais-je jeter un coup d’œil ? J’aimerais beaucoup le voir en action ! Quelle est l’URL ?

[davidkingham]

Cela fonctionne parfaitement ! Ce serait sympa de pouvoir uploader les vidéos dans un dossier spécifique sur Vimeo, afin de séparer les uploads des utilisateurs des miens. Merci pour cela !

[ti0]

Contente que cela vous plaise Si vous êtes prêt à contribuer à cette demande de fonctionnalité, je peux l’implémenter ou vous pouvez soumettre une PR, faites-le-moi savoir.

[debryc (Deborah Chang)]

Les vidéos peuvent-elles être sous-titrées automatiquement et les sous-titres affichés par défaut ? C’est vraiment important pour nous en matière d’accessibilité.