How could I get VCS to update through updateLiveStream?

jekwempu

I When I start a live stream, all components in VCS work as expected except WebFrame. Nonetheless, none work when I apply an update to the live stream by calling updateLiveStream. How could I get updateLiveStream to work for VCS.

Thanks,

Jonathan

Tamara

Hi @jekwempu I see both of your questions on VCS and will ask our engineers to help you with them. To start, do you have a code snippet/example for us where your updateLiveStream call is laid out in, so we can see what it looks like exactly? Thanks!

jekwempu

Thanks, Tamara for getting back to me.

I actually uploaded some code snippets when I wrote about my findings, after testing VCS.

See:

https://community.daily.co/discussion/377/video-component-system-vcs-my-test-results

Tamara

Ah, thanks for pointing me to that @jekwempu that's much appreciated and very helpful. I'll share your question and feedback with Pauli and will make sure we get back to you with any additional information we have to help you solve these issues with webframe where possible.

pauli

Hi @jekwempu , thank you for the feedback on VCS, it's greatly appreciated!

Here's an example updateLiveStreaming() call that I've used for my own testing. It loads both the TextOverlay and WebFrame components:

call.updateLiveStreaming({

  layout: {

    preset: "custom",

    composition_params: {

      "showTextOverlay": true,
      "showWebFrameOverlay": true,

      "text.content": "Showing WebFrame test",

      "videoSettings.margin.top_gu": 0,

      "videoSettings.margin.right_gu": 34,

      "webFrame.viewportWidth_px": 1280,

      "webFrame.viewportHeight_px": 960,

      "webFrame.margin_gu": 0,

      "webFrame.height_gu": 32,

      "webFrame.url": "https://www.daily.co/tools/vcs-simulator/webframe-test/index.html",

    },

  },

});

The "webframe-test" URL being loaded here is a basic test page that prints some stats and a counter.

It's necessary to include preset: 'custom' when updating the composition params. (This is just a side effect of how our layout preset system works.)

Re: WebFrame missing in simulator. It is indeed not yet rendered correctly there. The simulator just displays a white box with the URL as a placeholder. I'm hoping to fix this for the VCS 1.0 release!

jekwempu

Thanks Pauli, for your response to my issues.

I used your script to test, but got a similar result like I got before.

For startLiveStreaming:

• Text ("Showing WebFrame test") was displayed but WebFrame did not display

For updateLiveStreaming:

• Both Text and WebFrame did not display

Some observations:

You did not use "webFrame.keyPress.key". Does that mean it is not required for WebFrame?

My environment (Just in case I am missing an update):

"react": "^18.2.0",

"@daily-co/daily-js": "^0.48.0",

"@daily-co/daily-react": "^0.11.4",

Request:

If you don't mind, please post the code snippet of the "startLiveStreaming" you used.

Thanks,

Jonathan

pauli

@jekwempu Here's a code snippet I've used for testing VCS components…

Start a stream in the "split" layout mode. (It's not important if it's split or something else, I just have this in here to test that the layout mode change works.)

call.startLiveStreaming({
  rtmpUrl: "[URL REDACTED]",

  layout: {

    preset: 'custom',

    composition_params: {

      mode: 'split',

    },

  },

});

Followed by an update that changes the layout mode, displays a text overlay, and displays WebFrame with a test page:

call.updateLiveStreaming({

  layout: {

    preset: 'custom',

    composition_params: {

      mode: 'grid',

      showTextOverlay: true,

      showWebFrameOverlay: true,

      "text.content": "Showing WebFrame test",

      "text.align_horizontal": "left",

      "text.align_vertical": "top",

      "text.fontSize_gu": 1.8,

      "videoSettings.margin.top_gu": 0,

      "videoSettings.margin.right_gu": 34,

      "webFrame.viewportWidth_px": 1280,

      "webFrame.viewportHeight_px": 960,

      "webFrame.margin_gu": 0,

      "webFrame.height_gu": 32,

      "webFrame.url": "https://www.daily.co/tools/vcs-simulator/webframe-test/index.html",

    },

  },

});

The same code works for a recording session if you change startLiveStreaming to startRecording, and updateLiveStreaming to updateRecording.

Does the update call do nothing for you? Not even if you change the layout mode?

jekwempu

Thank you so much, Pauli. VCS "updateLiveStreaming", now works for me. I would provide my feedback through a new thread later.

Thanks again,

Jonathan