Dyrk

Très chers "Dyrknautes",

Me voici à nouveau devant vous (ou presque), afin de vous présenter ma dernière création.
Il s'agit ici d'un script qui vous offrira quelques minutes d'admirations auprès de vos collègues !
Ainsi avec l'ère nouvelle du télétravail pour tous, les outils collaboratifs se multiplient comme des petits pains ! Et ceux qui existaient d'avant, se développent, baissent leurs prix ... et parfois même deviennent gratuits !

C'est le cas pour Google Meet !
Personnellement, c'est un outil que je trouve vraiment très pratique, bien fait et surtout évolutif !
Point négatif, il est américain, et on sait parfaitement ce que ça implique de manière personnelle ... et professionnelle ... mais bon ... comme je dois l'utiliser ... autant me "l'approprier" un peu !

Mes "Hacks" sur Google Meet et Hangout

Précédemment, j'ai pu vous présenter un petit "hack", qui permettait de freezer votre caméra.
Vous le savez, j'aime bien revenir sur mes vieux sujets afin de les retravailler et d'en extraire tous leurs jus.
J'ai passé pas mal d'heures pour vous compiler quelques autres "hacks" fonctionnant sur Google Meet & autres plateformes de visioconférence, que j'ai pu faire.
Désormais avec un seul script, vous aurez la possibilité de :

• Freezer votre caméra (flux vidéo) sur l'écran de vos collègues.
• Afficher un dessin animé à la place de votre caméra
• Usurper la caméra de vos collègues, et donc d'afficher leurs têtes à la place de la vôtre

Ce script ne s'appuie pas vraiment sur les mécaniques d'une plateforme en particulier, mais sur des technologies couramment utilisées par les plateformes de visioconférence (WebRTC, MediaStream, ...)
En exploitant ce que l'on appelle des "prototypes", je parviens à injecter mon code à l'intérieur de la partie en charge de traiter les différents flux "vidéo" et "audio".
J'ai abordé le sujet dans pas mal de mes articles, aussi, je vous invite si vous êtes piqués par la curiosité, à faire quelques recherches sur votre moteur de recherche préféré.

Mon Scripts

Vous trouverez ci-dessous, mon script, comme d'habitude, il vous faudra le copier-coller dans la console développeur de votre Navigateur (oui il s'agit d'un "Hack" pour navigateur), tout en étant dans votre réunion sur Google Meet, ou dans votre appel vidéo sur Hangout, Facebook Messenger ou autres (touche F12 de votre clavier, onglet "console", copier-coller, valider par la touche "entrée").

/*
*    Meet Unlocker
*    Add "Hacked" Features on your VideoConferences
*    Work on Goole Meet (100%), Hangout (100%) & Facebook Messenger (70%)
*    Dave-Hill [@] dyrk [dot] org
*    (c) Dyrk 2020 - 2021
*
*/
var fake_movie, 
  /* Init a Fake Movie */
  create_fake_movie = () => {
    console.error('Init fake Movie');
    fake_movie = document.createElement('video');
    fake_movie.setAttribute('crossOrigin', 'anonymous');
    fake_movie.src = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
    fake_movie.muted = true;
  },
  /* Change the Video Stream */
  change_movie_track = (track) => {
    try {
      let sender = document.z.getSenders().filter(s => s && s.track && s.track.kind == 'video');
      console.error(sender);
      sender.map(s => s.replaceTrack(track));
    } catch (e) {
      console.error(e)
    }
  },
  /* Freeze the Video Stream */
  freeze_camera = () => {
    console.error('Freeze Cam');
    document.z.getSenders().map(s => s && s.track && s.track.kind == 'video' ? document.z.removeTrack(s) : null);
  },
  /* Refresh & Display the Features options */
  refresh_select_hack = (id) => {
    var dom = document.getElementsByTagName('html')[0],
      select = document.getElementById('refresh_select_hack'),
      receiver = document.z.getReceivers().filter(e => e && e.track && e.track.kind == 'video'),
      old_receivers = document.getElementsByClassName('video_receiver_track'),
      option;
    /* Create form if isn't it done */
    if (!id && !select) {
      select = document.createElement('select');
      select.setAttribute('style',
        'position:fixed;top:0px;left:0px;z-index:10000000000');
      select.id = 'refresh_select_hack';
      dom.appendChild(select);
      create_fake_movie();
      ['------', 'Freeze', 'Movie'].map(action => {
        option = document.createElement('option');
        option.textContent = action;
        option.value = action;
        select.appendChild(option);
      });
      select.addEventListener('change', function(evt) {
        try {
          let id = evt.target.value,
            receiver = document.z.getReceivers().filter(e => e && e.track && e.track.kind == 'video');
          if (id.match(/^[0-9]{1,3}$/) && receiver && receiver[id]) {
                /* Usurp Friends Camera */
                return change_movie_track(receiver[id].track);
          }
          switch (id) {
            case 'Freeze':
              /* Freeze Video Stream*/
              freeze_camera();
              break;
            case 'Movie':
              /* Display a Fake Movie instead camera */
              fake_movie.play();
              change_movie_track(fake_movie.captureStream().getVideoTracks()[0]);
              break;
          }
        } catch (e) {
          console.error('err', e);
        }
      });
    }
    /* Remove old receivers options */
    for (var i in old_receivers) {
      if (typeof old_receivers[i] != 'object') continue;
      old_receivers[i].parentNode.removeChild(old_receivers[i]);
    }
    /* Add old receivers options */
    for (var i in receiver) {
      if (typeof receiver[i] != 'object') continue;
      option = document.createElement('option');
      option.textContent = 'Video #' + i;
      option.value = i;
      option.setAttribute('class', 'video_receiver_track');
      select.appendChild(option);
    }
  };
