Javascript Girl
  1. Javascript Girl
  3. Google Chrome – Détection de la capture d'écran lorsque l'iframe est utilisé, le même script fonctionne sans iframe
Intereting Posts
Comment recharger la page actuelle sans perdre de données de formulaire? Peut-on créer JQuery UI Draggables / Sortables pour fonctionner sur le bouton droit de la souris Comprendre les fonctions du nombre en JavaScript Comment envoyer un message du panneau au script de contenu de la page-mod directement? Comment créer à la fois un client et une carte en une seule action avec Stripe? Ajout d'images dans JSfiddle Détectez si l'utilisateur utilise la vision du Web pour Android / iOS ou un navigateur régulier Javascript clique sur l'écouteur d'événement sur plusieurs éléments et obtenez l'ID cible Alerte douce affiche le code HTML dans le texte Fade in / Fade out barre de navigation Wget + JavaScript? Différence entre style.visibility et style.display Existe-t-il un événement proche du menu contextuel du navigateur? Comment puis-je convertir un formulaire HTML standard en une représentation JSON qui inclut toutes les données? Html () vs innerHTML jquery / javascript & XSS attaque

Google Chrome – Détection de la capture d'écran lorsque l'iframe est utilisé, le même script fonctionne sans iframe

Lorsque j'utilise ce script suivant, il fonctionne avec un navigateur normal. Mais quand l'iframe est utilisé, il me montre cette erreur:

Est-ce que quelqu'un sait ce qui cause cela et peut être résolu?

ERREUR: 

channel message Object {type: "getScreenPending", id: 24504, request: 6} content.js:4 channel message Object {type: "gotScreen", id: 24504, request: 6} content.js:4 >>> ShareScreen: if any err NavigatorUserMediaError {constraintName: "", message: "", name: "InvalidStateError"} test.js:1616

Manif.json: 

 { "name": "Screen sharing", "description": "Screensharing utility", "version": "0.0.2", "manifest_version": 2, "minimum_chrome_version": "34", "icons": { "48" : "icon.png" }, "permissions": [ "desktopCapture" ], "background": { "scripts": ["background.js"] }, "content_scripts": [ { "js": [ "content.js" ], "all_frames": true, "run_at": "document_start", "matches": ["*://*.a.com/*", "*://*.b.com/*"] }], "web_accessible_resources": [ "icon.png" ] }

Background.js: 

 /* background page, responsible for actually choosing media */ chrome.runtime.onConnect.addListener(function (channel) { channel.onMessage.addListener(function (message) { switch(message.type) { case 'getScreen': var pending = chrome.desktopCapture.chooseDesktopMedia(message.options || ['screen', 'window'], channel.sender.tab, function (streamid) { // communicate this string to the app so it can call getUserMedia with it message.type = 'gotScreen'; message.sourceId = streamid; channel.postMessage(message); }); // let the app know that it can cancel the timeout message.type = 'getScreenPending'; message.request = pending; channel.postMessage(message); break; case 'cancelGetScreen': chrome.desktopCapture.cancelChooseDesktopMedia(message.request); message.type = 'canceledGetScreen'; channel.postMessage(message); break; } }); });

Content.js: 

 /* the chrome content script which can listen to the page dom events */ var channel = chrome.runtime.connect(); channel.onMessage.addListener(function (message) { console.log('channel message', message); window.postMessage(message, '*'); }); window.addEventListener('message', function (event) { if (event.source != window) return; if (!event.data && (event.data.type == 'getScreen' || event.data.type == 'cancelGetScreen')) return; channel.postMessage(event.data); });

Ceci est causé par le fait que le flux ne peut être utilisé que par des cadres dont l'URL correspond à l'origine de l'onglet. À partir de Chrome 40, vous pouvez également utiliser le flux dans les images si vous définissez tab.url sur un URL dont l'origine correspond à la structure ( crbug.com/425344 ).

Le flux n'est valable que pendant dix secondes, donc vous devez suivre le flux suivant:

  1. Chargez l'iframe qui contient la page qui doit gérer le flux. Cette page doit être diffusée à partir d'un schéma sécurisé, par exemple https: ou chrome-extension:
  2. Envoyer l'origine du cadre ( location.origin ) à la page d'arrière-plan.
  3. Demandez le flux de l'ordinateur en utilisant les informations de l'onglet, avec tab.url défini sur l'URL ou l'origine du cadre.
  4. Envoyez le streamId de nouveau au cadre et utilisez-le (dans les dix secondes).

Exemple (basé sur le code dans la question): 

 var tab = channel.sender.tab; // NEW (Chrome 40+) tab.url = message.url; // Your custom message, eg {url: location.origin} chrome.desktopCapture.chooseDesktopMedia(['screen', 'window'], tab, function (streamid) { // ... see question for the rest of the code });

1 – ce n'est pas un problème de code, problème de navigateur

2 – cela ne fonctionne pas parce que je lance l'extension à partir de HTTP ( http://www.maindomain.com ) en utilisant iframe un lien HTTPS ( https://subdomain.maindomain.com ) qui utilise l'extension du navigateur

Donc, pour le réparer. J'avais besoin d'utiliser HTTPS ( https://www.maindomain.com ) ouvrant des liens iframe HTTPS ( https://subdomain.maindomain.com ). Depuis, il fonctionne maintenant.

J'espère que cela aide les autres.

REMARQUE: problème s'est produit: lorsque je lance l'iframe à partir du même sous-domaine sous-domaine.maindomain.com/test.php (iframe src = subdomain.maindomain.com / core.php), cela fonctionne. Mais quand je l'exécute comme maindomain.com/otherpages (iframe src = subdomain.maindomain.com / core.php), cela ne fonctionne pas. C'était très déroutant.

EDIT: Cela n'a toujours pas résolu le problème. La boîte de dialogue de partage d'écran s'ouvre mais lorsque j'intervient sur l'écran de partage, il donne la même erreur et échoue.