More options for iFrames

azyrr commented 4 years ago

ISSUE: Not enough options in iFrames to completely re-brand obs.ninja

It would be great if we could have the option to format what's inside the iFrame. While there's always the option to use the lang to select a language it would still be useful to be able to overwrite the text, and even format it with different fonts.

Here's a basic list on what would improve the experience by a large margin for re-branding purposes ;

[ ] Ability to inject / change the text inside the iFrame that is loaded.

Since most of the use cases for iFrames are going to be the webcam and screen sharing screen, these would be a good place to start. The main OBS page might not even be needed.
[ ] Ability to style text and other gizmo's

The option to use other CSS files to style the text, buttons and even the background would be a huge bonus and add to the "branding" experience
[ ] Option to selectively disable elements

For example disabling some of the clutter for less tech-savy people would also be welcome. The share-screen video is great, but unfortunately I know far too many people that would be thrown off by that when added as guests (they might not understand that it's a guide and try to interact with it).

The end result?

This would be a gigantic step towards completely customizing and branding the default UI for OBS ninja without having to deploy it to a different server.

steveseguin commented 4 years ago

Thank you for the feature request.

What text are we talking about? is the text contained within the language options good enough? ie: pass custom language files?

Would passing custom CSS files help? or at least linking to them?

what elements would you want disabled?

azyrr commented 4 years ago

Thank you for the feature request.

No, thank YOU for all that you've done, this is divine work.

What text are we talking about? is the text contained within the language options good enough? ie: pass custom language files?

Well, for translation purposes; yes - of course. But having the option to actually change the instructions would be helpful to enable "directors" having a much easier time setting things up. For example, being able to change "Join Room with Camera" to "Join the Backstage for the Show" from time to time would help clear things up for people not used to all of ""this" :)

Would passing custom CSS files help? or at least linking to them?

Yep, would be a huge step forward.

what elements would you want disabled?

On the screen sharing side the option to disable the video and gearbox would be good as not to confuse people.
The player has many options, but I believe some guests would be better suited with fewer. For example there's no need for a "pause" option for them
Also the volume slider
And "real" full screen can also be disabled from time to time
Even the gear button can be optional

While I believe these all have their uses, when trying to create a simple environment for non tech savvy guests, eliminating these can help a lot.

Thanks again!

steveseguin commented 4 years ago

Another user request was access to the actual video elements, but also the ability to customize the mixer. This might be possible via the IFRAME API.

They want to be able to float videos to the top left or left at least.

Well, I'll tinker with this; might allow for CSS injection as a solution and some sample code to start.

steveseguin commented 4 years ago

Pretty crude, but I hacked in some more IFRAME API options. It should allow for a lot of control over video elements and their arrangement/style.

added a &manual as a param, which disables the auto-mixer. This is mainly for IFRAME API users who want to perhaps control the video layouts themselves.
added an IFRAME API command that will allow for dynamic disable/enable of the auto-mixer
added a way to specify a video by stream ID via the IFRAME API to set a custom style for the video; allows for dynamic stylings to videos (all-videos or one specific one at a time)
added a way to add or remove a video by stream ID from the mixer area.
added a way to list all available streamIDs and labels
added the ability to insert custom CSS styles via the IFRAME API (added an example to the IFRAME dev app)
added a direct-text-message command for the director
emphasized the director's label/title in the chat message vs others
added the ability to set the preview video in the director's room to 'off', 'low' and 'high' bitrates -- useful for previewing as needed. low is default still.

I'll need to clean up the iFRAME API and documentation in the long term, as it's really just quickly added in. Names given for API functions aren't the more thought out. https://obs.ninja/beta/iframe

steveseguin commented 4 years ago

Sample code is on the iframe page; it's not great, but it should get the job done.

Also added a way to change the text / innerHTML of objects.

var button = document.createElement("button");
button.innerHTML = "Change Add Camera text";
button.onclick = function(){iframe.contentWindow.postMessage({"function":"changeHTML", "target":"add_camera", "value":"NEW CAMERA TEXT"}, '*');};  // change text of add camera button
iframeContainer.appendChild(button);

target is the HTML element ID; value is the text/html you want to set

steveseguin / vdo.ninja