Remote control from OBS and M5GO using mqtt and OBS websock

This article is a remote control of OBS studio (described below) used in live delivery.

First, look at how the mechanism is actually working.

As for the contents of this animation, the OBS is moving on the PC, and the following three scenes are set in the OBS.

1.A scene that displays a letter during a break

2.A scene showing PC camera full screen

3.A scene in which a PC's camera image is displayed simultaneously while the slide is full

The above three scene switching operations are controlled from different devices, such as sumaho and m5go (M5 stack). The overall configuration is as follows.

The details of the mechanism are written below.

The mechanism of using

This section describes the following plugins and package services used to remotely control obs.

•OBS websocket (plugin)

•OBS - websocket -

•Mqtt

•Shiftr (mqtt broker)

•Uiflow

OBS connection

OBS websocket (plugin)

This time, the best point to control the OBS outside is the OBS websocket plugin.

●obs-websocket - Remote-control OBS Studio from WebSockets | OBS Forumshttps://obsproject.com/forum/resources/obs-websocket-remote-control-obs-studio-from-websockets.466/●Palakis/obs-websocket: Remote-control OBS Studio through WebSocketshttps://github.com/Palakis/obs-websocket

By adding this plugin to the OBS, you will be able to control the OBS from the external programs and apps.

As with the name of the plugin, it uses websocket to control obs.

By communicating with websocket along the protocol written on the page of the following suppliers, it is possible to do not only switching the scene introduced at the beginning but also operation of various OBS from the external program and the app.

●obs-websocket/protocol.md at 4.x-current · Palakis/obs-websockethttps://github.com/Palakis/obs-websocket/blob/4.x-current/docs/generated/protocol.md

If you can communicate with websocket, you can control the OBS from another program app in the PC running, and you can control it from another device outside the PC.

OBS websocket setup

The procedure for using this plugin is simple, and if you install the plugin, the server for websocket will start up when you start obs.

You can also change the settings associated with plugins such as port numbers and password authentication, and you can change the OBS from the start menu to the "tools web server settings" Because the port number of the configuration was used, it changed to the default port number not to be congested, and it was different from the story, but the authentication setting was enabled).

OBS websocket client sample

The OBS websocket page contains:

Apparently, the client on the browser can easily try the following link.

OBS tablet remote：

http://t2t2.github.io/obs-tablet-remote/

OBS - websocket -js

If you write the processing of the communication part in accordance with the OBS websocket protocol, you can control it from the external program app, but you have to use the obs-websocket-js.

This was introduced in the GitHub page of the OBS websocket (below), so it seems to make it easier for the OBS websocket to communicate.

For various languages, it seems to have been prepared (by various ways), but I used the JavaScript (browser & NodeB): OBS websocket - by Brendan Hagan on the list in this image De Choose JavaScript.

obs-websocket-jsThe following sample is written in the page of the page, and it is possible to implement the processing of "authentication + connection processing", "getting a list of the set scene" and "the scene switching specification" immediately.

In fact, write a part of this sample in the same way as the plugin settings for my OBS websocket You can confirm that you can do it.

After that, we tried to combine the keypress and push the specific key of the PC to switch to the scene corresponding to the key pressed by the scene of OBS.

MQTT connection

By using the OBS websocket plugin and OBS websocket - (or for languages other than JavaScript), it is now possible to control OBS without stepping into the details of the OBS websocket protocol.

I decided to start the operation of the OBS device from another device outside the PC.

One way to move on PC Notes There is a method of adding web files for web server processing, web pages, and so on to work with programs of programs (OBS websocket).

However, I think that I would like to cooperate with the microcomputer module other than sumaho, and that the PC side implementation could not be made separately for those terminals, but could be made common. So, we have tried to combine mqtt recently used in cooperation between devices including microcomputer modules.

MQTT and shiftr (mqtt broker)

The mqtt is used for communication between PC and other devices, as shown in the figure of "the first." Notes In the program Mqtt With the JavaScript implementation of the smash part of the configuration diagram Mqtt.

As for mqtt brokers that mediate the communication of mqtt, it was good to use it on the PC where the OBS was moving because it was enough to use the communication in the local network, and was able to move on the PC where the OBS was moving It was configured to use shiftr because there was one using "shiftr" which is one of the services that offer mqtt broker.

Here, mqtt Mqtt The detailed explanation of shiftr is omitted, but the link of the article which seems to be reference below is described.

Mqtt And shiftr

Javascript shiftr. io

Mqtt Sample and mqtt

Easy to use mqtt broker and library from obniz

Mqtt FX Based mqtt client app

This is not the mechanism used, it is the story of the app used in the course of development, but it is useful for the convenience.

In this configuration, the mqtt message was tested at the beginning to test the mqtt processing at the time of implementing the processing on the receiver side PC Mqtt FX (this app is on the left of the first configuration diagram to replace the role of the two devices).