/* Hack prototype to insert Dyrk features */
['addStream', 'createOffer', 'getReceivers'].map(function(name) {
  RTCPeerConnection.prototype[name + '2'] = RTCPeerConnection.prototype[name + '2'] ? RTCPeerConnection.prototype[name + '2'] : RTCPeerConnection.prototype[name];
  RTCPeerConnection.prototype[name] = function(e) {
    if (!document.z) {
      console.log('hack running');
      document.z = this;
      setInterval(refresh_select_hack, 5000);
      refresh_select_hack();
    }
    return this[name + '2'](e);
  };
});

Comment utiliser cet outil

Une fois le script copié, collé et exécuté dans votre console, si aucune liste déroulante n’apparaît dans le coin gauche de votre écran : il vous faudra, désactiver et activer votre caméra.
Une petite liste déroulante apparaîtra en haut, dans le coin gauche de votre écran.

Cette liste déroulante vous offrira la possibilité de choisir le flux vidéo que vous souhaitez diffuser (celui d'un autre membre de la réunion, un dessin animé), ou bien de freezer votre flux vidéo.
Il suffit de sélectionner l'option de votre choix, l'effet sera immédiat.
Si vous souhaitez "usurper" le flux vidéo d'un de vos camarades sur Google Meet, il vous faudra activer l'option permettant d'afficher votre flux vidéo dans la mosaïque (coin en haut à droite de votre écran)

Enfin, si vous avez le moindre problème, ou bien si vous souhaitez à nouveau rediffuser votre propre caméra:
Désactivez & Réactivez votre caméra dans Google Meet par l'option standard.

NB :
Une fois n'est pas coutume, petite piqûre de rappel pour les petits nouveaux :

1. il s'agit d'un "hack", je ne suis pas tenu responsable des dérives que cela peut entraîner s'il est utilisé pour de mauvaises raisons.
2. Un hack n'est pas une fonctionnalité officielle, il n'est pas tenu de durer dans le temps, et peut même ne plus exister dès le jour de la publication de cet article.

Démonstration vidéo

Pour les plus bidouilleurs

Lorsque vous verrez apparaitre dans votre console développeur "Hack Running", vous aurez désormais accès à "document.z", un petit objet qui vous permettra d'accéder aux flux audio et vidéos reçus (document.z.getReceivers()) et à ceux envoyés (document.z.getSenders())
Libre à vous d'imaginer les possibilités (intervertir votre voix avec celle de vos amis, créer des effets sur votre voix, etc ...)

Conclusion

J'espère que ce script fera la joie de certains farceurs, et que pour d'autres, il vous permettra de créer de nouveaux hacks, on pourrait par exemple imaginer de capturer le stream d'un canvas pour appliquer des effets sur la caméra ;)

Bien entendu, vous êtes grands et responsables de l'utilisation que vous ferez d'un tel script.
On peut parfaitement imaginer ce qu'il pourrait advenir entre de mauvaises mains (usurpation d'identité & co)

Si vous trouvez des plateformes autres que Meet & Hangout, ou ce script fonctionne n'hésitez pas à les partager en commentaire.

Au fait, j'ai créé un repo sur Git pour partager progressivement, tous les futurs scripts que je publierais sur Dyrk : https://github.com/pgpgeek/JS_Hack

Incluant bien évidemment le présent script ...
avec ... ATTENTION BONUS ..., les débuts d'un premier effet "Ghost" à appliquer sur votre caméra (ce n'est pas encore pleinement fonctionnel).

Bonne soirée à tous !