Question

我想创建一个屏幕共享扩展程序。我已经尝试过Muas Khan在GitHub上提供的某些示例，但如果您是WebRTC的新手，很难在代码中实现它们。我可以使用navigator.getUserMedia实现屏幕共享吗？请记住，我正在使用Firefox，我不想使用我的网络摄像头，因为我只是共享我的屏幕。我可以写下面的代码吗？

window.navigator = window.navigator || {};
navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         null;

if (navigator.getUserMedia === null) {
   // document.getElementById('gum-unsupported').classList.remove('hidden');
    document.getElementById('videorecorderplay-button- recorder').setAttribute('disabled', 'disabled');
    document.getElementById('videorecorderstop-button-recorder').setAttribute('disabled', 'disabled');
} else {
    // Opera <= 12.16 accepts the direct stream.
    // More on this here: http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/
    var createSrc = window.URL ? window.URL.createObjectURL : function (stream) { return stream; };

    // Opera <= 12.16 support video only.
    var audioContext = window.AudioContext ||
                       window.webkitAudioContext ||
                       null;
    if (audioContext === null) {
        document.getElementById('gum-partially-supported').classList.remove('hidden');
    }

    document.getElementById('videorecorderplay-button-recorder').addEventListener('click', function () {
        debugger;
        // Capture user's audio and video source
        navigator.getUserMedia({
            video: {mandatory:{chromemediasource:'screen'}
    },
            audio: true
        },
        function (stream) {
            videoStream = stream;
            // Stream the data
            video.src = createSrc(stream);
            video.play();
        },
        function (error) {
            console.log("Video capture error: ", error.code);
        });
    });
    document.getElementById('videorecorderstop-button-recorder').addEventListener('click', function () {
        // Pause the video
        video.pause();
        // Stop the stream
        videoStream.stop();
    });

它实际上不适合我。我在哪里错过了？

Answer 1

屏幕共享约束在chrome和firefox中有所不同，在firefox中，它是：

navigator.getUserMedia({ video: {
   mediaSource: "window"       // options are 'screen' ‘window‘ or ‘application‘
}}).then(stream => ...)

还要确保在about:config中正确设置了以下标志：

media.getusermedia.screensharing.allowed_domains列表包含您的应用程序的域名。
media.getusermedia.screensharing.enabled设置为true

如何在navigator.getUserMedia的帮助下在Firefox中使用屏幕共享？

1 个答案: