Interacting with Unreal Engine

EmitUIInteraction is a function that is being called on the newWebRTC object, which is an instance of the WebRTCClient class. This function is used to send commands to the WebRTC server to trigger specific actions or events.

In the given code example, handleSendCommands is a function that takes an object as an argument and calls emitUIInteraction on the newWebRTC object with the object as its argument.

Note that you must send these commands in the exact same format as defined in the logic of the blueprints of your Unreal Engine app. If the format doesn't match, the commands will not have any effect on the UE app.

The command object contains a property/Key body_color with different values for each button click event. When any of the buttons with class names "button button-1", or "button button-2" are clicked, the corresponding handleSendCommands function is called with the respective command object containing the body_color property with different values.

This triggers the emitUIInteraction function on the newWebRTC object, which sends the command object to the WebRTC server to perform the desired action, such as changing the body color to the specified value on the server side.

The server then sends the updated information to connected clients, which may trigger UI changes on the client side.

Correct:

newWebRTC.emitUIInteraction({ body_color: "body_color_01" })}

Not correct:

newWebRTC.emitUIInteraction({ body_color: "body_color_01", rim_style: "rim_style_02" })}

How to use in a project:

• React:

const handleSendCommands = (command) => {
    newWebRTC.emitUIInteraction(command);
  };
  
return 
<div>
 <button onClick={() => handleSendCommands({ body_color: "body_color_01" })}>
  Change to color 1
 </button>
 <button onClick={() => handleSendCommands({ body_color: "body_color_02" })}>
  Change to color 2
  </button>
</div>

• AngularJs

template: `
 <div ng-controller="MyController">
  <button ng-click="handleSendCommands({ body_color: "body_color_01" })">
    Change to color 1
  </button>
  <button ng-click="handleSendCommands({ body_color: "body_color_02" })">
    Change to color 2
  </button>
</div>
  `,

$scope.handleSendCommands = function(command) {
newWebRTC.emitUIInteraction(command);
};

• VueJS

<template>
  <div>
    <button @click="handleSendCommands({ body_color: "body_color_01" })">
      Change to color 1
    </button>
    <button @click="handleSendCommands({ body_color: "body_color_02" })">
      Change to color 2
    </button>
  </div>
</template>

<script>
 export default {
  methods: {
    handleSendCommands(command) {
      newWebRTC.emitUIInteraction(command);
    }
  },
 };
</script>

• Plain HTML

<div>
  <button onclick="handleSendCommands({ body_color: 'body_color_01' })">
    Change to color 1
  </button>
  <button onclick="handleSendCommands({ body_color: 'body_color_02' })">
    Change to color 2
  </button>
</div>

<script>
function handleSendCommands(command) {
  newWebRTC.emitUIInteraction(command);
}
</script>