This app is an mqtt client made up of Java, and it is possible to perform mqtt broker and topic message setting on the GUI, and it can be useful on the GUI as well as the operation and reception of mqtt message and reception.

Because it is a multi platform correspondence, it is also a good point for me to use the MAC in the main while using windows in both environments.

UIFlow

The M5GO (M5Stack) program with buttons used in the first half of the first animation was using the "uiflow", a visual programming environment for the M5 Stack (since it had previously created a program using mift using uiflow).

Uiflow can create programs with block type visual programming, as in the following images.

It is also possible to process the parts, such as the screen and the button built in the device, and the processing of the exclusive part (unit) such as the externally usable sensor, and it can also create the work which is useful for IOT such as HTTP request and mqtt by visual programming.

In order to use it, you need to setup the device and specify the API key strapped to the terminal on the browser (uiflow). For more information, see official documents and articles on the web.

Program

This section describes two programs shown by the red arrow in the following figure.

Because the part of sumaho is a simple content, I love this time.

Roughly, it is made to display three buttons in HTML, and it is implemented in the JavaScript script to send a different mqtt message by the button pressed when the button is clicked Mqtt Mqtt broker and Configuration to communicate with.

On PC Notes Programs

The three scenes of this switching operation are set on the OBS as follows Notes From the program.

The program described here uses two packages (OBS-websocket-js•mqtt).

To do this, install the two packages of OBS-websocket-js and mqtt with the NPM command.

npm i obs-websocket-js mqtt

The specific contents of the program are as follows.

There are several pieces enclosed in the program, but please write it according to your own environment.

List of parts needed for writing

OBS websocket port number

OBS websocket password

shiftr ID

shiftr PASS

Mqtt client client ID

Mqtt topics

Mqtt string

const OBSWebSocket = require('obs-websocket-js');
const mqtt = require('mqtt');

const obs = new OBSWebSocket();
obs.connect({
        // OBS websocket configuration
        address: '127.0.0.1:/ port / port number defaults to 4444
        password: 'Password' //Requires authentication
    }).then(() => {
        console.log(`Success! We're connected & authenticated.`);
        return obs.send('GetSceneList');
    }).then(data => {
        // Output a list of captured scenes
        console.log(`${data.scenes.length} Available Scenes!`);
        data.scenes.forEach(scene => {
            console.log(`${scene.name}`);
        });

        // After setting the scene information for OBS, mqtt related configuration is set
        const client = mqtt.connect('mqtt://【shiftrのID】:【shiftrのPASS】@broker.shiftr.io', {
            clientId: 'Mqtt client ID (set string)'
        });

        client.on('connect', function(){
            console.log('MQTT: client has connected!');
            client.subscribe('Configure mqtt topics');
        });

        client.on('message', function(topic, message) {
            console.log('new message:', topic, message.toString());
            // Change the designation of the scene switched by the contents of the message received by mqtt
            switch (message.toString()) {
                case 'Mqtt string 1 (corresponding to the first scene)':
                    obs.send('SetCurrentScene', {
                        'scene-name': data.scenes[0].name
                    });
                    break;
                case 'Mqtt string 1 (corresponding to scene 2)':
                    obs.send('SetCurrentScene', {
                        'scene-name': data.scenes[1].name
                    });
                    break;
                case 'Mqtt string 1 (corresponding to scene 3)':
                    obs.send('SetCurrentScene', {
                        'scene-name': data.scenes[2].name
                    });
                    break;
            }
        });
    }).catch(err => {
        console.log(err);
    });

obs.on('SwitchScenes', data => {
    console.log(`New Active Scene: ${data.sceneName}`);
});

// You must add this handler to avoid uncaught exceptions.
obs.on('error', err => {
    console.error('socket error:', err);
});

This time, since the original sample is used as much as possible, the scene switching process is implemented after the process of obtaining the name of the three scenes, and the name of the scene to be specified there Data [0].

This part may not necessarily get the scene name from the obs in the program, but may be used to directly write the three names on the program.

If you want to use this program to work, please make sure that you have installed the Webbs (OBS websocket) first installed.

UIFlow programs

The program created for M5GO (M5Stack) is as follows.

There are several pieces enclosed in the picture, but please write it according to your own environment.

For convenience of explanation, the Japanese character is written in the place where the character string is described, but it is not possible to use the Japanese character in uiflow, so please write only half angle alphanumeric and half square symbols.

The parts necessary for writing are summarized as follows. The topic of mqtt and the string to be exchanged in mqtt Notes Must be the same as the one specified in the program.

List of parts needed for writing

•Mqtt client client ID

•The ID of the shiftr can be specified at the user's name on the right side of the second block.

•Shiftr pass

•Mqtt topics

•Mqtt string

If you write the program to M5GO(M5Stack), then you will find the Notes Just press the 3 button of M5GO (M5Stack) with the program running. Pressing one of the three buttons switches to the scene corresponding to the button pressed by the OBS display.