Code Iframe lecture impossible Peertube 2.4.0

Bonjour,

Je viens de mettre à jour nom instance Peertube de la version peertube-v2.2.0 vers peertube-v2.4.0.

Qu’est-il arrivé ? Nous venons de constater que le code IFRAM ne se lit pas dans un blog ou CMS avec URL cela fonctionne.

Lien qui fonctionne ICI avant la mise à jour de Peertube 2.2.0 " lecture du média avec un code ifram"

Lien qui ne fonctionne pas ICI après la mise à jour de Peertube 2.4.0 " pas de lecture du média avec une code ifram"

Lien vers le blog de test ICI

-Média ne fonctionne pas en ifram « ONE - Faire un cahier multimedia »
-Média qui fonctionne en ifram" Huron-double-tache-cognitive"

Je suis bloqué, pouvez-vous me dire si d’autres personnes rencontrent le même problème ?

Merci d’avances pour vos réponses.

Je n’ai compris d’où viens l’erreur, mais je la reproduit bien chez moi sur mon firefox. Je donne quelques détails supplémentaires :

J’ai ça dans ma console :
Firefox ne peut établir de connexion avec le serveur à l’adresse wss://tube.ac-amiens.fr/tracker/socket.
Mais ça n’a pas l’air lié au problème. Je l’ai aussi bien avec les iframes qu’en allant directement ici : https://tube.ac-amiens.fr/videos/watch/2d9b293c-f765-4239-871a-6b61347ba79c

Concernant l’iframe, j’ai ça comme erreur dans ma console, que je n’ai pas quand je suis sur l’instance peertube pleine page :

Object { id: "https://tube.ac-amiens.fr/static/streaming-playlists/hls/2d9b293c-f765-4239-871a-6b61347ba79c/master.m3u8+V0+1", url: "https://tube.ac-amiens.fr/static/streaming-playlists/hls/2d9…a79c/2d9b293c-f765-4239-871a-6b61347ba79c-480-fragmented.mp4", masterSwarmId: "https://tube.ac-amiens.fr/static/streaming-playlists/hls/2d9b293c-f765-4239-871a-6b61347ba79c/master.m3u8", masterManifestUri: "https://tube.ac-amiens.fr/static/streaming-playlists/hls/2d9b293c-f765-4239-871a-6b61347ba79c/master.m3u8", streamId: "V0", sequence: "1", range: "bytes=220703-434405", priority: 1, requestUrl: "https://tube.ac-amiens.fr/static/streaming-playlists/hls/2d9…a79c/2d9b293c-f765-4239-871a-6b61347ba79c-480-fragmented.mp4", responseUrl: "https://tube.ac-amiens.fr/static/streaming-playlists/hls/2d9…a79c/2d9b293c-f765-4239-871a-6b61347ba79c-480-fragmented.mp4" }
 TypeError: window.crypto.subtle is undefined
    F https://tube.ac-amiens.fr/client/standalone/videos/10.2111a1395a82b22a538a.chunk.js:1
    s https://tube.ac-amiens.fr/client/standalone/videos/video-embed.2111a1395a82b22a538a.bundle.js:2
    promise callback*l https://tube.ac-amiens.fr/client/standalone/videos/video-embed.2111a1395a82b22a538a.bundle.js:2
    i https://tube.ac-amiens.fr/client/standalone/videos/video-embed.2111a1395a82b22a538a.bundle.js:2
    i https://tube.ac-amiens.fr/client/standalone/videos/video-embed.2111a1395a82b22a538a.bundle.js:2
    F https://tube.ac-amiens.fr/client/standalone/videos/10.2111a1395a82b22a538a.chunk.js:1
    segmentDownloadFinished https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    setupXhrEvents https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    setupXhrEvents https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    download https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    processSegmentsQueue https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    load https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    loadSegments https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    loadSegment https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    load https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    load https://tube.ac-amiens.fr/client/standalone/videos/2.2111a1395a82b22a538a.chunk.js:2
    onFragLoading https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    onEventGeneric https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    onEvent https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    emit https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    trigger https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    _loadFragment https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    _fetchPayloadOrEos https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    _doTickIdle https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    doTick https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    tick https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    onFragLoaded https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    onEventGeneric https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    onEvent https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    emit https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    trigger https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
    loadsuccess https://tube.ac-amiens.fr/client/standalone/videos/11.2111a1395a82b22a538a.chunk.js:2
