Projector / Display / Preview output

[hrueger]

I tried to create a projector or a display, but I couldn't get it to work. In streamlabs-obs I found this code: https://github.com/stream-labs/streamlabs-obs/blob/e707f9819a10296893f4d3e058d12110c1ec44a7/app/services/video.ts#L254-L275 So I have the following code:

const t = new BrowserWindow({
    height: 300,
    width: 400,
    webPreferences: {
      nodeIntegration: true,
    }
  });

  osn.NodeObs.OBS_content_createDisplay(
    t.getNativeWindowHandle(),
    "test",
    1,
  );

But it just gives me the normal BrowserWindow. Rendering mode can be 0, 1 or 2 as defined here but it doesn't work with any of them.

Did you get some kind of live output working?

[hrueger]

I also saw that the obs-studio-node object created with const osn = require("obs-studio-node"); has a DisplayFactory property, but its value is undefined...

[emptycrown]

Hey, we were mainly focused on recordings (rather than live outputs) so I haven't looked into this specific case. I believe what you want to use is InputFactory though.

[hrueger]

As I could find out by looking at the streamlabs-obs source code, they're using InputFactory for physical devices which stream a video signal into obs. But interestingly they're neither using OutputFactory nor DisplayFactory. That means the above code must somehow be the right approach. I'll play around with that. In case I manage to get it working, I'll create a pull request.

[Envek]

I've tried to look at it earlier, but with no luck yet.

As for me, method OBS_content_createSourcePreviewDisplay looks more appropriate as it accepts sourceId param which could be an identifier for the scene created at our obsRecorder.js's setupSources() function (I believe that scenes can be used interchangeably with plain sources, but not sure).

Take a look at Display service usage at Display.vue.ts component here: https://github.com/stream-labs/streamlabs-obs/blob/e707f9819a10296893f4d3e058d12110c1ec44a7/app/components/shared/Display.vue.ts#L46-L53 And this component usage here (webcam testing at setup wizard or something like this): https://github.com/stream-labs/streamlabs-obs/blob/e707f9819a10296893f4d3e058d12110c1ec44a7/app/components/pages/onboarding-steps/HardwareSetup.tsx#L59-L63

I don't know Vue at all, unfortunately, so it is hard to say how sourceId is being passed in other usages of this component, but it seems that it is being passed somehow.

[chengjingfeng]

@EmptyCrown @Envek @hrueger

for your reference：

//import obs-studio-node const osn = require("obs-studio-node");

//get camera input const obsVideoInput = osn.InputFactory.create('dshow_input', 'video', { audio_device_id: 'does_not_exist', video_device_id: 'does_not_exist',

});

var devieid = ''; const iListProperty = obsVideoInput.properties.get('video_device_id'); const cameraItems = iListProperty.details.items; if(cameraItems.length > 0){ devieid = cameraItems[0].value; cameraItems[0].selected = true; console.debug('cameraItems[0].name: ' + cameraItems[0].name)

}

const obsCameraInput = osn.InputFactory.create('dshow_input', 'video', { video_device_id: devieid, }); obsVideoInput.release();

let settings02 = obsCameraInput.settings; settings['width'] = 320; settings['height'] = 240; obsCameraInput.update(settings02); obsCameraInput.save(); //end get camera input

//create a camera display window var cameraWindow = new BrowserWindow({ width: 320, height: 240 });

osn.NodeObs.OBS_content_createSourcePreviewDisplay( cameraWindow.getNativeWindowHandle(), devieid, 'myDisplay', );

osn.NodeObs.OBS_content_setShouldDrawUI('myDisplay', false); osn.NodeObs.OBS_content_resizeDisplay('myDisplay', 320, 240);

//add camera input scene into output osn.Global.setOutputSource(1, scene02);

you will find a new camera input display window. good luck.

[hrueger]

@chengjingfeng Thank's so much! What does the last line do? osn.Global.setOutputSource(1, scene02);. There's no scene02 and it works just fine without it.

@EmptyCrown @Envek I'll create a PR soon.

[Envek]

@chengjingfeng, thank you very much for sharing example of webcam handling! Added it to the example app.