'nw.js: how to capture iframe video/audio via getDisplayMedia()?

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



Solution 1:[1]

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:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vijay Rathod