7.2111a1395a82b22a538a.chunk.js:1:11304

Je note aussi que dans la console réseau de firefox, je n’ai pas le même initiateur pour les requêtes.
Dans l’iframe :


Sur l’instance :

Manquerait-il un polyfills dans le JS compilé pour les vidéos intégrées ?

Merci pour ta réactivité.

J’ai ce type d’erreur dans les logs de Peertube:

2020/11/08 17:54:20 [error] 1056#1056: *361882 connect() failed (111: Connection refused) while connecting to upstream, client: 194.254.103.142, server: tube.ac-amiens.fr, quest: « OPTIONS / HTTP/1.0 », upstream: « http://[::1]:9000/ »
Lien vers un signalement ICI

L’erreur n’a rien à voir avec le lien, par contre je serais intéressé de voir :

  • la commande que tu as utilisé pour avoir ces log
  • ta configuration Nginx

Bonjour,

La dernière vidéo utilise HLS qui requière l’API crypto du navigateur. Or cette API semble seulement disponible si le site est en HTTPS. Le blog étant en HTTP, ça pourrait venir de là… Étrange cependant, parce que l’Iframe est bien en HTTPS :thinking:

Error log: tail -500 /var/log/nginx/peertube.ac-amiens.fr.error.log |grep error

Ci-joint ngnix conf

