webrtc - 视频室集成中的屏幕共享

Question

我已经成功使用了 videoroomtest 和集成视频会议。但我想在我的视频室中也集成屏幕共享。如何在用户连接的视频室中启动屏幕共享。

屏幕共享还使用 videoroom 插件。这个怎么做。请帮忙。

任何帮助将不胜感激。

问候， 阿卡什

Answer 1

创建报价时将“视频”设置为“屏幕”：

var media = { audioRecv: false, videoRecv: false, audioSend: useAudio, videoSend: true, data: true, video: "screen" }

Answer 2

您必须为屏幕共享创建单独的报价，例如处理程序onMessage事件中的视频会议。

janus.attach({
    plugin: "janus.plugin.videoroom",
    opaqueId: opaqueId,
    success: function(pluginHandle) { ... },
    error: function(error) { ... },
    consentDialog: function(on) { ... },
    mediaState: function(medium, on) { ... },
    webrtcState: function(on) { ... },
    onmessage: function(msg, jsep) {
        ...
        //video conference
        publishOwnfeed(true, false);
        //Screen sharing
        publishOwnfeed(false, true);
        ...
    }
    onlocalstream: function(stream) {
        //This event will be called for two times
        //one time with video stream
        //second time with screen stream
    },
    onremotestream: function(stream) { ... },
    oncleanup: function() { ... }
});

function publishOwnFeed(useAudio, isScreenSharing) {
    ...
    sfutest.createOffer({
        media: {
            video: isScreenSharing ? "screen" : true // video constraint
            audioRecv: false,
            videoRecv: false,
            audioSend: useAudio,
            videoSend: true
        },
        simulcast: doSimulcast,
        success: function(jsep) { ... },
        error: function(error) { ... }
            ...
    });
}

you can create separate hanldler with same plugin(plugin: "janus.plugin.videoroom") for screen sharing.If you want to handle(Ex. start,stop) separately.

Answer 3

您可以使用 navigator.mediaDevices.displayMedia() 来获取屏幕。https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

Answer 4

您可以使用：

  var promise = navigator.mediaDevices.getDisplayMedia(constraints);

这将返回一个承诺，当解决后返回来自用户选择的屏幕的MediaStream和一个可选的音轨（某些浏览器不支持）。

例子：

async function startCapture(displayMediaOptions) {
  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch(err) {
    console.error("Error: " + err);
  }
  return captureStream;
}

摘自： https ://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia