screen sharing can't work in cross origin iframe
Reported by
ykn...@gmail.com,
Mar 29 2018
|
|||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36 OPR/51.0.2830.55 Steps to reproduce the problem: 1. install screen sharing extension (paste later) 2. prepare a site use the extension with getUserMedia 3. prepare a site with iframe including spte2 site. 4. visit step3 site What is the expected behavior? I can do screen sharing with getUserMedia. What went wrong? getUserMedia error says 'invalid state' Did this work before? N/A Does this work in other browsers? Yes Chrome version: 65.0.3325.181 (Official Build) （64 bit） Channel: stable OS Version: OS X 10.13.3 Flash Version: Shockwave Flash 29.0 r0
,
Mar 29 2018
extension code is here.
## content.js
var port = chrome.runtime.connect();
window.addEventListener("message",function(event){
console.log(event);
if (event.source != window) return;
if (event.data.type == 'getStreamId') {
port.postMessage('getStreamId', function(response){
console.log(response);
});
}
},false);
port.onMessage.addListener(function(request, sender, sendResponse){
window.postMessage({type: 'gotStreamId', streamid: request.streamid},'*');
});
## background.js
chrome.runtime.onConnect.addListener(function(port){
port.onMessage.addListener(function(message){
if(message == 'getStreamId'){
chrome.desktopCapture.chooseDesktopMedia(['screen', 'window', 'tab'],port.sender.tab, function(streamId){
console.log(streamId);
port.postMessage({streamid:streamId});
});
}
});
});
,
Mar 29 2018
step3 site is different domain with step2 site.
,
Mar 29 2018
,
Apr 2 2018
,
Apr 16 2018
yknetg@ Thanks for the issue. Tested this issue on Windows 10 and Mac OS 10.13.3 on the reported version 65.0.3325.181 and the latest Canary 68.0.3397.0 by following the below steps. 1. Added the above given code to respective files and placed in a folder. 2. Navigated to chrome://extensions and tried adding the extension. 3. Can see the error 'Manifest file is missing or unreadable.' Attached is the screen cast for reference. Request you to provide the zipped file with the above files and the manifest.js file which will help us in further triaging. Thanks..
,
Apr 17 2018
,
Apr 17 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 26 2018
Tried testing the issue on mac 10.13.3 using chrome stable version #66.0.3359.117 by using the extension file from comment #7, but after adding the extension to chrome we were unable to proceed with the issue as we have no idea how to proceed by preparing a site using the extension with getUserMedia. yknetg@ - Could you please help us in providing a sample url/test file to test the issue from our end. This will help us in triaging the issue further. Thanks...!!
,
Apr 27 2018
see https://bugs.chromium.org/p/chromium/issues/detail?id=827049#c1 copy and paste it to your html file and deploy to your environment.
,
Apr 27 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 27 2018
I'm not sure if this actually should work, hta@ any thoughts about i-framing a site that does screenshare?
,
Apr 28 2018
The Chrome screencapture isn't standard, but discussions in the standards community have indicated that screen share, like getUserMedia permission, should by default be denied in cross-origin iframes. We've discussed defining a feature for it so that permission can be given to cross-origin iframes using feature policy, but that hasn't landed in the specs yet. https://w3c.github.io/mediacapture-screen-share/#authorizing-display-capture is the standard's spec https://github.com/w3c/mediacapture-screen-share/issues/39 is the discussion about permission in cross-origin iframes.
,
May 4 2018
|
|||||||||||||
►
Sign in to add a comment |
|||||||||||||
Comment 1 by ykn...@gmail.com
, Mar 29 2018step2 site html is here. <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> </head> <body> <button id='start'>test</button> <video widht='400px' height='400px' id='player'></video> <script> var constraints = { video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: '', } } }; $(window).on('message', function (event) { console.log(event); if (event.originalEvent.data.type != 'gotStreamId') { return; } constraints.video.mandatory.chromeMediaSourceId = event.originalEvent.data.streamid; navigator.mediaDevices.getUserMedia(constraints).then((stream) => { console.log(stream); $('#player').get(0).srcObject = stream; }, function(err) { console.log(err.name); console.log(err.message); }); $(window).off('message'); }); $('#start').on('click', () => { window.postMessage({ type: "getStreamId" }, "*"); }); </script> </body> <html>