server {
  listen 80;
  listen [::]:80;
  server_name tube.ac-amiens.fr;
#  return 301 https://$host$request_uri;	

  access_log /var/log/nginx/peertube.ac-amiens.fr.access.log main;
  error_log /var/log/nginx/peertube.ac-amiens.fr.error.log;

  location /.well-known/acme-challenge/ {
    default_type "text/plain";
    root /var/www/certbot;
  }

  # Configure with your resolvers
  # resolver $DNS-IP-1 $DNS-IP-2 valid=300s;
  # resolver_timeout 5s;

  # Enable compression for JS/CSS/HTML bundle, for improved client load times.
  # It might be nice to compress JSON, but leaving that out to protect against potential
  # compression+encryption information leak attacks like BREACH.
  gzip on;
  gzip_types text/css application/javascript;
  gzip_vary on;

# listen = 127.0.0.1:9000

  location ^~ '/.well-known/acme-challenge' {
    default_type "text/plain";
    root /var/www/certbot;
  }

  # Bypass PeerTube for performance reasons. Could be removed
  location ~ ^/client/(.*\.(js|css|woff2|otf|ttf|woff|eot))$ {
    add_header Cache-Control "public, max-age=31536000, immutable";

    alias /var/www/peertube/peertube-latest/client/dist/$1;
  }

  # Bypass PeerTube for performance reasons. Could be removed
  location ~ ^/static/(thumbnails|avatars)/ {
    if ($request_method = 'OPTIONS') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'Range,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
      add_header 'Access-Control-Max-Age' 1728000;
      add_header 'Content-Type' 'text/plain charset=UTF-8';
      add_header 'Content-Length' 0;
      return 204;
    }

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Range,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

    # Cache 2 hours
    add_header Cache-Control "public, max-age=7200";

    root /var/www/peertube/storage;

    rewrite ^/static/(thumbnails|avatars)/(.*)$ /$1/$2 break;
    try_files $uri /;
  }

  location / {
#    proxy_pass http://localhost:9000;
    proxy_pass http://[::1]:9000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # This is the maximum upload size, which roughly matches the maximum size of a video file
    # you can send via the API or the web interface. By default this is 8GB, but administrators
    # can increase or decrease the limit. Currently there's no way to communicate this limit
    # to users automatically, so you may want to leave a note in your instance 'about' page if
    # you change this.
    #
    # Note that temporary space is needed equal to the total size of all concurrent uploads.
    # This data gets stored in /var/lib/nginx by default, so you may want to put this directory
    # on a dedicated filesystem.
    #
    client_max_body_size 8G;

    proxy_connect_timeout       600;
    proxy_send_timeout          600;
    proxy_read_timeout          600;
    send_timeout                600;
  }

  # Bypass PeerTube for performance reasons. Could be removed
  location ~ ^/static/(webseed|redundancy)/ {
    # Clients usually have 4 simultaneous webseed connections, so the real limit is 3MB/s per client
    limit_rate 800k;

    if ($request_method = 'OPTIONS') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'Range,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
      add_header 'Access-Control-Max-Age' 1728000;
      add_header 'Content-Type' 'text/plain charset=UTF-8';
      add_header 'Content-Length' 0;
      return 204;
    }

    if ($request_method = 'GET') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'Range,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

      # Don't spam access log file with byte range requests
      access_log off;
    }

    root /var/www/peertube/storage;

    rewrite ^/static/webseed/(.*)$ /videos/$1 break;
    rewrite ^/static/redundancy/(.*)$ /redundancy/$1 break;

    try_files $uri /;
  }

  # Websocket tracker
  location /tracker/socket {
    # Peers send a message to the tracker every 15 minutes
    # Don't close the websocket before this time
    proxy_read_timeout 1200s;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
#    proxy_pass http://localhost:9000;
    proxy_pass http://[::1]:9000;
  }

  location /socket.io {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;

#    proxy_pass http://localhost:9000;
     proxy_pass http://[::1]:9000;

    # enable WebSockets
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

J’ai aussi activé HLS dans la conf pour certaine type de vidéo qui ne passent pas.

# /!\ EXPERIMENTAL /!\
  # /!\ Requires ffmpeg >= 4
  # Generate HLS playlists and fragmented MP4 files. Better playback than with WebTorrent:
  #     * Resolution change is smoother
  #     * Faster playback in particular with long videos
  #     * More stable playback (less bugs/infinite loading)
  # /!\ Multiplies videos storage by 2 /!\
  hls:
    enabled: true

Je viens de faire un test sur un Wordpress en HTTPS cela semble fonctionner ICI
Votre analyse semble bonne.

Je confirme que pour moi aussi ça marche sur ce 2e blog.
Reste à savoir si on peut contourner le problème dans le premier cas.

Apparemment ça ne sera pas possible de le contourner :

Although window.crypto is available on all windows, the returned Crypto object only has one usable feature in insecure contexts: the getRandomValues() method. In general, you should use this API only in secure contexts.

Source : https://developer.mozilla.org/en-US/docs/Web/API/Window/crypto

Ou plus précisemment : https://developer.mozilla.org/en-US/docs/Web/API/Crypto/subtle

Je m’interroge quand même… N’y a-t-il pas un polyfill présent dans le javascript de l’instance, mais manquant dans le JS des iframes ? (cf mes captures, où l’origine des requêtes sur l’instance viens d’un fichier polyfill)

Bonjour,

Pensez-vous que nous pouvons revenir pour le moment à une version antérieur en faisant pointer le lien symbolique vers la version précédente ?
Dans ce contexte difficile notre instance Peertube est très prisée dans l’usage du numérique et la continuité pédagogique.
Merci pour votre accompagnement et pour l’excellent travail que toute votre équipe accomplie.

Bien à vous

Seules les mises à jour vers des versions plus récentes sont supportées, les rétrogradations ne le sont pas, la base de donnée ayant déjà été modifiée par la mise à niveau.

Je pense qu’il est plus sain de passer votre blog en HTTPS.

Merci pour votre retour, effectivement je viens de faire une test sur le Peertube mis à la disposition du ministère de l’Éducation nationale pour le personnel de notre ministère même constat.
https://apps.education.fr/
Lien vers le média ICI
Il faut donc que tous nos sites institutionnels soient en HTTPS ?
Crémos

Dans la prochaine version de PeerTube ça devrait fonctionner même pour les sites en HTTP : https://github.com/Chocobozzz/PeerTube/commit/6d61da4e32487bdb1f1a84a7b2eddf2df0ddf1ca

1 Like

Bonjour,

C’est une bonne nouvelle, encore merci beaucoup pour l’excellent travail que vous faites et votre compréhension.