In my nw.js page, I have an iframe with nwfaketop option and I load a cross-domain website which I need to capture as video stream, including the audio.
However, using getDisplayMedia() does not show the iframe window's contents.
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" >
</head>
<body>
<iframe src="{some other website}" nwfaketop nwdisable></iframe>
</body>
</html>
this is the website loaded inside iframe
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" >
</head>
<body>
<div class="screen-share-demo">
<video id="screen-share" autoplay></video>
<div class="tools">
<button onclick="chooseDesktopMedia()">capture iframe</button>
</div>
</div>
</body>
</html>
and this is the chooseDesktopMedia() function:
function chooseDesktopMedia(){
if(nw.Screen.Init){
nw.Screen.Init();
}
nw.Screen.chooseDesktopMedia(["screen"],function(streamId){
if(streamId) {
var conf = {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: streamId,
maxWidth: 1920,
maxHeight: 1080
},
optional: []
};
console.log("[nw.chooseDesktopMedia] stream id:" + streamId);
showScreenShare({audio: false, video: conf});
}
})
}
function showScreenShare(conf){
var ve = document.getElementById("screen-share");
navigator.mediaDevices.getUserMedia(conf)
.then(function(stream){
var url = window.URL.createObjectURL(stream);
ve.src = url;
})
.catch(function(e){
console.log(e);
alert(e);
});
}
I am also using --disable-web-security and --no-sandbox
This example shows you the contents of the selected part of your display. Click the Start Capture button to begin.
Start Capture Stop Capture
Log: