Shared Screen In Another Div

Issues developing apps
1

Trying to implement shared screen with OV. Currently, I have something like this for the user’s camera:

  let OV = new OpenVidu();
  let session = OV.initSession();
  let publisher = OV.initPublisher("layout", {
    mirror: true,
  });

  session.on('streamCreated', event => {
    session.subscribe(event.stream, "layout");
  });

And for screen sharing I have:

    ScreenSharer = new OpenVidu();
    screensession = ScreenSharer.initSession();


    skreen = ScreenSharer.initPublisher("screendiv", {
      videoSource: "screen",
      publishAudio: false,
    });

    skreen.once('accessAllowed', () => {
      screensession.publish(skreen);
    });

What I expect is that the shared screen is shown inside the “screendiv” div, instead it shows inside the “layout” div. How do I fix this?

Is this the best way to have a camera and a screen in the same session?

2

Hi,

I don’t know what is your template logic or if you are using some OpenVidu tutorial but this is not really related with OpenVidu. This is a templating html issue so, my recommendation is start from the beginning.
I mean, I would add screen share to the simplest tutorial, once I get it I keep trying with a complex one, change the template, understanding the end to end logic.
If you’re using OpenVidu call, you need medium-high Angular skills for understanding it’s behavior. Also you have the OpenVidu call documentation available here OpenVidu Docs
As I said before, this is a complex tutorial and everything is designed for adding every new stream inside of layout.