diff --git a/src/app/Http/Controllers/API/V4/OpenViduController.php b/src/app/Http/Controllers/API/V4/OpenViduController.php
index 7d14befb..b12fc043 100644
--- a/src/app/Http/Controllers/API/V4/OpenViduController.php
+++ b/src/app/Http/Controllers/API/V4/OpenViduController.php
@@ -1,409 +1,463 @@
 <?php
 
 namespace App\Http\Controllers\API\V4;
 
 use App\Http\Controllers\Controller;
 use App\OpenVidu\Connection;
 use App\OpenVidu\Room;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Validator;
 
 class OpenViduController extends Controller
 {
     /**
-     * Accepting the room join request.
+     * Accept the room join request.
      *
      * @param string $id    Room identifier (name)
      * @param string $reqid Request identifier
      *
      * @return \Illuminate\Http\JsonResponse
      */
     public function acceptJoinRequest($id, $reqid)
     {
         $room = Room::where('name', $id)->first();
 
         // This isn't a room, bye bye
         if (!$room) {
             return $this->errorResponse(404, \trans('meet.room-not-found'));
         }
 
-        $user = Auth::guard()->user();
-
-        // Only the room owner can do it
-        if (!$user || $user->id != $room->user_id) {
+        // Only the moderator can do it
+        if (!$this->isModerator($room)) {
             return $this->errorResponse(403);
         }
 
         if (!$room->requestAccept($reqid)) {
             return $this->errorResponse(500, \trans('meet.session-request-accept-error'));
         }
 
         return response()->json(['status' => 'success']);
     }
 
     /**
-     * Denying the room join request.
+     * Deny the room join request.
      *
      * @param string $id    Room identifier (name)
      * @param string $reqid Request identifier
      *
      * @return \Illuminate\Http\JsonResponse
      */
     public function denyJoinRequest($id, $reqid)
     {
         $room = Room::where('name', $id)->first();
 
         // This isn't a room, bye bye
         if (!$room) {
             return $this->errorResponse(404, \trans('meet.room-not-found'));
         }
 
-        $user = Auth::guard()->user();
-
-        // Only the room owner can do it
-        if (!$user || $user->id != $room->user_id) {
+        // Only the moderator can do it
+        if (!$this->isModerator($room)) {
             return $this->errorResponse(403);
         }
 
         if (!$room->requestDeny($reqid)) {
             return $this->errorResponse(500, \trans('meet.session-request-deny-error'));
         }
 
         return response()->json(['status' => 'success']);
     }
 
     /**
      * Close the room session.
      *
      * @param string $id Room identifier (name)
      *
      * @return \Illuminate\Http\JsonResponse
      */
     public function closeRoom($id)
     {
         $room = Room::where('name', $id)->first();
 
         // This isn't a room, bye bye
         if (!$room) {
             return $this->errorResponse(404, \trans('meet.room-not-found'));
         }
 
         $user = Auth::guard()->user();
 
         // Only the room owner can do it
         if (!$user || $user->id != $room->user_id) {
             return $this->errorResponse(403);
         }
 
         if (!$room->deleteSession()) {
             return $this->errorResponse(500, \trans('meet.session-close-error'));
         }
 
         return response()->json([
                 'status' => 'success',
                 'message' => __('meet.session-close-success'),
         ]);
     }
 
     /**
-     * Accepting the room join request.
+     * Dismiss the participant/connection from the session.
      *
      * @param string $id   Room identifier (name)
      * @param string $conn Connection identifier
      *
      * @return \Illuminate\Http\JsonResponse
      */
     public function dismissConnection($id, $conn)
     {
         $connection = Connection::where('id', $conn)->first();
 
         // There's no such connection, bye bye
         if (!$connection || $connection->room->name != $id) {
             return $this->errorResponse(404, \trans('meet.connection-not-found'));
         }
 
-        $user = Auth::guard()->user();
-
-        // Only the room owner can do it (for now)
-        if (!$user || $user->id != $connection->room->user_id) {
+        // Only the moderator can do it
+        if (!$this->isModerator($connection->room)) {
             return $this->errorResponse(403);
         }
 
         if (!$connection->dismiss()) {
             return $this->errorResponse(500, \trans('meet.connection-dismiss-error'));
         }
 
         return response()->json(['status' => 'success']);
     }
 
     /**
      * Listing of rooms that belong to the current user.
      *
      * @return \Illuminate\Http\JsonResponse
      */
     public function index()
     {
         $user = Auth::guard()->user();
 
         $rooms = Room::where('user_id', $user->id)->orderBy('name')->get();
 
         if (count($rooms) == 0) {
             // Create a room for the user (with a random and unique name)
             while (true) {
                 $name = strtolower(\App\Utils::randStr(3, 3, '-'));
                 if (!Room::where('name', $name)->count()) {
                     break;
                 }
             }
 
             $room = Room::create([
                     'name' => $name,
                     'user_id' => $user->id
             ]);
 
             $rooms = collect([$room]);
         }
 
         $result = [
             'list' => $rooms,
             'count' => count($rooms),
         ];
 
         return response()->json($result);
     }
 
     /**
      * Join the room session. Each room has one owner, and the room isn't open until the owner
      * joins (and effectively creates the session).
      *
      * @param string $id Room identifier (name)
      *
      * @return \Illuminate\Http\JsonResponse
      */
     public function joinRoom($id)
     {
         $room = Room::where('name', $id)->first();
 
         // Room does not exist, or the owner is deleted
         if (!$room || !$room->owner) {
             return $this->errorResponse(404, \trans('meet.room-not-found'));
         }
 
         // Check if there's still a valid beta entitlement for the room owner
         $sku = \App\Sku::where('title', 'meet')->first();
         if ($sku && !$room->owner->entitlements()->where('sku_id', $sku->id)->first()) {
             return $this->errorResponse(404, \trans('meet.room-not-found'));
         }
 
         $user = Auth::guard()->user();
         $isOwner = $user && $user->id == $room->user_id;
         $init = !empty(request()->input('init'));
 
         // There's no existing session
         if (!$room->hasSession()) {
             // Participants can't join the room until the session is created by the owner
             if (!$isOwner) {
                 return $this->errorResponse(422, \trans('meet.session-not-found'), ['code' => 323]);
             }
 
             // The room owner can create the session on request
             if (!$init) {
                 return $this->errorResponse(422, \trans('meet.session-not-found'), ['code' => 324]);
             }
 
             $session = $room->createSession();
 
             if (empty($session)) {
                 return $this->errorResponse(500, \trans('meet.session-create-error'));
             }
         }
 
         $password = (string) $room->getSetting('password');
 
         $config = [
             'locked' => $room->getSetting('locked') === 'true',
             'password' => $isOwner ? $password : '',
             'requires_password' => !$isOwner && strlen($password),
         ];
 
         $response = ['config' => $config];
 
         // Validate room password
         if (!$isOwner && strlen($password)) {
             $request_password = request()->input('password');
             if ($request_password !== $password) {
                 return $this->errorResponse(422, \trans('meet.session-password-error'), $response + ['code' => 325]);
             }
         }
 
         // Handle locked room
         if (!$isOwner && $config['locked']) {
             $nickname = request()->input('nickname');
             $picture = request()->input('picture');
             $requestId = request()->input('requestId');
 
             $request = $requestId ? $room->requestGet($requestId) : null;
 
             $error = \trans('meet.session-room-locked-error');
 
             // Request already has been processed (not accepted yet, but it could be denied)
             if (empty($request['status']) || $request['status'] != Room::REQUEST_ACCEPTED) {
                 if (!$request) {
                     if (empty($nickname) || empty($requestId) || !preg_match('/^[a-z0-9]{8,32}$/i', $requestId)) {
                         return $this->errorResponse(422, $error, $response + ['code' => 326]);
                     }
 
                     if (empty($picture)) {
                         $svg = file_get_contents(resource_path('images/user.svg'));
                         $picture = 'data:image/svg+xml;base64,' . base64_encode($svg);
                     } elseif (!preg_match('|^data:image/png;base64,[a-zA-Z0-9=+/]+$|', $picture)) {
                         return $this->errorResponse(422, $error, $response + ['code' => 326]);
                     }
 
                     // TODO: Resize when big/make safe the user picture?
 
                     $request = ['nickname' => $nickname, 'requestId' => $requestId, 'picture' => $picture];
 
                     if (!$room->requestSave($requestId, $request)) {
                         // FIXME: should we use error code 500?
                         return $this->errorResponse(422, $error, $response + ['code' => 326]);
                     }
 
                     // Send the request (signal) to the owner
                     $result = $room->signal('joinRequest', $request, Room::ROLE_MODERATOR);
                 }
 
                 return $this->errorResponse(422, $error, $response + ['code' => 327]);
             }
         }
 
         // Initialize connection tokens
         if ($init) {
             // Choose the connection role
             $canPublish = !empty(request()->input('canPublish'));
             $role = $canPublish ? Room::ROLE_PUBLISHER : Room::ROLE_SUBSCRIBER;
             if ($isOwner) {
                 $role |= Room::ROLE_MODERATOR;
                 $role |= Room::ROLE_OWNER;
             }
 
             // Create session token for the current user/connection
             $response = $room->getSessionToken($role);
 
             if (empty($response)) {
                 return $this->errorResponse(500, \trans('meet.session-join-error'));
             }
 
             // Create session token for screen sharing connection
             if (($role & Room::ROLE_PUBLISHER) && !empty(request()->input('screenShare'))) {
                 $add_token = $room->getSessionToken(Room::ROLE_SCREEN);
 
                 $response['shareToken'] = $add_token['token'];
             }
 
+            // Get up-to-date connections metadata
+            $response['connections'] = $room->getSessionConnections();
+
             $response_code = 200;
             $response['role'] = $role;
             $response['config'] = $config;
         } else {
             $response_code = 422;
             $response['code'] = 322;
         }
 
         return response()->json($response, $response_code);
     }
 
     /**
      * Set the domain configuration.
      *
      * @param string $id Room identifier (name)
      *
      * @return \Illuminate\Http\JsonResponse|void
      */
     public function setRoomConfig($id)
     {
         $room = Room::where('name', $id)->first();
 
         // Room does not exist, or the owner is deleted
         if (!$room || !$room->owner) {
             return $this->errorResponse(404);
         }
 
         $user = Auth::guard()->user();
 
         // Only room owner can configure the room
         if ($user->id != $room->user_id) {
             return $this->errorResponse(403);
         }
 
         $input = request()->input();
         $errors = [];
 
         foreach ($input as $key => $value) {
             switch ($key) {
                 case 'password':
                     if ($value === null || $value === '') {
                         $input[$key] = null;
                     } else {
                         // TODO: Do we have to validate the password in any way?
                     }
                     break;
 
                 case 'locked':
                     $input[$key] = $value ? 'true' : null;
                     break;
 
                 default:
                     $errors[$key] = \trans('meet.room-unsupported-option-error');
             }
         }
 
         if (!empty($errors)) {
             return response()->json(['status' => 'error', 'errors' => $errors], 422);
         }
 
         if (!empty($input)) {
             $room->setSettings($input);
         }
 
         return response()->json([
                 'status' => 'success',
                 'message' => \trans('meet.room-setconfig-success'),
         ]);
     }
 
+    /**
+     * Update the participant/connection parameters (e.g. role).
+     *
+     * @param string $id   Room identifier (name)
+     * @param string $conn Connection identifier
+     *
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function updateConnection($id, $conn)
+    {
+        $connection = Connection::where('id', $conn)->first();
+
+        // There's no such connection, bye bye
+        if (!$connection || $connection->room->name != $id) {
+            return $this->errorResponse(404, \trans('meet.connection-not-found'));
+        }
+
+        // Only the moderator can do it
+        if (!$this->isModerator($connection->room)) {
+            return $this->errorResponse(403);
+        }
+
+        foreach (request()->input() as $key => $value) {
+            switch ($key) {
+                case 'role':
+                    $connection->{$key} = $value;
+                    break;
+            }
+        }
+
+        // The connection observer will send a signal to everyone when needed
+        $connection->save();
+
+        return response()->json(['status' => 'success']);
+    }
+
     /**
      * Webhook as triggered from OpenVidu server
      *
      * @param \Illuminate\Http\Request $request The API request.
      *
      * @return \Illuminate\Http\Response The response
      */
     public function webhook(Request $request)
     {
         \Log::debug($request->getContent());
 
         switch ((string) $request->input('event')) {
             case 'sessionDestroyed':
                 // When all participants left the room OpenVidu dispatches sessionDestroyed
                 // event. We'll remove the session reference from the database.
                 $sessionId = $request->input('sessionId');
                 $room = Room::where('session_id', $sessionId)->first();
 
                 if ($room) {
                     $room->session_id = null;
                     $room->save();
                 }
 
                 // Remove all connections
                 // Note: We could remove connections one-by-one via the 'participantLeft' event
                 // but that could create many INSERTs when the session (with many participants) ends
                 // So, it is better to remove them all in a single INSERT.
                 Connection::where('session_id', $sessionId)->delete();
 
                 break;
         }
 
         return response('Success', 200);
     }
+
+    /**
+     * Check if current user is a moderator for the specified room.
+     *
+     * @param \App\OpenVidu\Room $room The room
+     *
+     * @return bool True if the current user is the room moderator
+     */
+    protected function isModerator(Room $room): bool
+    {
+        $user = Auth::guard()->user();
+
+        // The room owner is a moderator
+        if ($user && $user->id == $room->user_id) {
+            return true;
+        }
+
+        // TODO: Moderators authentication
+
+        return false;
+    }
 }
diff --git a/src/app/Observers/OpenVidu/ConnectionObserver.php b/src/app/Observers/OpenVidu/ConnectionObserver.php
new file mode 100644
index 00000000..57a86c4d
--- /dev/null
+++ b/src/app/Observers/OpenVidu/ConnectionObserver.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Observers\OpenVidu;
+
+use App\OpenVidu\Connection;
+
+class ConnectionObserver
+{
+    /**
+     * Handle the OpenVidu connection "updated" event.
+     *
+     * @param \App\OpenVidu\Connection $connection The connection.
+     *
+     * @return void
+     */
+    public function updated(Connection $connection)
+    {
+        if ($connection->role != $connection->getOriginal('role')) {
+            $params = [
+                'connectionId' => $connection->id,
+                'role' => $connection->role
+            ];
+
+            // Send the signal to all participants
+            $connection->room->signal('connectionUpdate', $params);
+
+            // TODO: When demoting publisher to subscriber maybe we should
+            // destroy all streams using REST API. For now we trust the
+            // participant browser to do this.
+        }
+    }
+}
diff --git a/src/app/OpenVidu/Connection.php b/src/app/OpenVidu/Connection.php
index ba8950bc..cccde474 100644
--- a/src/app/OpenVidu/Connection.php
+++ b/src/app/OpenVidu/Connection.php
@@ -1,57 +1,98 @@
 <?php
 
 namespace App\OpenVidu;
 
 use Illuminate\Database\Eloquent\Model;
 
 /**
  * The eloquent definition of a Connection.
  *
  * @property string  $id         OpenVidu connection identifier
  * @property array   $metadata   Connection metadata
  * @property int     $role       Connection role
  * @property int     $room_id    Room identifier
  * @property string  $session_id OpenVidu session identifier
  */
 class Connection extends Model
 {
     protected $table = 'openvidu_connections';
 
     public $incrementing = false;
     protected $keyType = 'string';
 
     /**
      * The attributes that should be cast.
      *
      * @var array
      */
     protected $casts = [
         'metadata' => 'array',
     ];
 
     /**
      * Dismiss (close) the connection.
      *
      * @return bool True on success, False on failure
      */
     public function dismiss()
     {
         if ($this->room->closeOVConnection($this->id)) {
             $this->delete();
 
             return true;
         }
 
         return false;
     }
 
     /**
      * The room to which this connection belongs.
      *
      * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
      */
     public function room()
     {
         return $this->belongsTo(Room::class, 'room_id', 'id');
     }
+
+    /**
+     * Connection role mutator
+     *
+     * @throws \Exception
+     */
+    public function setRoleAttribute($role)
+    {
+        $new_role = 0;
+
+        $allowed_values = [
+            Room::ROLE_SUBSCRIBER,
+            Room::ROLE_PUBLISHER,
+            Room::ROLE_MODERATOR,
+            Room::ROLE_SCREEN,
+            Room::ROLE_OWNER,
+        ];
+
+        foreach ($allowed_values as $value) {
+            if ($role & $value) {
+                $new_role |= $value;
+                $role ^= $value;
+            }
+        }
+
+        if ($role > 0) {
+            throw new \Exception("Invalid connection role: {$role}");
+        }
+
+        // It is either screen sharing connection or publisher/subscriber connection
+        if ($new_role & Room::ROLE_SCREEN) {
+            if ($new_role & Room::ROLE_PUBLISHER) {
+                $new_role ^= Room::ROLE_PUBLISHER;
+            }
+            if ($new_role & Room::ROLE_SUBSCRIBER) {
+                $new_role ^= Room::ROLE_SUBSCRIBER;
+            }
+        }
+
+        $this->attributes['role'] = $new_role;
+    }
 }
diff --git a/src/app/OpenVidu/Room.php b/src/app/OpenVidu/Room.php
index cc9bc124..f5d1e373 100644
--- a/src/app/OpenVidu/Room.php
+++ b/src/app/OpenVidu/Room.php
@@ -1,384 +1,409 @@
 <?php
 
 namespace App\OpenVidu;
 
 use App\Traits\SettingsTrait;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Cache;
 
 /**
  * The eloquent definition of a Room.
  *
  * @property int     $id         Room identifier
  * @property string  $name       Room name
  * @property int     $user_id    Room owner
  * @property ?string $session_id OpenVidu session identifier
  */
 class Room extends Model
 {
     use SettingsTrait;
 
     public const ROLE_SUBSCRIBER = 1 << 0;
     public const ROLE_PUBLISHER = 1 << 1;
     public const ROLE_MODERATOR = 1 << 2;
     public const ROLE_SCREEN = 1 << 3;
     public const ROLE_OWNER = 1 << 4;
 
     public const REQUEST_ACCEPTED = 'accepted';
     public const REQUEST_DENIED = 'denied';
 
     private const OV_ROLE_MODERATOR = 'MODERATOR';
     private const OV_ROLE_PUBLISHER = 'PUBLISHER';
     private const OV_ROLE_SUBSCRIBER = 'SUBSCRIBER';
 
     protected $fillable = [
         'user_id',
         'name'
     ];
 
     protected $table = 'openvidu_rooms';
 
     /** @var \GuzzleHttp\Client|null HTTP client instance */
     private static $client = null;
 
 
     /**
      * Creates HTTP client for connections to OpenVidu server
      *
      * @return \GuzzleHttp\Client HTTP client instance
      */
     private function client()
     {
         if (!self::$client) {
             self::$client = new \GuzzleHttp\Client(
                 [
                     'http_errors' => false, // No exceptions from Guzzle
                     'base_uri' => \config('openvidu.api_url'),
                     'verify' => \config('openvidu.api_verify_tls'),
                     'auth' => [
                         \config('openvidu.api_username'),
                         \config('openvidu.api_password')
                     ]
                 ]
             );
         }
 
         return self::$client;
     }
 
     /**
      * Destroy a OpenVidu connection
      *
      * @param string $conn Connection identifier
      *
      * @return bool True on success, False otherwise
      * @throws \Exception if session does not exist
      */
     public function closeOVConnection($conn): bool
     {
         if (!$this->session_id) {
             throw new \Exception("The room session does not exist");
         }
 
         $url = 'sessions/' . $this->session_id . '/connection/' . urlencode($conn);
 
         $response = $this->client()->request('DELETE', $url);
 
         return $response->getStatusCode() == 204;
     }
 
     /**
      * Fetch a OpenVidu connection information.
      *
      * @param string $conn Connection identifier
      *
      * @return ?array Connection data on success, Null otherwise
      * @throws \Exception if session does not exist
      */
     public function getOVConnection($conn): ?array
     {
         // Note: getOVConnection() not getConnection() because Eloquent\Model::getConnection() exists
         // TODO: Maybe use some other name? getParticipant?
         if (!$this->session_id) {
             throw new \Exception("The room session does not exist");
         }
 
         $url = 'sessions/' . $this->session_id . '/connection/' . urlencode($conn);
 
         $response = $this->client()->request('GET', $url);
 
         if ($response->getStatusCode() == 200) {
             return json_decode($response->getBody(), true);
         }
 
         return null;
     }
 
     /**
      * Create a OpenVidu session
      *
      * @return array|null Session data on success, NULL otherwise
      */
     public function createSession(): ?array
     {
         $response = $this->client()->request(
             'POST',
             "sessions",
             [
                 'json' => [
                     'mediaMode' => 'ROUTED',
                     'recordingMode' => 'MANUAL'
                 ]
             ]
         );
 
         if ($response->getStatusCode() !== 200) {
             $this->session_id = null;
             $this->save();
             return null;
         }
 
         $session = json_decode($response->getBody(), true);
 
         $this->session_id = $session['id'];
         $this->save();
 
         return $session;
     }
 
     /**
      * Delete a OpenVidu session
      *
      * @return bool
      */
     public function deleteSession(): bool
     {
         if (!$this->session_id) {
             return true;
         }
 
         $response = $this->client()->request(
             'DELETE',
             "sessions/" . $this->session_id,
         );
 
         if ($response->getStatusCode() == 204) {
             $this->session_id = null;
             $this->save();
 
             return true;
         }
 
         return false;
     }
 
+    /**
+     * Returns metadata for every connection in a session.
+     *
+     * @return array Connections metadata, indexed by connection identifier
+     * @throws \Exception if session does not exist
+     */
+    public function getSessionConnections(): array
+    {
+        if (!$this->session_id) {
+            throw new \Exception("The room session does not exist");
+        }
+
+        return Connection::where('session_id', $this->session_id)
+            // Ignore screen sharing connection for now
+            ->whereRaw("(role & " . self::ROLE_SCREEN . ") = 0")
+            ->get()
+            ->keyBy('id')
+            ->map(function ($item) {
+                // For now we need only 'role' property, it might change in the future.
+                // Make sure to not return all metadata here as it might contain sensitive data.
+                return ['role' => $item->role];
+            })
+            ->all();
+    }
+
     /**
      * Create a OpenVidu session (connection) token
      *
      * @param int $role User role (see self::ROLE_* constants)
      *
      * @return array|null Token data on success, NULL otherwise
      * @throws \Exception if session does not exist
      */
     public function getSessionToken($role = self::ROLE_SUBSCRIBER): ?array
     {
         if (!$this->session_id) {
             throw new \Exception("The room session does not exist");
         }
 
         // FIXME: Looks like passing the role in 'data' param is the only way
         // to make it visible for everyone in a room. So, for example we can
         // handle/style subscribers/publishers/moderators differently on the
         // client-side. Is this a security issue?
         $data = ['role' => $role];
 
         $url = 'sessions/' . $this->session_id . '/connection';
         $post = [
             'json' => [
                 'role' => self::OV_ROLE_PUBLISHER,
                 'data' => json_encode($data)
             ]
         ];
 
         $response = $this->client()->request('POST', $url, $post);
 
         if ($response->getStatusCode() == 200) {
             $json = json_decode($response->getBody(), true);
 
             // Extract the 'token' part of the token, it will be used to authenticate the connection.
             // It will be needed in next iterations e.g. to authenticate moderators that aren't
             // Kolab4 users (or are just not logged in to Kolab4).
             // FIXME: we could as well generate our own token for auth purposes
             parse_str(parse_url($json['token'], PHP_URL_QUERY), $url);
 
             // Create the connection reference in our database
             $conn = new Connection();
             $conn->id = $json['id'];
             $conn->session_id = $this->session_id;
             $conn->room_id = $this->id;
             $conn->role = $role;
             $conn->metadata = ['token' => $url['token']];
             $conn->save();
 
             return [
                 'session' => $this->session_id,
                 'token' => $json['token'],
                 'connectionId' => $json['id'],
                 'role' => $role,
             ];
         }
 
         return null;
     }
 
     /**
      * Check if the room has an active session
      *
      * @return bool True when the session exists, False otherwise
      */
     public function hasSession(): bool
     {
         if (!$this->session_id) {
             return false;
         }
 
         $response = $this->client()->request('GET', "sessions/{$this->session_id}");
 
         return $response->getStatusCode() == 200;
     }
 
     /**
      * The room owner.
      *
      * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
      */
     public function owner()
     {
         return $this->belongsTo('\App\User', 'user_id', 'id');
     }
 
     /**
      * Accept the join request.
      *
      * @param string $id Request identifier
      *
      * @return bool True on success, False on failure
      */
     public function requestAccept(string $id): bool
     {
         $request = Cache::get($this->session_id . '-' . $id);
 
         if ($request) {
             $request['status'] = self::REQUEST_ACCEPTED;
 
             return Cache::put($this->session_id . '-' . $id, $request, now()->addHours(1));
         }
 
         return false;
     }
 
     /**
      * Deny the join request.
      *
      * @param string $id Request identifier
      *
      * @return bool True on success, False on failure
      */
     public function requestDeny(string $id): bool
     {
         $request = Cache::get($this->session_id . '-' . $id);
 
         if ($request) {
             $request['status'] = self::REQUEST_DENIED;
 
             return Cache::put($this->session_id . '-' . $id, $request, now()->addHours(1));
         }
 
         return false;
     }
 
     /**
      * Get the join request data.
      *
      * @param string $id Request identifier
      *
      * @return array|null Request data (e.g. nickname, status, picture?)
      */
     public function requestGet(string $id): ?array
     {
         return Cache::get($this->session_id . '-' . $id);
     }
 
     /**
      * Save the join request.
      *
      * @param string $id      Request identifier
      * @param array  $request Request data
      *
      * @return bool True on success, False on failure
      */
     public function requestSave(string $id, array $request): bool
     {
         // We don't really need the picture in the cache
         // As we use this cache for the request status only
         unset($request['picture']);
 
         return Cache::put($this->session_id . '-' . $id, $request, now()->addHours(1));
     }
 
     /**
      * Any (additional) properties of this room.
      *
      * @return \Illuminate\Database\Eloquent\Relations\HasMany
      */
     public function settings()
     {
         return $this->hasMany('App\OpenVidu\RoomSetting', 'room_id');
     }
 
     /**
      * Send a OpenVidu signal to the session participants (connections)
      *
      * @param string            $name   Signal name (type)
      * @param array             $data   Signal data array
      * @param null|int|string[] $target List of target connections, Null for all connections.
      *                                  It can be also a participant role.
      *
      * @return bool True on success, False on failure
      * @throws \Exception if session does not exist
      */
     public function signal(string $name, array $data = [], $target = null): bool
     {
         if (!$this->session_id) {
             throw new \Exception("The room session does not exist");
         }
 
         $post = [
             'session' => $this->session_id,
             'type' => $name,
             'data' => $data ? json_encode($data) : '',
         ];
 
         // Get connection IDs by participant role
         if (is_int($target)) {
             $connections = Connection::where('session_id', $this->session_id)
                 ->whereRaw("(role & $target)")
                 ->pluck('id')
                 ->all();
 
             if (empty($connections)) {
                 return false;
             }
 
             $target = $connections;
         }
 
         if (!empty($target)) {
             $post['to'] = $target;
         }
 
         $response = $this->client()->request('POST', 'signal', ['json' => $post]);
 
         return $response->getStatusCode() == 200;
     }
 }
diff --git a/src/app/Providers/AppServiceProvider.php b/src/app/Providers/AppServiceProvider.php
index 2209bbf2..40437600 100644
--- a/src/app/Providers/AppServiceProvider.php
+++ b/src/app/Providers/AppServiceProvider.php
@@ -1,60 +1,61 @@
 <?php
 
 namespace App\Providers;
 
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Schema;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
 {
     /**
      * Register any application services.
      *
      * @return void
      */
     public function register()
     {
         //
     }
 
     /**
      * Bootstrap any application services.
      *
      * @return void
      */
     public function boot()
     {
         \App\Discount::observe(\App\Observers\DiscountObserver::class);
         \App\Domain::observe(\App\Observers\DomainObserver::class);
         \App\Entitlement::observe(\App\Observers\EntitlementObserver::class);
         \App\Group::observe(\App\Observers\GroupObserver::class);
+        \App\OpenVidu\Connection::observe(\App\Observers\OpenVidu\ConnectionObserver::class);
         \App\Package::observe(\App\Observers\PackageObserver::class);
         \App\PackageSku::observe(\App\Observers\PackageSkuObserver::class);
         \App\Plan::observe(\App\Observers\PlanObserver::class);
         \App\SignupCode::observe(\App\Observers\SignupCodeObserver::class);
         \App\Sku::observe(\App\Observers\SkuObserver::class);
         \App\Transaction::observe(\App\Observers\TransactionObserver::class);
         \App\User::observe(\App\Observers\UserObserver::class);
         \App\UserAlias::observe(\App\Observers\UserAliasObserver::class);
         \App\UserSetting::observe(\App\Observers\UserSettingObserver::class);
         \App\VerificationCode::observe(\App\Observers\VerificationCodeObserver::class);
         \App\Wallet::observe(\App\Observers\WalletObserver::class);
 
         Schema::defaultStringLength(191);
 
         // Log SQL queries in debug mode
         if (\config('app.debug')) {
             DB::listen(function ($query) {
                 \Log::debug(sprintf('[SQL] %s [%s]', $query->sql, implode(', ', $query->bindings)));
             });
         }
 
         // Register some template helpers
         Blade::directive('theme_asset', function ($path) {
             $path = trim($path, '/\'"');
             return "<?php echo secure_asset('themes/' . \$env['app.theme'] . '/' . '$path'); ?>";
         });
     }
 }
diff --git a/src/resources/js/meet/app.js b/src/resources/js/meet/app.js
index db3c0781..4b19e7df 100644
--- a/src/resources/js/meet/app.js
+++ b/src/resources/js/meet/app.js
@@ -1,1078 +1,1301 @@
 import anchorme from 'anchorme'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { OpenVidu } from 'openvidu-browser'
 
 class Roles {
     static get SUBSCRIBER() { return 1 << 0; }
     static get PUBLISHER() { return 1 << 1; }
     static get MODERATOR() { return 1 << 2; }
     static get SCREEN() { return 1 << 3; }
     static get OWNER() { return 1 << 4; }
 }
 
 function Meet(container)
 {
     let OV                      // OpenVidu object to initialize a session
     let session                 // Session object where the user will connect
     let publisher               // Publisher object which the user will publish
     let audioActive = false     // True if the audio track of the publisher is active
     let videoActive = false     // True if the video track of the publisher is active
-    let numOfVideos = 0         // Keeps track of the number of videos that are being shown
     let audioSource = ''        // Currently selected microphone
     let videoSource = ''        // Currently selected camera
     let sessionData             // Room session metadata
 
     let screenOV                // OpenVidu object to initialize a screen sharing session
     let screenSession           // Session object where the user will connect for screen sharing
     let screenPublisher         // Publisher object which the user will publish the screen sharing
 
     let publisherDefaults = {
         publishAudio: true,     // Whether to start publishing with your audio unmuted or not
         publishVideo: true,     // Whether to start publishing with your video enabled or not
         resolution: '640x480',  // The resolution of your video
         frameRate: 30,          // The frame rate of your video
         mirror: true            // Whether to mirror your local video or not
     }
 
     let cameras = []            // List of user video devices
     let microphones = []        // List of user audio devices
     let connections = {}        // Connected users in the session
 
     let containerWidth
     let containerHeight
     let chatCount = 0
     let volumeElement
-    let setupProps
     let subscribersContainer
 
     OV = new OpenVidu()
     screenOV = new OpenVidu()
 
     // If there's anything to do, do it here.
     //OV.setAdvancedConfiguration(config)
 
     // Disable all logging except errors
     // OV.enableProdMode()
 
     // Disconnect participant when browser's window close
     window.addEventListener('beforeunload', () => {
         leaveRoom()
     })
 
     window.addEventListener('resize', resize)
 
     // Public methods
     this.isScreenSharingSupported = isScreenSharingSupported
     this.joinRoom = joinRoom
     this.leaveRoom = leaveRoom
-    this.setup = setup
+    this.setupStart = setupStart
+    this.setupStop = setupStop
     this.setupSetAudioDevice = setupSetAudioDevice
     this.setupSetVideoDevice = setupSetVideoDevice
     this.switchAudio = switchAudio
     this.switchScreen = switchScreen
     this.switchVideo = switchVideo
     this.updateSession = updateSession
 
     /**
      * Join the room session
      *
-     * @param data Session metadata and event handlers (session, token, shareToken, nickname, role,
-     *             chatElement, menuElement, onDestroy, onJoinRequest)
+     * @param data Session metadata and event handlers (token, shareToken, nickname, role, connections,
+     *             chatElement, menuElement, onDestroy, onJoinRequest, onDismiss, onConnectionChange,
+     *             onSessionDataUpdate, onMediaSetup)
      */
     function joinRoom(data) {
         resize();
         volumeMeterStop()
 
         data.params = {
             nickname: data.nickname, // user nickname
             // avatar: undefined        // avatar image
         }
 
         // Create a container for subscribers
         if (!subscribersContainer) {
             subscribersContainer = $('<div id="meet-subscribers">').appendTo(container).get(0)
         }
 
         sessionData = data
 
         // Init a session
         session = OV.initSession()
 
         // Handle connection creation events
         session.on('connectionCreated', event => {
             // Ignore the current user connection
             if (event.connection.role) {
                 return
             }
 
             // This is the first event executed when a user joins in.
             // We'll create the video wrapper here, which can be re-used
             // in 'streamCreated' event handler.
-            // Note: For a user with a subscriber role 'streamCreated' event
-            // is not being dispatched at all
 
             let metadata = connectionData(event.connection)
-            let connectionId = event.connection.connectionId
-            metadata.connId = connectionId
-
-            let element = participantCreate(metadata)
+            const connId = metadata.connectionId
+
+            // The connection metadata here is the initial metadata set on
+            // connection initialization. There's no way to update it via OpenVidu API.
+            // So, we merge the initial connection metadata with up-to-dated one that
+            // we got from our database.
+            if (sessionData.connections && connId in sessionData.connections) {
+                Object.assign(metadata, sessionData.connections[connId])
+                delete sessionData.connections[connId]
+            }
 
-            connections[connectionId] = { element }
+            metadata.element = participantCreate(metadata)
 
-            resize()
+            connections[connId] = metadata
 
             // Send the current user status to the connecting user
             // otherwise e.g. nickname might be not up to date
             signalUserUpdate(event.connection)
         })
 
         session.on('connectionDestroyed', event => {
             let conn = connections[event.connection.connectionId]
             if (conn) {
-                if ($(conn.element).is('.meet-video')) {
-                    numOfVideos--
-                }
                 $(conn.element).remove()
                 delete connections[event.connection.connectionId]
             }
             resize()
         })
 
         // On every new Stream received...
         session.on('streamCreated', event => {
-            let connection = event.stream.connection
-            let connectionId = connection.connectionId
-            let metadata = connectionData(connection)
-            let wrapper = connections[connectionId].element
+            let connectionId = event.stream.connection.connectionId
+            let metadata = connections[connectionId]
             let props = {
                 // Prepend the video element so it is always before the watermark element
                 insertMode: 'PREPEND'
             }
 
             // Subscribe to the Stream to receive it
-            let subscriber = session.subscribe(event.stream, wrapper, props);
+            let subscriber = session.subscribe(event.stream, metadata.element, props);
 
             subscriber.on('videoElementCreated', event => {
                 $(event.element).prop({
                     tabindex: -1
                 })
 
                 resize()
             })
-/*
-            subscriber.on('videoElementDestroyed', event => {
-            })
-*/
+
+            metadata.audioActive = event.stream.audioActive
+            metadata.videoActive = event.stream.videoActive
+
             // Update the wrapper controls/status
-            participantUpdate(wrapper, event.stream)
+            participantUpdate(metadata.element, metadata)
         })
-/*
-        session.on('streamDestroyed', event => {
+
+        // Stream properties changes e.g. audio/video muted/unmuted
+        session.on('streamPropertyChanged', event => {
+            let connectionId = event.stream.connection.connectionId
+            let metadata = connections[connectionId]
+
+            if (session.connection.connectionId == connectionId) {
+                metadata = sessionData
+            }
+
+            if (metadata) {
+                metadata[event.changedProperty] = event.newValue
+                participantUpdate(metadata.element, metadata)
+            }
         })
-*/
+
         // Handle session disconnection events
         session.on('sessionDisconnected', event => {
             if (data.onDestroy) {
                 data.onDestroy(event)
             }
 
             resize()
         })
 
         // Handle signals from all participants
         session.on('signal', signalEventHandler)
 
         // Connect with the token
         session.connect(data.token, data.params)
             .then(() => {
-                let wrapper
-                let params = { self: true, role: data.role, audioActive, videoActive }
+                let params = {
+                    connectionId: session.connection.connectionId,
+                    role: data.role,
+                    audioActive,
+                    videoActive
+                }
+
                 params = Object.assign({}, data.params, params)
 
                 publisher.on('videoElementCreated', event => {
                     $(event.element).prop({
                             muted: true, // Mute local video to avoid feedback
                             disablePictureInPicture: true, // this does not work in Firefox
                             tabindex: -1
                     })
                     resize()
                 })
 
-                wrapper = participantCreate(params)
+                let wrapper = participantCreate(params)
 
                 if (data.role & Roles.PUBLISHER) {
                     publisher.createVideoElement(wrapper, 'PREPEND')
                     session.publish(publisher)
                 }
 
-                resize()
-                sessionData.wrapper = wrapper
+                sessionData.element = wrapper
             })
             .catch(error => {
                 console.error('There was an error connecting to the session: ', error.message);
             })
 
         // Prepare the chat
         setupChat()
     }
 
     /**
      * Leave the room (disconnect)
      */
     function leaveRoom() {
         if (publisher) {
             volumeMeterStop()
 
             // FIXME: We have to unpublish streams only if there's no session yet
             if (!session && audioActive) {
                 publisher.publishAudio(false)
             }
             if (!session && videoActive) {
                 publisher.publishVideo(false)
             }
 
             publisher = null
         }
 
         if (session) {
             session.disconnect();
             session = null
         }
 
         if (screenSession) {
             screenSession.disconnect();
             screenSession = null
         }
     }
 
     /**
      * Sets the audio and video devices for the session.
      * This will ask user for permission to access media devices.
      *
      * @param props Setup properties (videoElement, volumeElement, onSuccess, onError)
      */
-    function setup(props) {
-        setupProps = props
+    function setupStart(props) {
+        // Note: After changing media permissions in Chrome/Firefox a page refresh is required.
+        // That means that in a scenario where you first blocked access to media devices
+        // and then allowed it we can't ask for devices list again and expect a different
+        // result than before.
+        // That's why we do not bother, and return ealy when we open the media setup dialog.
+        if (publisher) {
+            volumeMeterStart()
+            return
+        }
 
         publisher = OV.initPublisher(undefined, publisherDefaults)
 
         publisher.once('accessDenied', error => {
             props.onError(error)
         })
 
         publisher.once('accessAllowed', async () => {
             let mediaStream = publisher.stream.getMediaStream()
             let videoStream = mediaStream.getVideoTracks()[0]
             let audioStream = mediaStream.getAudioTracks()[0]
 
             audioActive = !!audioStream
             videoActive = !!videoStream
             volumeElement = props.volumeElement
 
             publisher.addVideoElement(props.videoElement)
 
             volumeMeterStart()
 
             const devices = await OV.getDevices()
 
             devices.forEach(device => {
                 // device's props: deviceId, kind, label
                 if (device.kind == 'videoinput') {
                     cameras.push(device)
                     if (videoStream && videoStream.label == device.label) {
                         videoSource = device.deviceId
                     }
                 } else if (device.kind == 'audioinput') {
                     microphones.push(device)
                     if (audioStream && audioStream.label == device.label) {
                         audioSource = device.deviceId
                     }
                 }
             })
 
             props.onSuccess({
                 microphones,
                 cameras,
                 audioSource,
                 videoSource,
                 audioActive,
                 videoActive
             })
         })
     }
 
+    /**
+     * Stop the setup "process", cleanup after it.
+     */
+    function setupStop() {
+        volumeMeterStop()
+    }
+
     /**
      * Change the publisher audio device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetAudioDevice(deviceId) {
         if (!deviceId) {
             publisher.publishAudio(false)
             volumeMeterStop()
             audioActive = false
         } else if (deviceId == audioSource) {
             publisher.publishAudio(true)
             volumeMeterStart()
             audioActive = true
         } else {
             const mediaStream = publisher.stream.mediaStream
-            const oldTrack = mediaStream.getAudioTracks()[0]
-
-            let properties = Object.assign({}, publisherDefaults, {
+            const properties = Object.assign({}, publisherDefaults, {
                 publishAudio: true,
                 publishVideo: videoActive,
                 audioSource: deviceId,
                 videoSource: videoSource
             })
 
             volumeMeterStop()
 
-            // Note: We're not using publisher.replaceTrack() as it wasn't working for me
-
-            // Stop and remove the old track
-            if (oldTrack) {
-                oldTrack.stop()
-                mediaStream.removeTrack(oldTrack)
-            }
+            // Stop and remove the old track, otherwise you get "Concurrent mic process limit." error
+            mediaStream.getAudioTracks().forEach(track => {
+                track.stop()
+                mediaStream.removeTrack(track)
+            })
 
             // TODO: Handle errors
 
             await OV.getUserMedia(properties)
                 .then(async (newMediaStream) => {
-                    publisher.stream.mediaStream = newMediaStream
+                    await replaceTrack(newMediaStream.getAudioTracks()[0])
                     volumeMeterStart()
                     audioActive = true
                     audioSource = deviceId
                 })
         }
 
         return audioActive
     }
 
     /**
      * Change the publisher video device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetVideoDevice(deviceId) {
         if (!deviceId) {
             publisher.publishVideo(false)
             videoActive = false
         } else if (deviceId == videoSource) {
             publisher.publishVideo(true)
             videoActive = true
         } else {
             const mediaStream = publisher.stream.mediaStream
-            const oldTrack = mediaStream.getAudioTracks()[0]
-
-            let properties = Object.assign({}, publisherDefaults, {
+            const properties = Object.assign({}, publisherDefaults, {
                 publishAudio: audioActive,
                 publishVideo: true,
                 audioSource: audioSource,
                 videoSource: deviceId
             })
 
             volumeMeterStop()
 
-            // Stop and remove the old track
-            if (oldTrack) {
-                oldTrack.stop()
-                mediaStream.removeTrack(oldTrack)
-            }
+            // Stop and remove the old track, otherwise you get "Concurrent mic process limit." error
+            mediaStream.getVideoTracks().forEach(track => {
+                track.stop()
+                mediaStream.removeTrack(track)
+            })
 
             // TODO: Handle errors
 
             await OV.getUserMedia(properties)
                 .then(async (newMediaStream) => {
-                    publisher.stream.mediaStream = newMediaStream
+                    await replaceTrack(newMediaStream.getVideoTracks()[0])
                     volumeMeterStart()
                     videoActive = true
                     videoSource = deviceId
                 })
         }
 
         return videoActive
     }
 
+    /**
+     * A way to switch tracks in a stream.
+     * Note: This is close to what publisher.replaceTrack() does but it does not
+     * require the session.
+     * Note: The old track needs to be removed before OV.getUserMedia() call,
+     * otherwise we get "Concurrent mic process limit" error.
+     */
+    function replaceTrack(track) {
+        const stream = publisher.stream
+
+        const replaceMediaStreamTrack = () => {
+            stream.mediaStream.addTrack(track);
+
+            if (session) {
+                session.sendVideoData(publisher.stream.streamManager, 5, true, 5);
+            }
+        }
+
+        return new Promise((resolve, reject) => {
+            if (stream.isLocalStreamPublished) {
+                // Only if the Publisher has been published it is necessary to call the native
+                // Web API RTCRtpSender.replaceTrack()
+                const senders = stream.getRTCPeerConnection().getSenders()
+                let sender
+
+                if (track.kind === 'video') {
+                    sender = senders.find(s => !!s.track && s.track.kind === 'video')
+                } else {
+                    sender = senders.find(s => !!s.track && s.track.kind === 'audio')
+                }
+
+                if (!sender) return
+
+                sender.replaceTrack(track).then(() => {
+                    replaceMediaStreamTrack()
+                    resolve()
+                }).catch(error => {
+                    reject(error)
+                })
+            } else {
+                // Publisher not published. Simply modify local MediaStream tracks
+                replaceMediaStreamTrack()
+                resolve()
+            }
+        })
+    }
+
     /**
      * Setup the chat UI
      */
     function setupChat() {
         // The UI elements are created in the vue template
         // Here we add a logic for how they work
 
         const textarea = $(sessionData.chatElement).find('textarea')
         const button = $(sessionData.menuElement).find('.link-chat')
 
         textarea.on('keydown', e => {
             if (e.keyCode == 13 && !e.shiftKey) {
                 if (textarea.val().length) {
                     signalChat(textarea.val())
                     textarea.val('')
                 }
 
                 return false
             }
         })
 
         // Add an element for the count of unread messages on the chat button
         button.append('<span class="badge badge-dark blinker">')
             .on('click', () => {
                 button.find('.badge').text('')
                 chatCount = 0
             })
     }
 
     /**
      * Signal events handler
      */
     function signalEventHandler(signal) {
         let conn, data
         let connId = signal.from ? signal.from.connectionId : null
 
         switch (signal.type) {
             case 'signal:userChanged':
+                // TODO: Use 'signal:connectionUpdate' for nickname updates?
                 if (conn = connections[connId]) {
                     data = JSON.parse(signal.data)
 
-                    participantUpdate(conn.element, data)
+                    conn.nickname = data.nickname
+                    participantUpdate(conn.element, conn)
                     nicknameUpdate(data.nickname, connId)
                 }
                 break
 
             case 'signal:chat':
                 data = JSON.parse(signal.data)
                 data.id = connId
                 pushChatMessage(data)
                 break
 
             case 'signal:joinRequest':
-                if (sessionData.onJoinRequest) {
+                // accept requests from the server only
+                if (!connId && sessionData.onJoinRequest) {
                     sessionData.onJoinRequest(JSON.parse(signal.data))
                 }
-                break;
+                break
+
+            case 'signal:connectionUpdate':
+                // accept requests from the server only
+                if (!connId) {
+                    data = JSON.parse(signal.data)
+
+                    connectionUpdate(data)
+                }
+                break
         }
     }
 
     /**
      * Send the chat message to other participants
      *
      * @param message Message string
      */
     function signalChat(message) {
         let data = {
             nickname: sessionData.params.nickname,
             message
         }
 
         session.signal({
             data: JSON.stringify(data),
             type: 'chat'
         })
     }
 
     /**
      * Add a message to the chat
      *
      * @param data Object with a message, nickname, id (of the connection, empty for self)
      */
     function pushChatMessage(data) {
         let message = $('<span>').text(data.message).text() // make the message secure
 
         // Format the message, convert emails and urls to links
         message = anchorme({
             input: message,
             options: {
                 attributes: {
                     target: "_blank"
                 },
                 // any link above 20 characters will be truncated
                 // to 20 characters and ellipses at the end
                 truncate: 20,
                 // characters will be taken out of the middle
                 middleTruncation: true
             }
             // TODO: anchorme is extensible, we could support
             //       github/phabricator's markup e.g. backticks for code samples
         })
 
         message = message.replace(/\r?\n/, '<br>')
 
         // Display the message
         let isSelf = data.id == session.connectionId
         let chat = $(sessionData.chatElement).find('.chat')
         let box = chat.find('.message').last()
 
         message = $('<div>').html(message)
 
         message.find('a').attr('rel', 'noreferrer')
 
         if (box.length && box.data('id') == data.id) {
             // A message from the same user as the last message, no new box needed
             message.appendTo(box)
         } else {
             box = $('<div class="message">').data('id', data.id)
                 .append($('<div class="nickname">').text(data.nickname || ''))
                 .append(message)
                 .appendTo(chat)
 
             if (isSelf) {
                 box.addClass('self')
             }
         }
 
         // Count unread messages
         if (!$(sessionData.chatElement).is('.open')) {
             if (!isSelf) {
                 chatCount++
             }
         } else {
             chatCount = 0
         }
 
         $(sessionData.menuElement).find('.link-chat .badge').text(chatCount ? chatCount : '')
     }
 
     /**
      * Send the user properties update signal to other participants
      *
      * @param connection Optional connection to which the signal will be sent
      *                   If not specified the signal is sent to all participants
      */
     function signalUserUpdate(connection) {
         let data = {
-            audioActive,
-            videoActive,
             nickname: sessionData.params.nickname
         }
 
-        // Note: StreamPropertyChangedEvent might be more standard way
-        // to propagate the audio/video state change to other users.
-        // It looks there's no other way to propagate nickname changes.
         session.signal({
             data: JSON.stringify(data),
             type: 'userChanged',
             to: connection ? [connection] : undefined
         })
 
         // The same nickname for screen sharing session
         if (screenSession) {
-            data.audioActive = false
-            data.videoActive = true
             screenSession.signal({
                 data: JSON.stringify(data),
                 type: 'userChanged',
                 to: connection ? [connection] : undefined
             })
         }
     }
 
     /**
      * Mute/Unmute audio for current session publisher
      */
     function switchAudio() {
         // TODO: If user has no devices or denied access to them in the setup,
         //       the button will just not work. Find a way to make it working
         //       after user unlocks his devices. For now he has to refresh
         //       the page and join the room again.
         if (microphones.length) {
             try {
                 publisher.publishAudio(!audioActive)
                 audioActive = !audioActive
-                participantUpdate(sessionData.wrapper, { audioActive })
-                signalUserUpdate()
             } catch (e) {
                 console.error(e)
             }
         }
 
         return audioActive
     }
 
     /**
      * Mute/Unmute video for current session publisher
      */
     function switchVideo() {
         // TODO: If user has no devices or denied access to them in the setup,
         //       the button will just not work. Find a way to make it working
         //       after user unlocks his devices. For now he has to refresh
         //       the page and join the room again.
         if (cameras.length) {
             try {
                 publisher.publishVideo(!videoActive)
                 videoActive = !videoActive
-                participantUpdate(sessionData.wrapper, { videoActive })
-                signalUserUpdate()
             } catch (e) {
                 console.error(e)
             }
         }
 
         return videoActive
     }
 
     /**
      * Switch on/off screen sharing
      */
     function switchScreen(callback) {
         if (screenPublisher) {
             screenSession.disconnect()
             screenSession = null
             screenPublisher = null
 
             if (callback) {
                 // Note: Disconnecting invalidates the token. The callback should request
                 //       a new token for the next screen sharing session.
                 callback(false)
             }
 
             return
         }
 
         screenConnect(callback)
     }
 
     /**
      * Detect if screen sharing is supported by the browser
      */
     function isScreenSharingSupported() {
         return !!OV.checkScreenSharingCapabilities();
     }
 
+    /**
+     * Update participant connection state
+     */
+    function connectionUpdate(data) {
+        let conn = connections[data.connectionId]
+
+        // It's me
+        if (session.connection.connectionId == data.connectionId) {
+            const rolePublisher = data.role && data.role & Roles.PUBLISHER
+            const isPublisher = sessionData.role & Roles.PUBLISHER
+
+            // Inform the vue component, so it can update some UI controls
+            let update = () => {
+                if (sessionData.onSessionDataUpdate) {
+                    sessionData.onSessionDataUpdate(data)
+                }
+            }
+
+            // demoted to a subscriber
+            if ('role' in data && isPublisher && !rolePublisher) {
+                session.unpublish(publisher)
+                // FIXME: There's a reference in OpenVidu to a video element that should not
+                // exist anymore. It causes issues when we try to do publish/unpublish
+                // sequence multiple times in a row. So, we're clearing the reference here.
+                let videos = publisher.stream.streamManager.videos
+                publisher.stream.streamManager.videos = videos.filter(video => video.video.parentNode != null)
+            }
+
+            // merge the changed data into internal session metadata object
+            Object.keys(data).forEach(key => { sessionData[key] = data[key] })
+
+            // update the participant element
+            sessionData.element = participantUpdate(sessionData.element, sessionData)
+
+            // promoted to a publisher
+            if ('role' in data && !isPublisher && rolePublisher) {
+                publisher.createVideoElement(sessionData.element, 'PREPEND')
+                session.publish(publisher).then(() => {
+                    data.audioActive = publisher.stream.audioActive
+                    data.videoActive = publisher.stream.videoActive
+                    update()
+                })
+
+                // TODO: Here the user is asked for media permissions again
+                // should we rather start the stream without asking the user?
+                // Or maybe we want to display the media setup/preview form?
+                // Need to find a way to do this.
+            } else {
+                // Inform the vue component, so it can update some UI controls
+                update()
+            }
+        } else if (conn) {
+            // merge the changed data into internal session metadata object
+            Object.keys(data).forEach(key => { conn[key] = data[key] })
+
+            conn.element = participantUpdate(conn.element, conn)
+        }
+    }
+
     /**
      * Update nickname in chat
      *
      * @param nickname     Nickname
      * @param connectionId Connection identifier of the user
      */
     function nicknameUpdate(nickname, connectionId) {
         if (connectionId) {
             $(sessionData.chatElement).find('.chat').find('.message').each(function() {
                 let elem = $(this)
                 if (elem.data('id') == connectionId) {
                     elem.find('.nickname').text(nickname || '')
                 }
             })
         }
     }
 
     /**
      * Create a participant element in the matrix. Depending on the connection role
      * parameter it will be a video element wrapper inside the matrix or a simple
      * tag-like element on the subscribers list.
      *
      * @param params Connection metadata/params
      *
      * @return The element
      */
     function participantCreate(params) {
+        let element
+
+        params.isSelf = params.isSelf || session.connection.connectionId == params.connectionId
+
         if (params.role & Roles.PUBLISHER || params.role & Roles.SCREEN) {
-            return publisherCreate(params)
+            element = publisherCreate(params)
+        } else {
+            element = subscriberCreate(params)
         }
 
-        return subscriberCreate(params)
+        setTimeout(resize, 50);
+
+        return element
     }
 
     /**
      * Create a <video> element wrapper with controls
      *
      * @param params Connection metadata/params
      */
     function publisherCreate(params) {
         // Create the element
         let wrapper = $(
             '<div class="meet-video">'
             + svgIcon('user', 'fas', 'watermark')
             + '<div class="controls">'
+                + '<button type="button" class="btn btn-link link-setup hidden" title="Media setup">' + svgIcon('cog') + '</button>'
                 + '<button type="button" class="btn btn-link link-audio hidden" title="Mute audio">' + svgIcon('volume-mute') + '</button>'
                 + '<button type="button" class="btn btn-link link-fullscreen closed hidden" title="Full screen">' + svgIcon('expand') + '</button>'
                 + '<button type="button" class="btn btn-link link-fullscreen open hidden" title="Full screen">' + svgIcon('compress') + '</button>'
             + '</div>'
             + '<div class="status">'
                 + '<span class="bg-danger status-audio hidden">' + svgIcon('microphone') + '</span>'
                 + '<span class="bg-danger status-video hidden">' + svgIcon('video') + '</span>'
             + '</div>'
             + '</div>'
         )
 
         // Append the nickname widget
         wrapper.find('.controls').before(nicknameWidget(params))
 
-        if (!params.self) {
+        if (params.isSelf) {
+            if (sessionData.onMediaSetup) {
+                wrapper.find('.link-setup').removeClass('hidden')
+                    .click(() => sessionData.onMediaSetup())
+            }
+        } else {
             // Enable audio mute button
             wrapper.find('.link-audio').removeClass('hidden')
                 .on('click', e => {
                     let video = wrapper.find('video')[0]
                     video.muted = !video.muted
                     wrapper.find('.link-audio')[video.muted ? 'addClass' : 'removeClass']('text-danger')
                 })
         }
 
         participantUpdate(wrapper, params)
 
         // Fullscreen control
         if (document.fullscreenEnabled) {
             wrapper.find('.link-fullscreen.closed').removeClass('hidden')
                 .on('click', () => {
                     wrapper.get(0).requestFullscreen()
                 })
 
             wrapper.find('.link-fullscreen.open')
                 .on('click', () => {
                     document.exitFullscreen()
                 })
 
             wrapper.on('fullscreenchange', () => {
                 // const enabled = document.fullscreenElement
                 wrapper.find('.link-fullscreen.closed').toggleClass('hidden')
                 wrapper.find('.link-fullscreen.open').toggleClass('hidden')
                 wrapper.toggleClass('fullscreen')
             })
         }
 
-        numOfVideos++
-
         // Remove the subscriber element, if exists
-        $('#subscriber-' + params.connId).remove()
+        $('#subscriber-' + params.connectionId).remove()
 
-        return wrapper[params.self ? 'prependTo' : 'appendTo'](container).get(0)
+        return wrapper[params.isSelf ? 'prependTo' : 'appendTo'](container)
+            .attr('id', 'publisher-' + params.connectionId)
+            .get(0)
     }
 
     /**
      * Update the <video> wrapper controls
      *
      * @param wrapper The wrapper element
      * @param params  Connection metadata/params
      */
     function participantUpdate(wrapper, params) {
-        const $element = $(wrapper)
+        const element = $(wrapper)
+        const isModerator = sessionData.role & Roles.MODERATOR
+        const isSelf = session.connection.connectionId == params.connectionId
+
+        // Handle publisher-to-subscriber and subscriber-to-publisher change
+        if ('role' in params && !(params.role & Roles.SCREEN)) {
+            const rolePublisher = params.role & Roles.PUBLISHER
+            const isPublisher = element.is('.meet-video')
+
+            if ((rolePublisher && !isPublisher) || (!rolePublisher && isPublisher)) {
+                element.remove()
+                return participantCreate(params)
+            }
+
+            element.find('.action-role-publisher input').prop('checked', params.role & Roles.PUBLISHER)
+        }
 
         if ('audioActive' in params) {
-            $element.find('.status-audio')[params.audioActive ? 'addClass' : 'removeClass']('hidden')
+            element.find('.status-audio')[params.audioActive ? 'addClass' : 'removeClass']('hidden')
         }
 
         if ('videoActive' in params) {
-            $element.find('.status-video')[params.videoActive ? 'addClass' : 'removeClass']('hidden')
+            element.find('.status-video')[params.videoActive ? 'addClass' : 'removeClass']('hidden')
         }
 
         if ('nickname' in params) {
-            $element.find('.meet-nickname > .content').text(params.nickname)
+            element.find('.meet-nickname > .content').text(params.nickname)
         }
 
-        if (params.self) {
-            $element.addClass('self')
+        if (isSelf) {
+            element.addClass('self')
         }
 
-        if (sessionData.role & Roles.MODERATOR) {
-            $element.addClass('moderated')
+        if (isModerator) {
+            element.addClass('moderated')
         }
+
+        element.find('.dropdown-menu')[isSelf || isModerator ? 'removeClass' : 'addClass']('hidden')
+        element.find('.permissions')[isModerator ? 'removeClass' : 'addClass']('hidden')
+
+        if ('role' in params && params.role & Roles.SCREEN) {
+            element.find('.permissions').addClass('hidden')
+        }
+
+        return wrapper
     }
 
     /**
      * Create a tag-like element for a subscriber participant
      *
      * @param params Connection metadata/params
      */
     function subscriberCreate(params) {
         // Create the element
         let wrapper = $('<div class="meet-subscriber">').append(nicknameWidget(params))
 
         participantUpdate(wrapper, params)
 
-        return wrapper[params.self ? 'prependTo' : 'appendTo'](subscribersContainer)
-            .attr('id', 'subscriber-' + params.connId)
+        return wrapper[params.isSelf ? 'prependTo' : 'appendTo'](subscribersContainer)
+            .attr('id', 'subscriber-' + params.connectionId)
             .get(0)
     }
 
     /**
      * Create a tag-like nickname widget
      *
      * @param object params Connection metadata/params
      */
     function nicknameWidget(params) {
         // Create the element
         let element = $(
             '<div class="dropdown">'
-                + '<a href="#" class="meet-nickname btn" title="Nickname" aria-haspopup="true" aria-expanded="false" role="button">'
+                + '<a href="#" class="meet-nickname btn" aria-haspopup="true" aria-expanded="false" role="button">'
                     + '<span class="content"></span>'
                     + '<span class="icon">' + svgIcon('user') + '</span>'
                 + '</a>'
                 + '<div class="dropdown-menu">'
+                    + '<a class="dropdown-item action-nickname" href="#">Nickname</a>'
                     + '<a class="dropdown-item action-dismiss" href="#">Dismiss</a>'
+                    + '<div class="dropdown-divider permissions"></div>'
+                    + '<div class="permissions">'
+                        + '<h6 class="dropdown-header">Permissions</h6>'
+                        + '<label class="dropdown-item action-role-publisher custom-control custom-switch">'
+                            + '<input type="checkbox" class="custom-control-input">'
+                            + ' <span class="custom-control-label">Audio &amp; Video publishing</span>'
+                        + '</label>'
+                        //+ '<label class="dropdown-item action-role-moderator custom-control custom-switch">'
+                        //    + '<input type="checkbox" class="custom-control-input">'
+                        //    + ' <span class="custom-control-label">Moderation</span>'
+                        //+ '</label>'
+                    + '</div>'
                 + '</div>'
             + '</div>'
         )
 
         let nickname = element.find('.meet-nickname')
-            .addClass('btn btn-outline-' + (params.self ? 'primary' : 'secondary'))
+            .addClass('btn btn-outline-' + (params.isSelf ? 'primary' : 'secondary'))
+            .attr({title: 'Options', 'data-toggle': 'dropdown'})
+            .dropdown({boundary: container})
 
-        if (params.self) {
+        if (params.isSelf) {
             // Add events for nickname change
             let editable = element.find('.content')[0]
             let editableEnable = () => {
                 editable.contentEditable = true
                 editable.focus()
             }
             let editableUpdate = () => {
                 editable.contentEditable = false
                 sessionData.params.nickname = editable.innerText
                 signalUserUpdate()
                 nicknameUpdate(editable.innerText, session.connection.connectionId)
             }
 
-            nickname.on('click', editableEnable)
+            element.find('.action-nickname').on('click', editableEnable)
+            element.find('.action-dismiss').remove()
 
             $(editable).on('blur', editableUpdate)
                 .on('keydown', e => {
                     // Enter or Esc
                     if (e.keyCode == 13 || e.keyCode == 27) {
                         editableUpdate()
                         return false
                     }
                 })
-        } else if (sessionData.role & Roles.MODERATOR) {
-            nickname.attr({title: 'Options', 'data-toggle': 'dropdown'})
-                .dropdown({boundary: container})
+        } else {
+            element.find('.action-nickname').remove()
 
             element.find('.action-dismiss').on('click', e => {
                 if (sessionData.onDismiss) {
-                    sessionData.onDismiss(params.connId)
+                    sessionData.onDismiss(params.connectionId)
+                }
+            })
+        }
+
+        // Don't close the menu on permission change
+        element.find('.dropdown-menu > label').on('click', e => { e.stopPropagation() })
+
+        if (sessionData.onConnectionChange) {
+            element.find('.action-role-publisher input').on('change', e => {
+                const enabled = e.target.checked
+                let role = params.role
+
+                if (enabled) {
+                    role |= Roles.PUBLISHER
+                } else {
+                    role |= Roles.SUBSCRIBER
+                    if (role & Roles.PUBLISHER) {
+                        role ^= Roles.PUBLISHER
+                    }
                 }
+
+                sessionData.onConnectionChange(params.connectionId, { role })
+            })
+
+            element.find('.action-role-moderator input').on('change', e => {
+                const enabled = e.target.checked
+                let role = params.role
+
+                if (enabled) {
+                    role |= Roles.MODERATOR
+                } else if (role & Roles.MODERATOR) {
+                    role ^= Roles.MODERATOR
+                }
+
+                sessionData.onConnectionChange(params.connectionId, { role })
             })
         }
 
         return element.get(0)
     }
 
     /**
      * Window onresize event handler (updates room layout)
      */
     function resize() {
         containerWidth = container.offsetWidth
         containerHeight = container.offsetHeight
 
         if (subscribersContainer) {
             containerHeight -= subscribersContainer.offsetHeight
         }
 
         updateLayout()
         $(container).parent()[window.screen.width <= 768 ? 'addClass' : 'removeClass']('mobile')
     }
 
     /**
      * Update the room "matrix" layout
      */
     function updateLayout() {
+        let numOfVideos = $(container).find('.meet-video').length
         if (!numOfVideos) {
             return
         }
 
         let css, rows, cols, height
 
         const factor = containerWidth / containerHeight
 
         if (factor >= 16/9) {
             if (numOfVideos <= 3) {
                 rows = 1
             } else if (numOfVideos <= 8) {
                 rows = 2
             } else if (numOfVideos <= 15) {
                 rows = 3
             } else if (numOfVideos <= 20) {
                 rows = 4
             } else {
                 rows = 5
             }
 
             cols = Math.ceil(numOfVideos / rows)
         } else {
             if (numOfVideos == 1) {
                 cols = 1
             } else if (numOfVideos <= 4) {
                 cols = 2
             } else if (numOfVideos <= 9) {
                 cols = 3
             } else if (numOfVideos <= 16) {
                 cols = 4
             } else if (numOfVideos <= 25) {
                 cols = 5
             } else {
                 cols = 6
             }
 
             rows = Math.ceil(numOfVideos / cols)
 
             if (rows < cols && containerWidth < containerHeight) {
                 cols = rows
                 rows = Math.ceil(numOfVideos / cols)
             }
         }
 
         // console.log('factor=' + factor, 'num=' + numOfVideos, 'cols = '+cols, 'rows=' + rows);
 
         height = containerHeight / rows
         css = {
             width: (100 / cols) + '%',
             // Height must be in pixels to make object-fit:cover working
             height: height + 'px'
         }
 
         // Update the matrix
         $(container).find('.meet-video').css(css)
         /*
             .each((idx, elem) => {
                 let video = $(elem).children('video')[0]
 
                 if (video && video.videoWidth && video.videoHeight && video.videoWidth > video.videoHeight) {
                     // Set max-width to keep the original aspect ratio in cases
                     // when there's enough room to display the element
                     let maxWidth = height * video.videoWidth / video.videoHeight
                     $(elem).css('max-width', maxWidth)
                 }
             })
         */
     }
 
     /**
      * Initialize screen sharing session/publisher
      */
     function screenConnect(callback) {
         if (!sessionData.shareToken) {
             return false
         }
 
         let gotSession = !!screenSession
 
         // Init screen sharing session
         if (!gotSession) {
             screenSession = screenOV.initSession();
         }
 
         let successFunc = function() {
             screenSession.publish(screenPublisher)
             if (callback) {
                 callback(true)
             }
         }
 
         let errorFunc = function() {
             screenPublisher = null
             if (callback) {
                 callback(false)
             }
         }
 
         // Init the publisher
         let params = {
             videoSource: 'screen',
             publishAudio: false
         }
 
         screenPublisher = screenOV.initPublisher(null, params)
 
         screenPublisher.once('accessAllowed', (event) => {
             if (gotSession) {
                 successFunc()
             } else {
                 screenSession.connect(sessionData.shareToken, sessionData.params)
                     .then(() => {
                         successFunc()
                     })
                     .catch(error => {
                         console.error('There was an error connecting to the session:', error.code, error.message);
                         errorFunc()
                     })
             }
         })
 
         screenPublisher.once('accessDenied', () => {
             console.info('ScreenShare: Access Denied')
             errorFunc()
         })
     }
 
     /**
      * Create an svg element (string) for a FontAwesome icon
      *
      * @todo Find if there's a "official" way to do this
      */
     function svgIcon(name, type, className) {
         // Note: the library will contain definitions for all icons registered elswhere
         const icon = library.definitions[type || 'fas'][name]
 
         let attrs = {
             'class': 'svg-inline--fa',
             'aria-hidden': true,
             focusable: false,
             role: 'img',
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: `0 0 ${icon[0]} ${icon[1]}`
         }
 
         if (className) {
             attrs['class'] += ' ' + className
         }
 
         return $(`<svg><path fill="currentColor" d="${icon[4]}"></path></svg>`)
             .attr(attrs)
             .get(0).outerHTML
     }
 
     /**
      * A way to update some session data, after you joined the room
      *
      * @param data Same input as for joinRoom(), but for now it supports only shareToken
      */
     function updateSession(data) {
         sessionData.shareToken = data.shareToken
     }
 
     /**
      * A handler for volume level change events
      */
     function volumeChangeHandler(event) {
         let value = 100 + Math.min(0, Math.max(-100, event.value.newValue))
         let color = 'lime'
         const bar = volumeElement.firstChild
 
         if (value >= 70) {
             color = '#ff3300'
         } else if (value >= 50) {
             color = '#ff9933'
         }
 
         bar.style.height = value + '%'
         bar.style.background = color
     }
 
     /**
      * Start the volume meter
      */
     function volumeMeterStart() {
         if (publisher && volumeElement) {
             publisher.on('streamAudioVolumeChange', volumeChangeHandler)
         }
     }
 
     /**
      * Stop the volume meter
      */
     function volumeMeterStop() {
         if (publisher && volumeElement) {
             publisher.off('streamAudioVolumeChange')
             volumeElement.firstChild.style.height = 0
         }
     }
 
     function connectionData(connection) {
         // Note: we're sending a json from two sources (server-side when
         // creating a token/connection, and client-side when joining the session)
         // OpenVidu is unable to merge these two objects into one, for it it is only
         // two strings, so it puts a "%/%" separator in between, we'll replace it with comma
         // to get one parseable json object
-        return JSON.parse(connection.data.replace('}%/%{', ','))
+        let data = JSON.parse(connection.data.replace('}%/%{', ','))
+
+        data.connectionId = connection.connectionId
+
+        return data
     }
 }
 
 export { Meet, Roles }
diff --git a/src/resources/themes/meet.scss b/src/resources/themes/meet.scss
index 3b67039e..b55a14ce 100644
--- a/src/resources/themes/meet.scss
+++ b/src/resources/themes/meet.scss
@@ -1,323 +1,336 @@
 .meet-nickname {
     padding: 0;
     line-height: 2em;
     border-radius: 1em;
     max-width: 100%;
     white-space: nowrap;
     display: inline-flex;
 
     .icon {
         display: inline-block;
         min-width: 2em;
     }
 
     .content {
         order: 1;
         height: 2em;
         outline: none;
         overflow: hidden;
         text-overflow: ellipsis;
 
         &:not(:empty) {
             margin-left: 0.5em;
             padding-right: 0.5em;
 
             & + .icon {
                 margin-right: -0.75em;
             }
         }
     }
 
     .self & {
         .content {
             &:focus {
                 min-width: 0.5em;
             }
         }
     }
+
+    & + .dropdown-menu {
+        .permissions > label {
+            margin: 0;
+            padding-left: 3.75rem;
+        }
+    }
 }
 
 .meet-video {
     position: relative;
     background: $menu-bg-color;
     // Use flexbox for centering .watermark
     display: flex;
     align-items: center;
     justify-content: center;
 
     video {
         // To make object-fit:cover working we have to set the height in pixels
         // on the wrapper element. This is what javascript method will do.
         object-fit: cover;
         width: 100%;
         height: 100%;
         background: #000;
 
         & + .watermark {
             display: none;
         }
     }
 
     &.fullscreen {
         video {
             // We don't want the video to be cut in fullscreen
             // This will preserve the aspect ratio of the video stream
             object-fit: contain;
         }
     }
 
     .watermark {
         color: darken($menu-bg-color, 20%);
         width: 50%;
         height: 50%;
     }
 
     .controls {
         position: absolute;
         bottom: 0;
         right: 0;
         margin: 0.5em;
         padding: 0 0.05em;
         line-height: 2em;
         border-radius: 1em;
         background: rgba(#000, 0.7);
 
         button {
             line-height: 2;
             border-radius: 50%;
             padding: 0;
             width: 2em;
         }
     }
 
     .status {
         position: absolute;
         bottom: 0;
         left: 0;
         margin: 0.5em;
         line-height: 2em;
 
         span {
             display: inline-block;
             color: #fff;
             border-radius: 50%;
             width: 2em;
             text-align: center;
             margin-right: 0.25em;
         }
     }
 
     .dropdown {
         position: absolute !important;
         top: 0;
         left: 0;
         right: 0;
     }
 
     .meet-nickname {
         margin: 0.5em;
         max-width: calc(100% - 1em);
         border: 0;
 
         &:not(:hover) {
             background-color: rgba(#fff, 0.8);
         }
     }
 
     &:not(.moderated):not(.self) .meet-nickname {
         .icon {
             display: none;
         }
     }
 }
 
 #meet-component {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 
     & + .filler {
         display: none;
     }
 }
 
 #app.meet {
     height: 100%;
 
     #meet-component {
         overflow: hidden;
     }
 }
 
 #meet-setup {
     max-width: 720px;
-
-    .input-group svg {
-        width: 1em;
-    }
 }
 
 #meet-auth {
     margin-top: 2rem;
     margin-bottom: 2rem;
     flex: 1;
 }
 
 #meet-session-toolbar {
     display: flex;
     justify-content: center;
 }
 
 #meet-session-menu {
     button {
         font-size: 1.3em;
         padding: 0 0.25em;
         margin: 0.5em;
         position: relative;
 
         .badge {
             font-size: 0.5em;
             position: absolute;
             right: -0.5em;
 
             &:empty {
                 display: none;
             }
         }
     }
 }
 
 #meet-session-layout {
     flex: 1;
     overflow: hidden;
 }
 
 #meet-session {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     flex: 1;
     position: relative; // for #meet-subscribers positioning
 }
 
 #meet-subscribers {
     display: flex;
     flex-wrap: wrap;
     order: 999;
     padding: 0.15em;
     width: 100%;
     overflow-y: auto;
 
     &:empty {
         display: none;
     }
 
     .meet-subscriber {
         margin: 0.15em;
         max-width: calc(25% - 0.4em);
     }
 
     // when the subscribers list is the only child this means
     // there's no publisher videos in the room yet
     &:only-child {
         justify-content: center;
         align-content: center;
     }
 
     &:not(:only-child) {
         max-height: 30%;
     }
 }
 
 #meet-chat {
     width: 0;
     display: none;
     flex-direction: column;
 
     &.open {
         width: 30%;
         display: flex !important;
 
         .mobile & {
             width: 100%;
             z-index: 1;
             background: $body-bg;
         }
     }
 
     .chat {
         flex: 1;
         overflow-y: auto;
     }
 
     .message {
         margin: 0 0.5em 0.5em 0.5em;
         padding: 0.25em 0.5em;
         border-radius: 1em;
         background: $menu-bg-color;
         overflow-wrap: break-word;
 
         &.self {
             background: lighten($main-color, 30%);
         }
     }
 
     .nickname {
         font-size: 80%;
         color: $secondary;
         text-align: right;
     }
 
     // TODO: mobile mode
 }
 
-#setup-preview {
+.media-setup-form {
+    .input-group svg {
+        width: 1em;
+    }
+}
+
+.media-setup-preview {
     display: flex;
+    position: relative;
 
     video {
         width: 100%;
-        transform: rotateY(180deg);
         background: #000;
     }
 
     .volume {
         height: 50%;
         position: absolute;
         bottom: 1em;
         right: 2em;
         width: 0.5em;
         background: rgba(0, 0, 0, 0.5);
 
         .bar {
             width: 100%;
             position: absolute;
             bottom: 0;
         }
+
+        #media-setup-dialog & {
+            right: 1em;
+        }
     }
 }
 
 .toast.join-request {
     .toast-header {
         color: #eee;
     }
 
     .toast-body {
         display: flex;
     }
 
     .picture {
         margin-right: 1em;
 
         img {
             width: 64px;
             height: 64px;
             border: 1px solid #555;
             border-radius: 50%;
             object-fit: cover;
         }
     }
 
     .content {
         flex: 1;
     }
 }
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
index dbd0a48b..67f83fa6 100644
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -1,584 +1,667 @@
 <template>
     <div id="meet-component">
         <div id="meet-session-toolbar" class="hidden">
             <div id="meet-session-menu">
                 <button class="btn btn-link link-audio" @click="switchSound" :disabled="!isPublisher()" title="Mute audio">
                     <svg-icon icon="microphone"></svg-icon>
                 </button>
                 <button class="btn btn-link link-video" @click="switchVideo" :disabled="!isPublisher()" title="Mute video">
                     <svg-icon icon="video"></svg-icon>
                 </button>
                 <button class="btn btn-link link-screen text-danger" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" title="Share screen">
                     <svg-icon icon="desktop"></svg-icon>
                 </button>
                 <button class="btn btn-link link-chat text-danger" @click="switchChat" title="Chat">
                     <svg-icon icon="align-left"></svg-icon>
                 </button>
                 <button class="btn btn-link link-fullscreen closed hidden" @click="switchFullscreen" title="Full screen">
                     <svg-icon icon="expand"></svg-icon>
                 </button>
                 <button class="btn btn-link link-fullscreen open hidden" @click="switchFullscreen" title="Full screen">
                     <svg-icon icon="compress"></svg-icon>
                 </button>
                 <button class="btn btn-link link-security" v-if="isRoomOwner()" @click="securityOptions" title="Security options">
                     <svg-icon icon="shield-alt"></svg-icon>
                 </button>
                 <button class="btn btn-link link-logout" @click="logout" title="Leave session">
                     <svg-icon icon="power-off"></svg-icon>
                 </button>
             </div>
         </div>
 
         <div id="meet-setup" class="card container mt-2 mt-md-5 mb-5">
             <div class="card-body">
                 <div class="card-title">Set up your session</div>
                 <div class="card-text">
-                    <form class="setup-form row" @submit.prevent="joinSession">
-                        <div id="setup-preview" class="col-sm-6 mb-3 mb-sm-0">
+                    <form class="media-setup-form row" @submit.prevent="joinSession">
+                        <div class="media-setup-preview col-sm-6 mb-3 mb-sm-0">
                             <video class="rounded"></video>
                             <div class="volume"><div class="bar"></div></div>
                         </div>
                         <div class="col-sm-6 align-self-center">
                             <div class="input-group">
                                 <label for="setup-microphone" class="input-group-prepend mb-0">
                                     <span class="input-group-text" title="Microphone"><svg-icon icon="microphone"></svg-icon></span>
                                 </label>
                                 <select class="custom-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">None</option>
                                     <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mt-2">
                                 <label for="setup-camera" class="input-group-prepend mb-0">
                                     <span class="input-group-text" title="Camera"><svg-icon icon="video"></svg-icon></span>
                                 </label>
                                 <select class="custom-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
                                     <option value="">None</option>
                                     <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mt-2">
                                 <label for="setup-nickname" class="input-group-prepend mb-0">
                                     <span class="input-group-text" title="Nickname"><svg-icon icon="user"></svg-icon></span>
                                 </label>
                                 <input class="form-control" type="text" id="setup-nickname" v-model="nickname" placeholder="Your name">
                             </div>
                             <div class="input-group mt-2" v-if="session.config && session.config.requires_password">
                                 <label for="setup-password" class="input-group-prepend mb-0">
                                     <span class="input-group-text" title="Password"><svg-icon icon="key"></svg-icon></span>
                                 </label>
                                 <input type="password" class="form-control" id="setup-password" v-model="password" placeholder="Password">
                             </div>
                             <div class="mt-3">
                                 <button type="submit" id="join-button"
                                         :class="'btn w-100 btn-' + (isRoomReady() ? 'success' : 'primary')"
                                 >
                                     <span v-if="isRoomReady()">JOIN NOW</span>
                                     <span v-else-if="roomState == 323">I'm the owner</span>
                                     <span v-else>JOIN</span>
                                 </button>
                             </div>
                         </div>
                         <div class="mt-4 col-sm-12">
                             <status-message :status="roomState" :status-labels="roomStateLabels"></status-message>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
 
         <div id="meet-session-layout" class="d-flex hidden">
             <div id="meet-session"></div>
             <div id="meet-chat">
                 <div class="chat"></div>
                 <div class="chat-input m-2">
                     <textarea class="form-control" rows="1"></textarea>
                 </div>
             </div>
         </div>
 
         <logon-form id="meet-auth" class="hidden" :dashboard="false" @success="authSuccess"></logon-form>
 
         <div id="leave-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">Room closed</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <p>The session has been closed by the room owner.</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-danger modal-action" data-dismiss="modal">Close</button>
                     </div>
                 </div>
             </div>
         </div>
 
+        <div id="media-setup-dialog" class="modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Media setup</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <form class="media-setup-form">
+                            <div class="media-setup-preview"></div>
+                            <div class="input-group mt-2">
+                                <label for="setup-microphone" class="input-group-prepend mb-0">
+                                    <span class="input-group-text" title="Microphone"><svg-icon icon="microphone"></svg-icon></span>
+                                </label>
+                                <select class="custom-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
+                                    <option value="">None</option>
+                                    <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
+                                </select>
+                            </div>
+                            <div class="input-group mt-2">
+                                <label for="setup-camera" class="input-group-prepend mb-0">
+                                    <span class="input-group-text" title="Camera"><svg-icon icon="video"></svg-icon></span>
+                                </label>
+                                <select class="custom-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
+                                    <option value="">None</option>
+                                    <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
+                                </select>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary modal-action" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <session-security-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></session-security-options>
     </div>
 </template>
 
 <script>
     import { Meet, Roles } from '../../js/meet/app.js'
     import StatusMessage from '../Widgets/StatusMessage'
     import LogonForm from '../Login'
     import SessionSecurityOptions from './SessionSecurityOptions'
 
-// Register additional icons
-import { library } from '@fortawesome/fontawesome-svg-core'
-
-import {
-    faAlignLeft,
-    faCompress,
-    faDesktop,
-    faExpand,
-    faMicrophone,
-    faPowerOff,
-    faUser,
-    faShieldAlt,
-    faVideo,
-    faVolumeMute
-} from '@fortawesome/free-solid-svg-icons'
-
-// Register only these icons we need
-library.add(
-    faAlignLeft,
-    faCompress,
-    faDesktop,
-    faExpand,
-    faMicrophone,
-    faPowerOff,
-    faUser,
-    faShieldAlt,
-    faVideo,
-    faVolumeMute
-)
+    // Register additional icons
+    import { library } from '@fortawesome/fontawesome-svg-core'
+
+    import {
+        faAlignLeft,
+        faCog,
+        faCompress,
+        faDesktop,
+        faExpand,
+        faMicrophone,
+        faPowerOff,
+        faUser,
+        faShieldAlt,
+        faVideo,
+        faVolumeMute
+    } from '@fortawesome/free-solid-svg-icons'
+
+    // Register only these icons we need
+    library.add(
+        faAlignLeft,
+        faCog,
+        faCompress,
+        faDesktop,
+        faExpand,
+        faMicrophone,
+        faPowerOff,
+        faUser,
+        faShieldAlt,
+        faVideo,
+        faVolumeMute
+    )
 
     let roomRequest
 
     export default {
         components: {
             LogonForm,
             SessionSecurityOptions,
             StatusMessage
         },
         data() {
             return {
                 setup: {
                     cameras: [],
                     microphones: [],
                 },
                 canShareScreen: false,
                 camera: '',
                 meet: null,
                 microphone: '',
                 nickname: '',
                 password: '',
                 room: null,
                 roomState: 'init',
                 roomStateLabels: {
                     init: 'Checking the room...',
                     404: 'The room does not exist.',
                     323: 'The room is closed. Please, wait for the owner to start the session.',
                     324: 'The room is closed. It will be open for others after you join.',
                     325: 'The room is ready. Please, provide a valid password.',
                     326: 'The room is locked. Please, enter your name and try again.',
                     327: 'Waiting for permission to join the room.',
                     500: 'Failed to create a session. Server error.'
                 },
                 session: {}
             }
         },
         mounted() {
             this.room = this.$route.params.room
 
             // Initialize OpenVidu and do some basic checks
             this.meet = new Meet($('#meet-session')[0]);
             this.canShareScreen = this.meet.isScreenSharingSupported()
 
             // Check the room and init the session
             this.initSession()
 
             // Setup the room UI
             this.setupSession()
         },
         beforeDestroy() {
             clearTimeout(roomRequest)
 
             if (this.meet) {
                 this.meet.leaveRoom()
             }
         },
         methods: {
             authSuccess() {
                 // The user authentication succeeded, we still don't know it's really the room owner
                 this.initSession()
 
                 $('#meet-setup').removeClass('hidden')
                 $('#meet-auth').addClass('hidden')
             },
             configUpdate(config) {
                 this.session.config = Object.assign({}, this.session.config, config)
             },
             dismissParticipant(id) {
                 axios.post('/api/v4/openvidu/rooms/' + this.room + '/connections/' + id + '/dismiss')
             },
             initSession(init) {
                 const button = $('#join-button').prop('disabled', true)
 
                 this.post = {
                     password: this.password,
                     nickname: this.nickname,
                     screenShare: this.canShareScreen ? 1 : 0,
                     init: init ? 1 : 0,
                     picture: init ? this.makePicture() : '',
                     requestId: this.requestId(),
                     canPublish: !!this.camera || !!this.microphone
                 }
 
                 $('#setup-password,#setup-nickname').removeClass('is-invalid')
 
                 axios.post('/api/v4/openvidu/rooms/' + this.room, this.post, { ignoreErrors: true })
                     .then(response => {
                         button.prop('disabled', false)
 
                         // We already have token, the response is redundant
                         if (this.roomState == 'ready' && this.session.token) {
                             return
                         }
 
                         this.roomState = 'ready'
                         this.session = response.data
 
                         if (init) {
                             this.joinSession()
                         }
                     })
                     .catch(error => {
                         if (!error.response) {
                             console.error(error)
                             return
                         }
 
                         const data = error.response.data || {}
 
                         if (data.code) {
                             this.roomState = data.code
                         } else {
                             this.roomState = error.response.status
                         }
 
                         button.prop('disabled', this.roomState == 'init' || this.roomState == 327 || this.roomState == 404)
 
                         if (data.config) {
                             this.session.config = data.config
                         }
 
                         switch (this.roomState) {
                             case 323:
                                 // Waiting for the owner to open the room...
                                 // Update room state every 10 seconds
                                 roomRequest = setTimeout(() => { this.initSession() }, 10000)
                                 break;
 
                             case 324:
                                 // Room is ready for the owner, but the 'init' was not requested yet
                                 clearTimeout(roomRequest)
                                 break;
 
                             case 325:
                                 // Missing/invalid password
                                 if (init) {
                                     $('#setup-password').addClass('is-invalid').focus()
                                 }
                                 break;
 
                             case 326:
                                 // Locked room prerequisites error
                                 if (init && !$('#setup-nickname').val()) {
                                     $('#setup-nickname').addClass('is-invalid').focus()
                                 }
                                 break;
 
                             case 327:
                                 // Waiting for the owner's approval to join
                                 // Update room state every 10 seconds
                                 roomRequest = setTimeout(() => { this.initSession(true) }, 10000)
                                 break;
                         }
                     })
 
                 if (document.fullscreenEnabled) {
                     $('#meet-session-menu').find('.link-fullscreen.closed').removeClass('hidden')
                 }
             },
+            isModerator() {
+                return this.isRoomOwner() || (!!this.session.role && (this.session.role & Roles.MODERATOR) > 0)
+            },
             isPublisher() {
                 return !!this.session.role && (this.session.role & Roles.PUBLISHER) > 0
             },
             isRoomOwner() {
                 return !!this.session.role && (this.session.role & Roles.OWNER) > 0
             },
             isRoomReady() {
                 return ['ready', 322, 324, 325, 326, 327].includes(this.roomState)
             },
             // An event received by the room owner when a participant is asking for a permission to join the room
             joinRequest(data) {
                 // The toast for this user request already exists, ignore
                 // It's not really needed as we do this on server-side already
                 if ($('#i' + data.requestId).length) {
                     return
                 }
 
                 // FIXME: Should the message close button act as the Deny button? Do we need the Deny button?
 
                 let body = $(
                     `<div>`
                     + `<div class="picture"><img src="${data.picture}"></div>`
                     + `<div class="content">`
                         + `<p class="mb-2"></p>`
                         + `<div class="text-right">`
                             + `<button type="button" class="btn btn-sm btn-success accept">Accept</button>`
                             + `<button type="button" class="btn btn-sm btn-danger deny ml-2">Deny</button>`
                 )
 
                 this.$toast.message({
                     className: 'join-request',
                     icon: 'user',
                     timeout: 0,
                     title: 'Join request',
                     // titleClassName: '',
                     body: body.html(),
                     onShow: element => {
                         const id = data.requestId
 
                         $(element).find('p').text((data.nickname || '') + ' requested to join.')
 
                         // add id attribute, so we can identify it
                         $(element).attr('id', 'i' + id)
                             // add action to the buttons
                             .find('button.accept,button.deny').on('click', e => {
                                 const action = $(e.target).is('.accept') ? 'accept' : 'deny'
                                 axios.post('/api/v4/openvidu/rooms/' + this.room + '/request/' + id + '/' + action)
                                     .then(response => {
                                         $('#i' + id).remove()
                                     })
                             })
                     }
                 })
             },
             // Entering the room
             joinSession() {
                 // The form can be submitted not only via the submit button,
                 // make sure the submit is allowed
                 if ($('#meet-setup [type=submit]').prop('disabled')) {
                     return;
                 }
 
                 if (this.roomState == 323) {
                     $('#meet-setup').addClass('hidden')
                     $('#meet-auth').removeClass('hidden')
                     return
                 }
 
                 if (this.roomState != 'ready') {
                     this.initSession(true)
                     return
                 }
 
                 clearTimeout(roomRequest)
 
                 $('#app').addClass('meet')
                 $('#meet-setup').addClass('hidden')
                 $('#meet-session-toolbar,#meet-session-layout').removeClass('hidden')
 
                 if (!this.canShareScreen) {
                     this.setMenuItem('screen', false, true)
                 }
 
                 this.session.nickname = this.nickname
                 this.session.menuElement = $('#meet-session-menu')[0]
                 this.session.chatElement = $('#meet-chat')[0]
                 this.session.onDestroy = event => {
                     // TODO: Display different message for each reason: forceDisconnectByUser,
                     //       forceDisconnectByServer, sessionClosedByServer?
                     if (event.reason != 'disconnect' && event.reason != 'networkDisconnect' && !this.isRoomOwner()) {
                         $('#leave-dialog').on('hide.bs.modal', () => {
                             // FIXME: Where exactly the user should land? Currently he'll land
                             //        on dashboard (if he's logged in) or login form (if he's not).
 
                             this.$router.push({ name: 'dashboard' })
                         }).modal()
                     }
                 }
-
                 this.session.onDismiss = connId => { this.dismissParticipant(connId) }
-
-                if (this.isRoomOwner()) {
-                    this.session.onJoinRequest = data => { this.joinRequest(data) }
-                }
+                this.session.onSessionDataUpdate = data => { this.updateSession(data) }
+                this.session.onConnectionChange = (connId, data) => { this.updateParticipant(connId, data) }
+                this.session.onJoinRequest = data => { this.joinRequest(data) }
+                this.session.onMediaSetup = () => { this.setupMedia() }
 
                 this.meet.joinRoom(this.session)
             },
             logout() {
                 const logout = () => {
                     this.meet.leaveRoom()
                     this.meet = null
                     this.$router.push({ name: 'dashboard' })
                 }
 
                 if (this.isRoomOwner()) {
                     axios.post('/api/v4/openvidu/rooms/' + this.room + '/close').then(logout)
                 } else {
                     logout()
                 }
             },
             makePicture() {
-                const video = $("#setup-preview video")[0];
+                const video = $("#meet-setup video")[0];
 
                 // Skip if video is not "playing"
                 if (!video.videoWidth || !this.camera) {
                     return ''
                 }
 
                 // we're going to crop a square from the video and resize it
                 const maxSize = 64
 
                 // Calculate sizing
                 let sh = Math.floor(video.videoHeight / 1.5)
                 let sw = sh
                 let sx = (video.videoWidth - sw) / 2
                 let sy = (video.videoHeight - sh) / 2
 
                 let dh = Math.min(sh, maxSize)
                 let dw = sh < maxSize ? sw : Math.floor(sw * dh/sh)
 
                 const canvas = $("<canvas>")[0];
                 canvas.width = dw;
                 canvas.height = dh;
 
                 // draw the image on the canvas (square cropped and resized)
                 canvas.getContext('2d').drawImage(video, sx, sy, sw, sh, 0, 0, dw, dh);
 
                 // convert it to a usable data URL (png format)
                 return canvas.toDataURL();
             },
             requestId() {
                 if (!this.reqId) {
                     // FIXME: Shall we use some UUID generator? Or better something that identifies the
                     //        user/browser so we could deny the join request for a longer time.
                     //        I'm thinking about e.g. a bad actor knocking again and again and again,
                     //        we don't want the room owner to be bothered every few seconds.
                     //        Maybe a solution would be to store the identifier in the browser storage
                     //        This would not prevent hackers from sending the new identifier on every request,
                     //        but could make sure that it is kept after page refresh for the avg user.
 
                     // This will create max. 24-char numeric string
                     this.reqId = (String(Date.now()) + String(Math.random()).substring(2)).substring(0, 24)
                 }
 
                 return this.reqId
             },
             securityOptions() {
                 $('#security-options-dialog').modal()
             },
             setMenuItem(type, state, disabled) {
                 let button = $('#meet-session-menu').find('.link-' + type)
 
                 button[state ? 'removeClass' : 'addClass']('text-danger')
 
                 if (disabled !== undefined) {
                     button.prop('disabled', disabled)
                 }
             },
+            setupMedia() {
+                let dialog = $('#media-setup-dialog')
+
+                if (!dialog.find('video').length) {
+                    $('#meet-setup').find('video,div.volume').appendTo(dialog.find('.media-setup-preview'))
+                }
+
+                dialog.on('show.bs.modal', () => { this.meet.setupStart() })
+                    .on('hide.bs.modal', () => { this.meet.setupStop() })
+                    .modal()
+            },
             setupSession() {
-                this.meet.setup({
-                    videoElement: $('#setup-preview video')[0],
-                    volumeElement: $('#setup-preview .volume')[0],
+                this.meet.setupStart({
+                    videoElement: $('#meet-setup video')[0],
+                    volumeElement: $('#meet-setup .volume')[0],
                     onSuccess: setup => {
                         this.setup = setup
                         this.microphone = setup.audioSource
                         this.camera = setup.videoSource
 
                         this.setMenuItem('audio', setup.audioActive)
                         this.setMenuItem('video', setup.videoActive)
                     },
                     onError: error => {
                         this.setMenuItem('audio', false, true)
                         this.setMenuItem('video', false, true)
                     }
                 })
             },
             setupCameraChange() {
                 this.meet.setupSetVideoDevice(this.camera).then(enabled => {
                     this.setMenuItem('video', enabled)
                 })
             },
             setupMicrophoneChange() {
                 this.meet.setupSetAudioDevice(this.microphone).then(enabled => {
                     this.setMenuItem('audio', enabled)
                 })
             },
             switchChat() {
                 let chat = $('#meet-chat')
                 let enabled = chat.is('.open')
 
                 this.setMenuItem('chat', !enabled)
                 chat.toggleClass('open')
 
                 if (!enabled) {
                     chat.find('textarea').focus()
                 }
 
                 // Trigger resize, so participant matrix can update its layout
                 window.dispatchEvent(new Event('resize'));
             },
             switchFullscreen() {
                 const element = this.$el
 
                 $(element).off('fullscreenchange').on('fullscreenchange', (e) => {
                     let enabled = document.fullscreenElement == element
                     let buttons = $('#meet-session-menu').find('.link-fullscreen')
 
                     buttons.first()[enabled ? 'addClass' : 'removeClass']('hidden')
                     buttons.last()[!enabled ? 'addClass' : 'removeClass']('hidden')
                 })
 
                 if (document.fullscreenElement) {
                     document.exitFullscreen()
                 } else {
                     element.requestFullscreen()
                 }
             },
             switchSound() {
                 const enabled = this.meet.switchAudio()
                 this.setMenuItem('audio', enabled)
             },
             switchVideo() {
                 const enabled = this.meet.switchVideo()
                 this.setMenuItem('video', enabled)
             },
             switchScreen() {
                 this.meet.switchScreen(enabled => {
                     this.setMenuItem('screen', enabled)
 
                     // After one screen sharing session ended request a new token
                     // for the next screen sharing session
                     if (!enabled) {
                         // TODO: This might need to be a different route. E.g. the room password might have
                         //       changed since user joined the session
+                        //       Also because it creates a redundant connection (token)
                         axios.post('/api/v4/openvidu/rooms/' + this.room, this.post, { ignoreErrors: true })
                             .then(response => {
                                 // Response data contains: session, token and shareToken
-                                this.session.shareToken = response.data.token
+                                this.session.shareToken = response.data.shareToken
                                 this.meet.updateSession(this.session)
                             })
                     }
                 })
+            },
+            updateParticipant(connId, params) {
+                if (this.isModerator()) {
+                    axios.put('/api/v4/openvidu/rooms/' + this.room + '/connections/' + connId, params)
+                }
+            },
+            updateSession(data) {
+                let params = {}
+
+                if ('role' in data) {
+                    params.role = data.role
+                }
+
+                // merge new params into the object
+                this.session = Object.assign({}, this.session, params)
+
+                // update some buttons state e.g. when switching from publisher to subscriber
+                if (!this.isPublisher()) {
+                    this.setMenuItem('audio', false)
+                    this.setMenuItem('video', false)
+                } else {
+                    if ('videoActive' in data) {
+                        this.setMenuItem('video', data.videoActive)
+                    }
+                    if ('audioActive' in data) {
+                        this.setMenuItem('audio', data.audioActive)
+                    }
+                }
             }
         }
     }
 </script>
diff --git a/src/routes/api.php b/src/routes/api.php
index ac25637d..ac527997 100644
--- a/src/routes/api.php
+++ b/src/routes/api.php
@@ -1,154 +1,155 @@
 <?php
 
 use Illuminate\Http\Request;
 
 /*
 |--------------------------------------------------------------------------
 | API Routes
 |--------------------------------------------------------------------------
 |
 | Here is where you can register API routes for your application. These
 | routes are loaded by the RouteServiceProvider within a group which
 | is assigned the "api" middleware group. Enjoy building your API!
 |
 */
 
 $prefix = \trim(\parse_url(\config('app.url'), PHP_URL_PATH), '/') . '/';
 
 Route::group(
     [
         'middleware' => 'api',
         'prefix' => $prefix . 'api/auth'
     ],
     function ($router) {
         Route::post('login', 'API\AuthController@login');
 
         Route::group(
             ['middleware' => 'auth:api'],
             function ($router) {
                 Route::get('info', 'API\AuthController@info');
                 Route::post('logout', 'API\AuthController@logout');
                 Route::post('refresh', 'API\AuthController@refresh');
             }
         );
     }
 );
 
 Route::group(
     [
         'domain' => \config('app.domain'),
         'middleware' => 'api',
         'prefix' => $prefix . 'api/auth'
     ],
     function ($router) {
         Route::post('password-reset/init', 'API\PasswordResetController@init');
         Route::post('password-reset/verify', 'API\PasswordResetController@verify');
         Route::post('password-reset', 'API\PasswordResetController@reset');
 
         Route::get('signup/plans', 'API\SignupController@plans');
         Route::post('signup/init', 'API\SignupController@init');
         Route::post('signup/verify', 'API\SignupController@verify');
         Route::post('signup', 'API\SignupController@signup');
     }
 );
 
 Route::group(
     [
         'domain' => \config('app.domain'),
         'middleware' => 'auth:api',
         'prefix' => $prefix . 'api/v4'
     ],
     function () {
         Route::apiResource('domains', API\V4\DomainsController::class);
         Route::get('domains/{id}/confirm', 'API\V4\DomainsController@confirm');
         Route::get('domains/{id}/status', 'API\V4\DomainsController@status');
 
         Route::apiResource('entitlements', API\V4\EntitlementsController::class);
         Route::apiResource('packages', API\V4\PackagesController::class);
         Route::apiResource('skus', API\V4\SkusController::class);
         Route::apiResource('users', API\V4\UsersController::class);
         Route::get('users/{id}/skus', 'API\V4\SkusController@userSkus');
         Route::get('users/{id}/status', 'API\V4\UsersController@status');
 
         Route::apiResource('wallets', API\V4\WalletsController::class);
         Route::get('wallets/{id}/transactions', 'API\V4\WalletsController@transactions');
         Route::get('wallets/{id}/receipts', 'API\V4\WalletsController@receipts');
         Route::get('wallets/{id}/receipts/{receipt}', 'API\V4\WalletsController@receiptDownload');
 
         Route::post('payments', 'API\V4\PaymentsController@store');
         Route::get('payments/mandate', 'API\V4\PaymentsController@mandate');
         Route::post('payments/mandate', 'API\V4\PaymentsController@mandateCreate');
         Route::put('payments/mandate', 'API\V4\PaymentsController@mandateUpdate');
         Route::delete('payments/mandate', 'API\V4\PaymentsController@mandateDelete');
 
         Route::get('openvidu/rooms', 'API\V4\OpenViduController@index');
         Route::post('openvidu/rooms/{id}/close', 'API\V4\OpenViduController@closeRoom');
         Route::post('openvidu/rooms/{id}/config', 'API\V4\OpenViduController@setRoomConfig');
         // FIXME: I'm not sure about this one, should we use DELETE request maybe?
         Route::post('openvidu/rooms/{id}/connections/{conn}/dismiss', 'API\V4\OpenViduController@dismissConnection');
+        Route::put('openvidu/rooms/{id}/connections/{conn}', 'API\V4\OpenViduController@updateConnection');
         Route::post('openvidu/rooms/{id}/request/{reqid}/accept', 'API\V4\OpenViduController@acceptJoinRequest');
         Route::post('openvidu/rooms/{id}/request/{reqid}/deny', 'API\V4\OpenViduController@denyJoinRequest');
     }
 );
 
 // Note: In Laravel 7.x we could just use withoutMiddleware() instead of a separate group
 Route::group(
     [
         'domain' => \config('app.domain'),
         'prefix' => $prefix . 'api/v4'
     ],
     function () {
         Route::post('openvidu/rooms/{id}', 'API\V4\OpenViduController@joinRoom');
     }
 );
 
 Route::group(
     [
         'domain' => \config('app.domain'),
         'middleware' => 'api',
         'prefix' => $prefix . 'api/v4'
     ],
     function ($router) {
         Route::post('support/request', 'API\V4\SupportController@request');
     }
 );
 
 Route::group(
     [
         'domain' => \config('app.domain'),
         'prefix' => $prefix . 'api/webhooks',
     ],
     function () {
         Route::post('payment/{provider}', 'API\V4\PaymentsController@webhook');
         Route::post('meet/openvidu', 'API\V4\OpenViduController@webhook');
     }
 );
 
 Route::group(
     [
         'domain' => 'admin.' . \config('app.domain'),
         'middleware' => ['auth:api', 'admin'],
         'prefix' => $prefix . 'api/v4',
     ],
     function () {
         Route::apiResource('domains', API\V4\Admin\DomainsController::class);
         Route::get('domains/{id}/confirm', 'API\V4\Admin\DomainsController@confirm');
         Route::post('domains/{id}/suspend', 'API\V4\Admin\DomainsController@suspend');
         Route::post('domains/{id}/unsuspend', 'API\V4\Admin\DomainsController@unsuspend');
 
         Route::apiResource('entitlements', API\V4\Admin\EntitlementsController::class);
         Route::apiResource('packages', API\V4\Admin\PackagesController::class);
         Route::apiResource('skus', API\V4\Admin\SkusController::class);
         Route::apiResource('users', API\V4\Admin\UsersController::class);
         Route::post('users/{id}/reset2FA', 'API\V4\Admin\UsersController@reset2FA');
         Route::get('users/{id}/skus', 'API\V4\Admin\SkusController@userSkus');
         Route::post('users/{id}/suspend', 'API\V4\Admin\UsersController@suspend');
         Route::post('users/{id}/unsuspend', 'API\V4\Admin\UsersController@unsuspend');
         Route::apiResource('wallets', API\V4\Admin\WalletsController::class);
         Route::post('wallets/{id}/one-off', 'API\V4\Admin\WalletsController@oneOff');
         Route::get('wallets/{id}/transactions', 'API\V4\Admin\WalletsController@transactions');
         Route::apiResource('discounts', API\V4\Admin\DiscountsController::class);
 
         Route::get('stats/chart/{chart}', 'API\V4\Admin\StatsController@chart');
     }
 );
diff --git a/src/tests/Browser/Meet/RoomControlsTest.php b/src/tests/Browser/Meet/RoomControlsTest.php
index 0e69c772..6dcecb73 100644
--- a/src/tests/Browser/Meet/RoomControlsTest.php
+++ b/src/tests/Browser/Meet/RoomControlsTest.php
@@ -1,397 +1,396 @@
 <?php
 
 namespace Tests\Browser\Meet;
 
 use App\OpenVidu\Room;
 use Tests\Browser;
 use Tests\Browser\Pages\Meet\Room as RoomPage;
 use Tests\TestCaseDusk;
 
 class RoomControlsTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
         $this->clearMeetEntitlements();
     }
 
     public function tearDown(): void
     {
         $this->clearMeetEntitlements();
         parent::tearDown();
     }
 
     /**
      * Test fullscreen buttons
      *
      * @group openvidu
      */
     public function testFullscreen(): void
     {
         // TODO: This test does not work in headless mode
         $this->markTestIncomplete();
 /*
         // Make sure there's no session yet
         $room = Room::where('name', 'john')->first();
         if ($room->session_id) {
             $room->session_id = null;
             $room->save();
         }
 
         $this->assignMeetEntitlement('john@kolab.org');
 
         $this->browse(function (Browser $browser) {
             // Join the room as an owner (authenticate)
             $browser->visit(new RoomPage('john'))
                 ->click('@setup-button')
                 ->assertMissing('@toolbar')
                 ->assertMissing('@menu')
                 ->assertMissing('@session')
                 ->assertMissing('@chat')
                 ->assertMissing('@setup-form')
                 ->assertVisible('@login-form')
                 ->submitLogon('john@kolab.org', 'simple123')
                 ->waitFor('@setup-form')
                 ->assertMissing('@login-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->click('@setup-button')
                 ->waitFor('@session')
 
                 // Test fullscreen for the whole room
                 ->click('@menu button.link-fullscreen.closed')
                 ->assertVisible('@toolbar')
                 ->assertVisible('@session')
                 ->assertMissing('nav')
                 ->assertMissing('@menu button.link-fullscreen.closed')
                 ->click('@menu button.link-fullscreen.open')
                 ->assertVisible('nav')
 
                 // Test fullscreen for the participant video
                 ->click('@session button.link-fullscreen.closed')
                 ->assertVisible('@session')
                 ->assertMissing('@toolbar')
                 ->assertMissing('nav')
                 ->assertMissing('@session button.link-fullscreen.closed')
                 ->click('@session button.link-fullscreen.open')
                 ->assertVisible('nav')
                 ->assertVisible('@toolbar');
         });
 */
     }
 
     /**
      * Test nickname and muting audio/video
      *
      * @group openvidu
      */
     public function testNicknameAndMuting(): void
     {
         // Make sure there's no session yet
         $room = Room::where('name', 'john')->first();
         if ($room->session_id) {
             $room->session_id = null;
             $room->save();
         }
 
         $this->assignMeetEntitlement('john@kolab.org');
 
         $this->browse(function (Browser $owner, Browser $guest) {
             // Join the room as an owner (authenticate)
             $owner->visit(new RoomPage('john'))
                 ->click('@setup-button')
                 ->submitLogon('john@kolab.org', 'simple123')
                 ->waitFor('@setup-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->type('@setup-nickname-input', 'john')
                 ->keys('@setup-nickname-input', '{enter}') // Test form submit with Enter key
                 ->waitFor('@session');
 
             // In another browser act as a guest
             $guest->visit(new RoomPage('john'))
                 ->waitFor('@setup-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->assertMissing('@setup-status-message')
                 ->assertSeeIn('@setup-button', "JOIN")
                 // Join the room, disable cam/mic
                 ->select('@setup-mic-select', '')
                 //->select('@setup-cam-select', '')
                 ->clickWhenEnabled('@setup-button')
                 ->waitFor('@session');
 
             // Assert current UI state
             $owner->assertToolbar([
                     'audio' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                     'video' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                     'screen' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'chat' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'fullscreen' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                     'security' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                     'logout' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                 ])
                 ->whenAvailable('div.meet-video.self', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertAudioMuted('video', true)
                         ->assertSeeIn('.meet-nickname', 'john')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertMissing('.controls button.link-audio')
                         ->assertMissing('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->whenAvailable('div.meet-video:not(.self)', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertVisible('.meet-nickname')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertVisible('.controls button.link-audio')
                         ->assertVisible('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->assertElementsCount('@session div.meet-video', 2);
 
             // Assert current UI state
             $guest->assertToolbar([
                     'audio' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'video' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                     'screen' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'chat' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'fullscreen' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                     'logout' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                 ])
                 ->whenAvailable('div.meet-video:not(.self)', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertSeeIn('.meet-nickname', 'john')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertVisible('.controls button.link-audio')
                         ->assertMissing('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->whenAvailable('div.meet-video.self', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertMissing('.controls button.link-audio')
                         ->assertVisible('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->assertElementsCount('@session div.meet-video', 2);
 
             // Test nickname change propagation
 
-            // Use script() because type() does not work with this contenteditable widget
             $guest->setNickname('div.meet-video.self', 'guest');
             $owner->waitFor('div.meet-video:not(.self) .meet-nickname')
                 ->assertSeeIn('div.meet-video:not(.self) .meet-nickname', 'guest');
 
             // Test muting audio
             $owner->click('@menu button.link-audio')
                 ->assertToolbarButtonState('audio', RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertVisible('div.meet-video.self .status .status-audio');
 
             // FIXME: It looks that we can't just check the <video> element state
             //        We might consider using OpenVidu API to make sure
             $guest->waitFor('div.meet-video:not(.self) .status .status-audio');
 
             // Test unmuting audio
             $owner->click('@menu button.link-audio')
                 ->assertToolbarButtonState('audio', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertMissing('div.meet-video.self .status .status-audio');
 
             $guest->waitUntilMissing('div.meet-video:not(.self) .status .status-audio');
 
             // Test muting video
             $owner->click('@menu button.link-video')
                 ->assertToolbarButtonState('video', RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertVisible('div.meet-video.self .status .status-video');
 
             // FIXME: It looks that we can't just check the <video> element state
             //        We might consider using OpenVidu API to make sure
             $guest->waitFor('div.meet-video:not(.self) .status .status-video');
 
             // Test unmuting video
             $owner->click('@menu button.link-video')
                 ->assertToolbarButtonState('video', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertMissing('div.meet-video.self .status .status-video');
 
             $guest->waitUntilMissing('div.meet-video:not(.self) .status .status-video');
 
             // Test muting other user
             $guest->with('div.meet-video:not(.self)', function (Browser $browser) {
                 $browser->click('.controls button.link-audio')
                     ->assertAudioMuted('video', true)
                     ->assertVisible('.controls button.link-audio.text-danger')
                     ->click('.controls button.link-audio')
                     ->assertAudioMuted('video', false)
                     ->assertVisible('.controls button.link-audio:not(.text-danger)');
             });
         });
     }
 
     /**
      * Test text chat
      *
      * @group openvidu
      */
     public function testChat(): void
     {
         // Make sure there's no session yet
         $room = Room::where('name', 'john')->first();
         if ($room->session_id) {
             $room->session_id = null;
             $room->save();
         }
 
         $this->assignMeetEntitlement('john@kolab.org');
 
         $this->browse(function (Browser $owner, Browser $guest) {
             // Join the room as an owner
             $owner->visit(new RoomPage('john'))
                 ->waitFor('@setup-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->type('@setup-nickname-input', 'john')
                 ->clickWhenEnabled('@setup-button')
                 ->waitFor('@session');
 
             // In another browser act as a guest
             $guest->visit(new RoomPage('john'))
                 ->waitFor('@setup-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->assertMissing('@setup-status-message')
                 ->assertSeeIn('@setup-button', "JOIN")
                 // Join the room, disable cam/mic
                 ->select('@setup-mic-select', '')
                 // ->select('@setup-cam-select', '')
                 ->clickWhenEnabled('@setup-button')
                 ->waitFor('@session');
 
             // Test chat elements
 
             $owner->click('@menu button.link-chat')
                 ->assertToolbarButtonState('chat', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertVisible('@chat')
                 ->assertVisible('@session')
                 ->assertFocused('@chat-input')
                 ->assertElementsCount('@chat-list .message', 0)
                 ->keys('@chat-input', 'test1', '{enter}')
                 ->assertValue('@chat-input', '')
                 ->assertElementsCount('@chat-list .message', 1)
                 ->assertSeeIn('@chat-list .message .nickname', 'john')
                 ->assertSeeIn('@chat-list .message div:last-child', 'test1');
 
             $guest->waitFor('@menu button.link-chat .badge')
                 ->assertSeeIn('@menu button.link-chat .badge', '1')
                 ->click('@menu button.link-chat')
                 ->assertToolbarButtonState('chat', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertMissing('@menu button.link-chat .badge')
                 ->assertVisible('@chat')
                 ->assertVisible('@session')
                 ->assertElementsCount('@chat-list .message', 1)
                 ->assertSeeIn('@chat-list .message .nickname', 'john')
                 ->assertSeeIn('@chat-list .message div:last-child', 'test1');
 
             // Test the number of (hidden) incoming messages
             $guest->click('@menu button.link-chat')
                 ->assertMissing('@chat');
 
             $owner->keys('@chat-input', 'test2', '{enter}', 'test3', '{enter}')
                 ->assertElementsCount('@chat-list .message', 1)
                 ->assertSeeIn('@chat-list .message .nickname', 'john')
                 ->assertElementsCount('@chat-list .message div', 4)
                 ->assertSeeIn('@chat-list .message div:last-child', 'test3');
 
             $guest->waitFor('@menu button.link-chat .badge')
                 ->assertSeeIn('@menu button.link-chat .badge', '2')
                 ->click('@menu button.link-chat')
                 ->assertElementsCount('@chat-list .message', 1)
                 ->assertSeeIn('@chat-list .message .nickname', 'john')
                 ->assertSeeIn('@chat-list .message div:last-child', 'test3')
                 ->keys('@chat-input', 'guest1', '{enter}')
                 ->assertElementsCount('@chat-list .message', 2)
                 ->assertMissing('@chat-list .message:last-child .nickname')
                 ->assertSeeIn('@chat-list .message:last-child div:last-child', 'guest1');
 
             $owner->assertElementsCount('@chat-list .message', 2)
                 ->assertMissing('@chat-list .message:last-child .nickname')
                 ->assertSeeIn('@chat-list .message:last-child div:last-child', 'guest1');
 
             // Test nickname change is propagated to chat messages
 
             $guest->setNickname('div.meet-video.self', 'guest')
                 ->keys('@chat-input', 'guest2', '{enter}')
                 ->assertElementsCount('@chat-list .message', 2)
                 ->assertSeeIn('@chat-list .message:last-child .nickname', 'guest')
                 ->assertSeeIn('@chat-list .message:last-child div:last-child', 'guest2');
 
             $owner->assertElementsCount('@chat-list .message', 2)
                 ->assertSeeIn('@chat-list .message:last-child .nickname', 'guest')
                 ->assertSeeIn('@chat-list .message:last-child div:last-child', 'guest2');
 
             // TODO: Test text chat features, e.g. link handling
         });
     }
 
     /**
      * Test screen sharing
      *
      * @group openvidu
      */
     public function testShareScreen(): void
     {
         // Make sure there's no session yet
         $room = Room::where('name', 'john')->first();
         if ($room->session_id) {
             $room->session_id = null;
             $room->save();
         }
 
         $this->assignMeetEntitlement('john@kolab.org');
 
         $this->browse(function (Browser $owner, Browser $guest) {
             // Join the room as an owner
             $owner->visit(new RoomPage('john'))
                 ->waitFor('@setup-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->type('@setup-nickname-input', 'john')
                 ->clickWhenEnabled('@setup-button')
                 ->waitFor('@session');
 
             // In another browser act as a guest
             $guest->visit(new RoomPage('john'))
                 ->waitFor('@setup-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 // Join the room, disable cam/mic
                 ->select('@setup-mic-select', '')
                 ->select('@setup-cam-select', '')
                 ->clickWhenEnabled('@setup-button')
                 ->waitFor('@session');
 
             // Test screen sharing
             $owner->assertToolbarButtonState('screen', RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED)
                 ->assertElementsCount('@session div.meet-video', 1)
                 ->click('@menu button.link-screen')
                 ->whenAvailable('div.meet-video:not(.self)', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertSeeIn('.meet-nickname', 'john')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertVisible('.controls button.link-audio')
                         ->assertVisible('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->assertElementsCount('@session div.meet-video', 2)
                 ->assertElementsCount('@subscribers .meet-subscriber', 1)
                 ->assertToolbarButtonState('screen', RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED);
 
             $guest
                 ->whenAvailable('div.meet-video:nth-child(3)', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertSeeIn('.meet-nickname', 'john')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertVisible('.controls button.link-audio')
                         ->assertVisible('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->assertElementsCount('@session div.meet-video', 2)
                 ->assertElementsCount('@subscribers .meet-subscriber', 1);
         });
     }
 }
diff --git a/src/tests/Browser/Meet/RoomSetupTest.php b/src/tests/Browser/Meet/RoomSetupTest.php
index 1b993102..b65aea50 100644
--- a/src/tests/Browser/Meet/RoomSetupTest.php
+++ b/src/tests/Browser/Meet/RoomSetupTest.php
@@ -1,373 +1,583 @@
 <?php
 
 namespace Tests\Browser\Meet;
 
 use App\OpenVidu\Room;
 use Tests\Browser;
 use Tests\Browser\Components\Dialog;
 use Tests\Browser\Components\Menu;
 use Tests\Browser\Pages\Meet\Room as RoomPage;
 use Tests\TestCaseDusk;
 
 class RoomSetupTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
         $this->clearMeetEntitlements();
     }
 
     public function tearDown(): void
     {
         $this->clearMeetEntitlements();
         parent::tearDown();
     }
 
     /**
      * Test non-existing room
      *
      * @group openvidu
      */
     public function testRoomNonExistingRoom(): void
     {
         $this->browse(function (Browser $browser) {
             $browser->visit(new RoomPage('unknown'))
                 ->within(new Menu(), function ($browser) {
                     $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login']);
                 });
 
             if ($browser->isDesktop()) {
                 $browser->within(new Menu('footer'), function ($browser) {
                     $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'tos', 'login']);
                 });
             } else {
                 $browser->assertMissing('#footer-menu .navbar-nav');
             }
 
             // FIXME: Maybe it would be better to just display the usual 404 Not Found error page?
 
             $browser->assertMissing('@toolbar')
                 ->assertMissing('@menu')
                 ->assertMissing('@session')
                 ->assertMissing('@chat')
                 ->assertMissing('@login-form')
                 ->assertVisible('@setup-form')
                 ->assertSeeIn('@setup-status-message', "The room does not exist.")
                 ->assertButtonDisabled('@setup-button');
         });
     }
 
     /**
      * Test the room setup page
      *
      * @group openvidu
      */
     public function testRoomSetup(): void
     {
         // Make sure there's no session yet
         $room = Room::where('name', 'john')->first();
         if ($room->session_id) {
             $room->session_id = null;
             $room->save();
         }
 
         $this->assignMeetEntitlement('john@kolab.org', 'meet');
 
         $this->browse(function (Browser $browser) {
             $browser->visit(new RoomPage('john'))
                 ->within(new Menu(), function ($browser) {
                     $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login']);
                 });
 
             if ($browser->isDesktop()) {
                 $browser->within(new Menu('footer'), function ($browser) {
                     $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'tos', 'login']);
                 });
             } else {
                 $browser->assertMissing('#footer-menu .navbar-nav');
             }
 
             // Note: I've found out that if I have another Chrome instance running
             //       that uses media, here the media devices will not be available
 
             // TODO: Test enabling/disabling cam/mic in the setup widget
 
             $browser->assertMissing('@toolbar')
                 ->assertMissing('@menu')
                 ->assertMissing('@session')
                 ->assertMissing('@chat')
                 ->assertMissing('@login-form')
                 ->assertVisible('@setup-form')
                 ->assertSeeIn('@setup-title', 'Set up your session')
                 ->assertVisible('@setup-video')
                 ->assertVisible('@setup-form .input-group:nth-child(1) svg')
                 ->assertAttribute('@setup-form .input-group:nth-child(1) .input-group-text', 'title', 'Microphone')
                 ->assertVisible('@setup-mic-select')
                 ->assertVisible('@setup-form .input-group:nth-child(2) svg')
                 ->assertAttribute('@setup-form .input-group:nth-child(2) .input-group-text', 'title', 'Camera')
                 ->assertVisible('@setup-cam-select')
                 ->assertVisible('@setup-form .input-group:nth-child(3) svg')
                 ->assertAttribute('@setup-form .input-group:nth-child(3) .input-group-text', 'title', 'Nickname')
                 ->assertValue('@setup-nickname-input', '')
                 ->assertAttribute('@setup-nickname-input', 'placeholder', 'Your name')
                 ->assertMissing('@setup-password-input')
                 ->assertSeeIn(
                     '@setup-status-message',
                     "The room is closed. Please, wait for the owner to start the session."
                 )
                 ->assertSeeIn('@setup-button', "I'm the owner");
         });
     }
 
     /**
      * Test two users in a room (joining/leaving and some basic functionality)
      *
      * @group openvidu
      * @depends testRoomSetup
      */
     public function testTwoUsersInARoom(): void
     {
         $this->assignMeetEntitlement('john@kolab.org', 'meet');
 
         $this->browse(function (Browser $browser, Browser $guest) {
             // In one browser window act as a guest
             $guest->visit(new RoomPage('john'))
                 ->assertMissing('@toolbar')
                 ->assertMissing('@menu')
                 ->assertMissing('@session')
                 ->assertMissing('@chat')
                 ->assertMissing('@login-form')
                 ->waitFor('@setup-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->assertSeeIn(
                     '@setup-status-message',
                     "The room is closed. Please, wait for the owner to start the session."
                 )
                 ->assertSeeIn('@setup-button', "I'm the owner");
 
             // In another window join the room as the owner (authenticate)
             $browser->on(new RoomPage('john'))
                 ->assertSeeIn('@setup-button', "I'm the owner")
                 ->clickWhenEnabled('@setup-button')
                 ->assertMissing('@toolbar')
                 ->assertMissing('@menu')
                 ->assertMissing('@session')
                 ->assertMissing('@chat')
                 ->assertMissing('@setup-form')
                 ->assertVisible('@login-form')
                 ->submitLogon('john@kolab.org', 'simple123')
                 ->waitFor('@setup-form')
                 ->assertMissing('@login-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->waitFor('@setup-status-message')
                 ->assertSeeIn('@setup-status-message', "The room is closed. It will be open for others after you join.")
                 ->assertSeeIn('@setup-button', "JOIN")
                 ->type('@setup-nickname-input', 'john')
                 // Join the room (click the button twice, to make sure it does not
                 // produce redundant participants/subscribers in the room)
                 ->clickWhenEnabled('@setup-button')
                 ->pause(10)
                 ->click('@setup-button')
                 ->waitFor('@session')
                 ->assertMissing('@setup-form')
                 ->whenAvailable('div.meet-video.self', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertSeeIn('.meet-nickname', 'john')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertMissing('.controls button.link-audio')
                         ->assertMissing('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->within(new Menu(), function ($browser) {
                     $browser->assertMenuItems(['explore', 'blog', 'support', 'dashboard', 'logout']);
                 });
 
             if ($browser->isDesktop()) {
                 $browser->within(new Menu('footer'), function ($browser) {
                     $browser->assertMenuItems(['explore', 'blog', 'support', 'tos', 'dashboard', 'logout']);
                 });
             }
 
             // After the owner "opened the room" guest should be able to join
             $guest->waitUntilMissing('@setup-status-message', 10)
                 ->assertSeeIn('@setup-button', "JOIN")
                 // Join the room, disable cam/mic
                 ->select('@setup-mic-select', '')
                 //->select('@setup-cam-select', '')
                 ->clickWhenEnabled('@setup-button')
                 ->waitFor('@session')
                 ->assertMissing('@setup-form')
                 ->whenAvailable('div.meet-video.self', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertVisible('.meet-nickname')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertMissing('.controls button.link-audio')
                         ->assertVisible('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->whenAvailable('div.meet-video:not(.self)', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertSeeIn('.meet-nickname', 'john')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertVisible('.controls button.link-audio')
                         ->assertMissing('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->assertElementsCount('@session div.meet-video', 2)
                 ->within(new Menu(), function ($browser) {
                     $browser->assertMenuItems(['explore', 'blog', 'support', 'signup', 'login']);
                 });
 
             if ($guest->isDesktop()) {
                 $guest->within(new Menu('footer'), function ($browser) {
                     $browser->assertMenuItems(['explore', 'blog', 'support', 'tos', 'signup', 'login']);
                 });
             }
 
             // Check guest's elements in the owner's window
             $browser
                 ->whenAvailable('div.meet-video:not(.self)', function (Browser $browser) {
                     $browser->waitFor('video')
                         ->assertVisible('.meet-nickname')
                         ->assertVisible('.controls button.link-fullscreen')
                         ->assertVisible('.controls button.link-audio')
+                        ->assertMissing('.controls button.link-setup')
                         ->assertVisible('.status .status-audio')
                         ->assertMissing('.status .status-video');
                 })
                 ->assertElementsCount('@session div.meet-video', 2);
 
             // Test leaving the room
 
             // Guest is leaving
             $guest->click('@menu button.link-logout')
                 ->waitForLocation('/login');
 
             // Expect the participant removed from other users windows
             $browser->waitUntilMissing('@session div.meet-video:not(.self)');
 
             // Join the room as guest again
             $guest->visit(new RoomPage('john'))
                 ->assertMissing('@toolbar')
                 ->assertMissing('@menu')
                 ->assertMissing('@session')
                 ->assertMissing('@chat')
                 ->assertMissing('@login-form')
                 ->waitFor('@setup-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->assertMissing('@setup-status-message')
                 ->assertSeeIn('@setup-button', "JOIN")
                 // Join the room, disable cam/mic
                 ->select('@setup-mic-select', '')
                 //->select('@setup-cam-select', '')
                 ->clickWhenEnabled('@setup-button')
                 ->waitFor('@session');
 
             // Leave the room as the room owner
             // TODO: Test leaving the room by closing the browser window,
             //       it should not destroy the session
             $browser->click('@menu button.link-logout')
                 ->waitForLocation('/dashboard');
 
             // Expect other participants be informed about the end of the session
             $guest->with(new Dialog('#leave-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Room closed')
                         ->assertSeeIn('@body', "The session has been closed by the room owner.")
                         ->assertMissing('@button-cancel')
                         ->assertSeeIn('@button-action', 'Close')
                         ->click('@button-action');
             })
                 ->assertMissing('#leave-dialog')
                 ->waitForLocation('/login');
         });
     }
 
     /**
      * Test two subscribers-only users in a room
      *
      * @group openvidu
      * @depends testTwoUsersInARoom
      */
     public function testSubscribers(): void
     {
         $this->assignMeetEntitlement('john@kolab.org', 'meet');
 
         $this->browse(function (Browser $browser, Browser $guest) {
             // Join the room as the owner
             $browser->visit(new RoomPage('john'))
                 ->waitFor('@setup-form')
                 ->waitUntilMissing('@setup-status-message.loading')
                 ->waitFor('@setup-status-message')
                 ->type('@setup-nickname-input', 'john')
                 ->select('@setup-mic-select', '')
                 ->select('@setup-cam-select', '')
                 ->clickWhenEnabled('@setup-button')
                 ->waitFor('@session')
                 ->assertMissing('@setup-form')
                 ->whenAvailable('@subscribers .meet-subscriber.self', function (Browser $browser) {
                     $browser->assertSeeIn('.meet-nickname', 'john');
                 })
                 ->assertElementsCount('@session div.meet-video', 0)
                 ->assertElementsCount('@session video', 0)
                 ->assertElementsCount('@session .meet-subscriber', 1)
                 ->assertToolbar([
                     'audio' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
                     'video' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
                     'screen' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
                     'chat' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'fullscreen' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                     'security' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                     'logout' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                 ]);
 
             // After the owner "opened the room" guest should be able to join
             // In one browser window act as a guest
             $guest->visit(new RoomPage('john'))
                 ->waitUntilMissing('@setup-status-message', 10)
                 ->assertSeeIn('@setup-button', "JOIN")
                 // Join the room, disable cam/mic
                 ->select('@setup-mic-select', '')
                 ->select('@setup-cam-select', '')
                 ->clickWhenEnabled('@setup-button')
                 ->waitFor('@session')
                 ->assertMissing('@setup-form')
                 ->whenAvailable('@subscribers .meet-subscriber.self', function (Browser $browser) {
                     $browser->assertVisible('.meet-nickname');
                 })
                 ->whenAvailable('@subscribers .meet-subscriber:not(.self)', function (Browser $browser) {
                     $browser->assertSeeIn('.meet-nickname', 'john');
                 })
                 ->assertElementsCount('@session div.meet-video', 0)
                 ->assertElementsCount('@session video', 0)
                 ->assertElementsCount('@session div.meet-subscriber', 2)
                 ->assertToolbar([
                     'audio' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
                     'video' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
                     'screen' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_DISABLED,
                     'chat' => RoomPage::BUTTON_INACTIVE | RoomPage::BUTTON_ENABLED,
                     'fullscreen' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                     'logout' => RoomPage::BUTTON_ACTIVE | RoomPage::BUTTON_ENABLED,
                 ]);
 
             // Check guest's elements in the owner's window
             $browser
                 ->whenAvailable('@subscribers .meet-subscriber:not(.self)', function (Browser $browser) {
                     $browser->assertVisible('.meet-nickname');
                 })
                 ->assertElementsCount('@session div.meet-video', 0)
                 ->assertElementsCount('@session video', 0)
                 ->assertElementsCount('@session .meet-subscriber', 2);
 
             // Test leaving the room
 
             // Guest is leaving
             $guest->click('@menu button.link-logout')
                 ->waitForLocation('/login');
 
             // Expect the participant removed from other users windows
             $browser->waitUntilMissing('@session .meet-subscriber:not(.self)');
         });
     }
+
+    /**
+     * Test demoting publisher to a subscriber
+     *
+     * @group openvidu
+     * @depends testSubscribers
+     */
+    public function testDemoteToSubscriber(): void
+    {
+        $this->assignMeetEntitlement('john@kolab.org');
+
+        $this->browse(function (Browser $browser, Browser $guest1, Browser $guest2) {
+            // Join the room as the owner
+            $browser->visit(new RoomPage('john'))
+                ->waitFor('@setup-form')
+                ->waitUntilMissing('@setup-status-message.loading')
+                ->waitFor('@setup-status-message')
+                ->type('@setup-nickname-input', 'john')
+                ->clickWhenEnabled('@setup-button')
+                ->waitFor('@session')
+                ->assertMissing('@setup-form')
+                ->waitFor('@session video');
+
+            // In one browser window act as a guest
+            $guest1->visit(new RoomPage('john'))
+                ->waitUntilMissing('@setup-status-message', 10)
+                ->assertSeeIn('@setup-button', "JOIN")
+                ->clickWhenEnabled('@setup-button')
+                ->waitFor('@session')
+                ->assertMissing('@setup-form')
+                ->waitFor('div.meet-video.self')
+                ->waitFor('div.meet-video:not(.self)')
+                ->assertElementsCount('@session div.meet-video', 2)
+                ->assertElementsCount('@session video', 2)
+                ->assertElementsCount('@session div.meet-subscriber', 0)
+                // assert there's no moderator-related features for this guess available
+                ->click('@session .meet-video.self .meet-nickname')
+                ->whenAvailable('@session .meet-video.self .dropdown-menu', function (Browser $browser) {
+                    $browser->assertMissing('.permissions');
+                })
+                ->click('@session .meet-video:not(.self) .meet-nickname')
+                ->pause(50)
+                ->assertMissing('.dropdown-menu');
+
+            // Demote the guest to a subscriber
+            $browser
+                ->waitFor('div.meet-video.self')
+                ->waitFor('div.meet-video:not(.self)')
+                ->assertElementsCount('@session div.meet-video', 2)
+                ->assertElementsCount('@session video', 2)
+                ->assertElementsCount('@session .meet-subscriber', 0)
+                ->click('@session .meet-video:not(.self) .meet-nickname')
+                ->whenAvailable('@session .meet-video:not(.self) .dropdown-menu', function (Browser $browser) {
+                    $browser->assertSeeIn('.action-role-publisher', 'Audio & Video publishing')
+                        ->click('.action-role-publisher')
+                        ->waitUntilMissing('.dropdown-menu');
+                })
+                ->waitUntilMissing('@session .meet-video:not(.self)')
+                ->waitFor('@session div.meet-subscriber')
+                ->assertElementsCount('@session div.meet-video', 1)
+                ->assertElementsCount('@session video', 1)
+                ->assertElementsCount('@session div.meet-subscriber', 1);
+
+            $guest1
+                ->waitUntilMissing('@session .meet-video.self')
+                ->waitFor('@session div.meet-subscriber')
+                ->assertElementsCount('@session div.meet-video', 1)
+                ->assertElementsCount('@session video', 1)
+                ->assertElementsCount('@session div.meet-subscriber', 1);
+
+            // Join as another user to make sure the role change is propagated to new connections
+            $guest2->visit(new RoomPage('john'))
+                ->waitUntilMissing('@setup-status-message', 10)
+                ->assertSeeIn('@setup-button', "JOIN")
+                ->select('@setup-mic-select', '')
+                ->select('@setup-cam-select', '')
+                ->clickWhenEnabled('@setup-button')
+                ->waitFor('@session')
+                ->assertMissing('@setup-form')
+                ->waitFor('div.meet-subscriber:not(.self)')
+                ->assertElementsCount('@session div.meet-video', 1)
+                ->assertElementsCount('@session video', 1)
+                ->assertElementsCount('@session div.meet-subscriber', 2)
+                ->click('@toolbar .link-logout');
+
+            // Promote the guest back to a publisher
+            $browser
+                ->click('@session .meet-subscriber .meet-nickname')
+                ->whenAvailable('@session .meet-subscriber .dropdown-menu', function (Browser $browser) {
+                    $browser->assertSeeIn('.action-role-publisher', 'Audio & Video publishing')
+                        ->assertNotChecked('.action-role-publisher input')
+                        ->click('.action-role-publisher')
+                        ->waitUntilMissing('.dropdown-menu');
+                })
+                ->waitFor('@session .meet-video:not(.self) video')
+                ->assertElementsCount('@session div.meet-video', 2)
+                ->assertElementsCount('@session video', 2)
+                ->assertElementsCount('@session div.meet-subscriber', 0);
+
+            $guest1
+                ->waitFor('@session .meet-video.self')
+                ->assertElementsCount('@session div.meet-video', 2)
+                ->assertElementsCount('@session video', 2)
+                ->assertElementsCount('@session div.meet-subscriber', 0);
+
+            // Demote the owner to a subscriber
+            $browser
+                ->click('@session .meet-video.self .meet-nickname')
+                ->whenAvailable('@session .meet-video.self .dropdown-menu', function (Browser $browser) {
+                    $browser->assertSeeIn('.action-role-publisher', 'Audio & Video publishing')
+                        ->assertChecked('.action-role-publisher input')
+                        ->click('.action-role-publisher')
+                        ->waitUntilMissing('.dropdown-menu');
+                })
+                ->waitUntilMissing('@session .meet-video.self')
+                ->waitFor('@session div.meet-subscriber.self')
+                ->assertElementsCount('@session div.meet-video', 1)
+                ->assertElementsCount('@session video', 1)
+                ->assertElementsCount('@session div.meet-subscriber', 1);
+
+            // Promote the owner to a publisher
+            $browser
+                ->click('@session .meet-subscriber.self .meet-nickname')
+                ->whenAvailable('@session .meet-subscriber.self .dropdown-menu', function (Browser $browser) {
+                    $browser->assertSeeIn('.action-role-publisher', 'Audio & Video publishing')
+                        ->assertNotChecked('.action-role-publisher input')
+                        ->click('.action-role-publisher')
+                        ->waitUntilMissing('.dropdown-menu');
+                })
+                ->waitUntilMissing('@session .meet-subscriber.self')
+                ->waitFor('@session div.meet-video.self')
+                ->assertElementsCount('@session div.meet-video', 2)
+                ->assertElementsCount('@session video', 2)
+                ->assertElementsCount('@session div.meet-subscriber', 0);
+        });
+    }
+
+    /**
+     * Test the media setup dialog
+     *
+     * @group openvidu
+     * @depends testDemoteToSubscriber
+     */
+    public function testMediaSetupDialog(): void
+    {
+        // Make sure there's no session yet
+        $room = Room::where('name', 'john')->first();
+        if ($room->session_id) {
+            $room->session_id = null;
+            $room->save();
+        }
+
+        $this->assignMeetEntitlement('john@kolab.org');
+
+        $this->browse(function (Browser $browser, $guest) {
+            // Join the room as the owner
+            $browser->visit(new RoomPage('john'))
+                ->waitFor('@setup-form')
+                ->waitUntilMissing('@setup-status-message.loading')
+                ->waitFor('@setup-status-message')
+                ->type('@setup-nickname-input', 'john')
+                ->clickWhenEnabled('@setup-button')
+                ->waitFor('@session')
+                ->assertMissing('@setup-form');
+
+            // In one browser window act as a guest
+            $guest->visit(new RoomPage('john'))
+                ->waitUntilMissing('@setup-status-message', 10)
+                ->assertSeeIn('@setup-button', "JOIN")
+                ->select('@setup-mic-select', '')
+                ->select('@setup-cam-select', '')
+                ->clickWhenEnabled('@setup-button')
+                ->waitFor('@session')
+                ->assertMissing('@setup-form');
+
+            $browser->waitFor('@session video')
+                ->click('.controls button.link-setup')
+                ->with(new Dialog('#media-setup-dialog'), function (Browser $browser) {
+                    $browser->assertSeeIn('@title', 'Media setup')
+                        ->assertVisible('form video')
+                        ->assertVisible('form > div:nth-child(1) video')
+                        ->assertVisible('form > div:nth-child(1) .volume')
+                        ->assertVisible('form > div:nth-child(2) svg')
+                        ->assertAttribute('form > div:nth-child(2) .input-group-text', 'title', 'Microphone')
+                        ->assertVisible('form > div:nth-child(2) select')
+                        ->assertVisible('form > div:nth-child(3) svg')
+                        ->assertAttribute('form > div:nth-child(3) .input-group-text', 'title', 'Camera')
+                        ->assertVisible('form > div:nth-child(3) select')
+                        ->assertMissing('@button-cancel')
+                        ->assertSeeIn('@button-action', 'Close')
+                        ->click('@button-action');
+                })
+                ->assertMissing('#media-setup-dialog')
+                // Test mute audio and video
+                ->click('.controls button.link-setup')
+                ->with(new Dialog('#media-setup-dialog'), function (Browser $browser) {
+                    $browser->select('form > div:nth-child(2) select', '')
+                        ->select('form > div:nth-child(3) select', '')
+                        ->click('@button-action');
+                })
+                ->assertMissing('#media-setup-dialog')
+                ->assertVisible('@session .meet-video .status .status-audio')
+                ->assertVisible('@session .meet-video .status .status-video');
+
+            $guest->waitFor('@session video')
+                ->assertVisible('@session .meet-video .status .status-audio')
+                ->assertVisible('@session .meet-video .status .status-video');
+        });
+    }
 }
diff --git a/src/tests/Browser/Meet/RoomsTest.php b/src/tests/Browser/Meet/RoomsTest.php
index 3865d145..e73325c6 100644
--- a/src/tests/Browser/Meet/RoomsTest.php
+++ b/src/tests/Browser/Meet/RoomsTest.php
@@ -1,111 +1,111 @@
 <?php
 
 namespace Tests\Browser\Meet;
 
 use App\Sku;
 use Tests\Browser;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\Browser\Pages\Meet\Room as RoomPage;
 use Tests\Browser\Pages\UserInfo;
 use Tests\TestCaseDusk;
 
 class RoomsTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
         $this->clearMeetEntitlements();
     }
 
     /**
      * {@inheritDoc}
      */
     public function tearDown(): void
     {
         $this->clearMeetEntitlements();
         parent::tearDown();
     }
 
     /**
      * Test rooms page (unauthenticated and unauthorized)
      *
      * @group openvidu
      */
     public function testRoomsUnauth(): void
     {
         // Test that the page requires authentication
         $this->browse(function (Browser $browser) {
             $browser->visit('/rooms')
                 ->on(new Home())
                 // User has no 'meet' entitlement yet, expect redirect to error page
                 ->submitLogon('john@kolab.org', 'simple123', false)
                 ->waitFor('#app > #error-page')
                 ->assertSeeIn('#error-page .code', '403')
                 ->assertSeeIn('#error-page .message', 'Access denied');
         });
     }
 
     /**
      * Test rooms page
      *
      * @group openvidu
      */
     public function testRooms(): void
     {
         $this->browse(function (Browser $browser) {
             $href = \config('app.url') . '/meet/john';
             $john = $this->getTestUser('john@kolab.org');
             $john->assignSku(Sku::where('title', 'beta')->first());
 
             // User has no 'meet' entitlement yet
             $browser->visit('/login')
                 ->on(new Home())
                 ->submitLogon('john@kolab.org', 'simple123', true)
                 ->on(new Dashboard())
                 ->assertMissing('@links a.link-chat');
 
             // Goto user subscriptions, and enable 'meet' subscription
             $browser->visit('/user/' . $john->id)
                 ->on(new UserInfo())
-                ->with('@skus', function ($browser) {
+                ->whenAvailable('@skus', function ($browser) {
                     $browser->click('#sku-input-meet');
                 })
                 ->click('button[type=submit]')
                 ->assertToast(Toast::TYPE_SUCCESS, 'User data updated successfully.')
                 ->click('.navbar-brand')
                 ->on(new Dashboard())
                 ->assertSeeIn('@links a.link-chat', 'Video chat')
                 // Make sure the element also exists on Dashboard page load
                 ->refresh()
                 ->on(new Dashboard())
                 ->assertSeeIn('@links a.link-chat', 'Video chat');
 
             // Test Video chat page
             $browser->click('@links a.link-chat')
                 ->waitFor('#meet-rooms')
                 ->waitFor('.card-text a')
                 ->assertSeeIn('.card-title', 'Voice & Video Conferencing')
                 ->assertSeeIn('.card-text a', $href)
                 ->assertAttribute('.card-text a', 'href', $href)
                 ->click('.card-text a')
                 ->on(new RoomPage('john'))
                 // check that entering the room skips the logon form
                 ->assertMissing('@toolbar')
                 ->assertMissing('@menu')
                 ->assertMissing('@session')
                 ->assertMissing('@chat')
                 ->assertMissing('@login-form')
                 ->assertVisible('@setup-form')
                 ->assertSeeIn('@setup-status-message', "The room is closed. It will be open for others after you join.")
                 ->assertSeeIn('@setup-button', "JOIN")
                 ->click('@setup-button')
                 ->waitFor('@session')
                 ->assertMissing('@setup-form');
         });
     }
 }
diff --git a/src/tests/Browser/Pages/Meet/Room.php b/src/tests/Browser/Pages/Meet/Room.php
index 825da0be..3ca4ec8c 100644
--- a/src/tests/Browser/Pages/Meet/Room.php
+++ b/src/tests/Browser/Pages/Meet/Room.php
@@ -1,200 +1,205 @@
 <?php
 
 namespace Tests\Browser\Pages\Meet;
 
 use Laravel\Dusk\Page;
 use PHPUnit\Framework\Assert;
 
 class Room extends Page
 {
     public const BUTTON_ACTIVE = 1;
     public const BUTTON_ENABLED = 2;
     public const BUTTON_INACTIVE = 4;
     public const BUTTON_DISABLED = 8;
 
     protected $roomName;
 
     /**
      * Object constructor.
      *
      * @param string $name Room name
      */
     public function __construct($name)
     {
         $this->roomName = $name;
     }
 
     /**
      * Get the URL for the page.
      *
      * @return string
      */
     public function url()
     {
         return '/meet/' . $this->roomName;
     }
 
     /**
      * Assert that the browser is on the page.
      *
      * @param \Laravel\Dusk\Browser $browser The browser object
      *
      * @return void
      */
     public function assert($browser)
     {
         $browser->waitForLocation($this->url())
             ->waitUntilMissing('.app-loader')
             ->waitUntilMissing('#meet-setup div.status-message.loading');
     }
 
     /**
      * Get the element shortcuts for the page.
      *
      * @return array
      */
     public function elements()
     {
         return [
             '@app' => '#app',
 
             '@setup-form' => '#meet-setup form',
             '@setup-title' => '#meet-setup .card-title',
             '@setup-mic-select' => '#setup-microphone',
             '@setup-cam-select' => '#setup-camera',
             '@setup-nickname-input' => '#setup-nickname',
             '@setup-password-input' => '#setup-password',
-            '@setup-preview' => '#setup-preview',
-            '@setup-volume' => '#setup-preview .volume',
-            '@setup-video' => '#setup-preview video',
+            '@setup-preview' => '#meet-setup .media-setup-preview',
+            '@setup-volume' => '#meet-setup .media-setup-preview .volume',
+            '@setup-video' => '#meet-setup .media-setup-preview video',
             '@setup-status-message' => '#meet-setup div.status-message',
             '@setup-button' => '#join-button',
 
             '@toolbar' => '#meet-session-toolbar',
 
             '@menu' => '#meet-session-menu',
 
             '@session' => '#meet-session',
             '@subscribers' => '#meet-subscribers',
 
             '@chat' => '#meet-chat',
             '@chat-input' => '#meet-chat textarea',
             '@chat-list' => '#meet-chat .chat',
 
             '@login-form' => '#meet-auth',
             '@login-email-input' => '#inputEmail',
             '@login-password-input' => '#inputPassword',
             '@login-second-factor-input' => '#secondfactor',
             '@login-button' => '#meet-auth button',
         ];
     }
 
     /**
      * Assert menu state.
      *
      * @param \Tests\Browser $browser The browser object
      * @param array          $menu    Menu items/state
      */
     public function assertToolbar($browser, array $menu): void
     {
         $browser->assertElementsCount('@menu button', count($menu));
 
         foreach ($menu as $item => $state) {
             $this->assertToolbarButtonState($browser, $item, $state);
         }
     }
 
     /**
      * Assert menu button state.
      *
      * @param \Tests\Browser $browser The browser object
      * @param string         $button  Button name
      * @param int            $state   Expected button state (sum of BUTTON_* consts)
      */
     public function assertToolbarButtonState($browser, $button, $state): void
     {
         $class = '';
 
         if ($state & self::BUTTON_ACTIVE) {
             $class .= ':not(.text-danger)';
         }
 
         if ($state & self::BUTTON_INACTIVE) {
             $class .= '.text-danger';
         }
 
         if ($state & self::BUTTON_DISABLED) {
             $class .= '[disabled]';
         }
 
         if ($state & self::BUTTON_ENABLED) {
             $class .= ':not([disabled])';
         }
 
         $browser->assertVisible('@menu button.link-' . $button . $class);
     }
 
     /**
      * Assert the <video> element's 'muted' property state
      *
      * @param \Tests\Browser $browser  The browser object
      * @param string         $selector Video element selector
      * @param bool           $state    Expected state
      */
     public function assertAudioMuted($browser, $selector, $state): void
     {
         $selector = addslashes($browser->resolver->format($selector));
 
         $result = $browser->script(
             "var video = document.querySelector('$selector'); return video.muted"
         );
 
         Assert::assertSame((bool) $result[0], $state);
     }
 
     /**
      * Set the nickname for the participant
      *
      * @param \Tests\Browser $browser  The browser object
      * @param string         $selector Participant element selector
      * @param string         $nickname Nickname
      */
     public function setNickname($browser, $selector, $nickname): void
     {
-        // Use script() because type() does not work with this contenteditable widget
-        $selector = $selector . ' .meet-nickname .content';
-        $browser->script(
-            "var element = document.querySelector('$selector');"
-            . "element.focus();"
-            . "element.innerText = '$nickname';"
-            . "element.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 27 }))"
-        );
+        $element = "$selector .meet-nickname .content";
+
+        $browser->click("$selector .meet-nickname")
+            ->waitFor("$selector .dropdown-menu")
+            ->assertSeeIn("$selector .dropdown-menu > .action-nickname", 'Nickname')
+            ->click("$selector .dropdown-menu > .action-nickname")
+            ->waitUntilMissing('.dropdown-menu')
+            // Use script() because type() does not work with this contenteditable widget
+            ->script(
+                "var element = document.querySelector('$element');"
+                . "element.innerText = '$nickname';"
+                . "element.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 27 }))"
+            );
     }
 
     /**
      * Submit logon form.
      *
      * @param \Tests\Browser $browser  The browser object
      * @param string         $username User name
      * @param string         $password User password
      * @param array          $config   Client-site config
      */
     public function submitLogon($browser, $username, $password, $config = []): void
     {
         $browser->type('@login-email-input', $username)
             ->type('@login-password-input', $password);
 
         if ($username == 'ned@kolab.org') {
             $code = \App\Auth\SecondFactor::code('ned@kolab.org');
             $browser->type('@login-second-factor-input', $code);
         }
 
         if (!empty($config)) {
             $browser->script(
                 sprintf('Object.assign(window.config, %s)', \json_encode($config))
             );
         }
 
         $browser->click('@login-button');
     }
 }
diff --git a/src/tests/Feature/Controller/OpenViduTest.php b/src/tests/Feature/Controller/OpenViduTest.php
index c17875a1..a35d3884 100644
--- a/src/tests/Feature/Controller/OpenViduTest.php
+++ b/src/tests/Feature/Controller/OpenViduTest.php
@@ -1,557 +1,620 @@
 <?php
 
 namespace Tests\Feature\Controller;
 
 use App\Http\Controllers\API\V4\OpenViduController;
+use App\OpenVidu\Connection;
 use App\OpenVidu\Room;
 use Tests\TestCase;
 
 class OpenViduTest extends TestCase
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
 
         $this->clearMeetEntitlements();
         $room = Room::where('name', 'john')->first();
         $room->setSettings(['password' => null, 'locked' => null]);
     }
 
     public function tearDown(): void
     {
         $this->clearMeetEntitlements();
         $room = Room::where('name', 'john')->first();
         $room->setSettings(['password' => null, 'locked' => null]);
 
         parent::tearDown();
     }
 
     /**
      * Test listing user rooms
      *
      * @group openvidu
      */
     public function testIndex(): void
     {
         $john = $this->getTestUser('john@kolab.org');
         $jack = $this->getTestUser('jack@kolab.org');
         Room::where('user_id', $jack->id)->delete();
 
         // Unauth access not allowed
         $response = $this->get("api/v4/openvidu/rooms");
         $response->assertStatus(401);
 
         // John has one room
         $response = $this->actingAs($john)->get("api/v4/openvidu/rooms");
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertSame(1, $json['count']);
         $this->assertCount(1, $json['list']);
         $this->assertSame('john', $json['list'][0]['name']);
 
         // Jack has no room, but it will be auto-created
         $response = $this->actingAs($jack)->get("api/v4/openvidu/rooms");
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertSame(1, $json['count']);
         $this->assertCount(1, $json['list']);
         $this->assertRegExp('/^[0-9a-z-]{11}$/', $json['list'][0]['name']);
     }
 
     /**
      * Test joining the room
      *
      * @group openvidu
      */
     public function testJoinRoom(): void
     {
         $john = $this->getTestUser('john@kolab.org');
         $jack = $this->getTestUser('jack@kolab.org');
         $room = Room::where('name', 'john')->first();
         $room->session_id = null;
         $room->save();
 
         $this->assignMeetEntitlement($john);
 
         // Unauth access, no session yet
         $response = $this->post("api/v4/openvidu/rooms/{$room->name}");
         $response->assertStatus(422);
 
         $json = $response->json();
         $this->assertSame(323, $json['code']);
 
         // Non-existing room name
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/non-existing");
         $response->assertStatus(404);
 
         // TODO: Test accessing an existing room of deleted owner
 
         // Non-owner, no session yet
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}");
         $response->assertStatus(422);
 
         $json = $response->json();
         $this->assertSame(323, $json['code']);
 
         // Room owner, no session yet
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}");
         $response->assertStatus(422);
 
         $json = $response->json();
         $this->assertSame(324, $json['code']);
 
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}", ['init' => 1]);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $session_id = $room->fresh()->session_id;
 
         $this->assertSame(Room::ROLE_SUBSCRIBER | Room::ROLE_MODERATOR | Room::ROLE_OWNER, $json['role']);
         $this->assertSame($session_id, $json['session']);
         $this->assertTrue(is_string($session_id) && !empty($session_id));
         $this->assertTrue(strpos($json['token'], 'wss://') === 0);
         $this->assertTrue(!array_key_exists('shareToken', $json));
 
         $john_token = $json['token'];
 
         // Non-owner, now the session exists, no 'init' argument
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}");
         $response->assertStatus(422);
 
         $json = $response->json();
 
         $this->assertSame(322, $json['code']);
         $this->assertTrue(empty($json['token']));
         $this->assertTrue(empty($json['shareToken']));
 
         // Non-owner, now the session exists, with 'init', but no 'canPublish' argument
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", ['init' => 1]);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertSame(Room::ROLE_SUBSCRIBER, $json['role']);
         $this->assertSame($session_id, $json['session']);
         $this->assertTrue(strpos($json['token'], 'wss://') === 0);
         $this->assertTrue($json['token'] != $john_token);
         $this->assertTrue(empty($json['shareToken']));
 
         // Non-owner, now the session exists, with 'init', and with 'role=PUBLISHER'
         $post = ['canPublish' => true, 'init' => 1];
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", $post);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertSame(Room::ROLE_PUBLISHER, $json['role']);
         $this->assertSame($session_id, $json['session']);
         $this->assertTrue(strpos($json['token'], 'wss://') === 0);
         $this->assertTrue($json['token'] != $john_token);
         $this->assertTrue(!array_key_exists('shareToken', $json));
         $this->assertEmpty($json['config']['password']);
         $this->assertEmpty($json['config']['requires_password']);
 
         // Non-owner, password protected room, password not provided
         $room->setSettings(['password' => 'pass']);
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}");
         $response->assertStatus(422);
 
         $json = $response->json();
 
         $this->assertCount(4, $json);
         $this->assertSame(325, $json['code']);
         $this->assertSame('error', $json['status']);
         $this->assertSame('Failed to join the session. Invalid password.', $json['message']);
         $this->assertEmpty($json['config']['password']);
         $this->assertTrue($json['config']['requires_password']);
 
         // Non-owner, password protected room, invalid provided
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", ['password' => 'aa']);
         $response->assertStatus(422);
 
         $json = $response->json();
         $this->assertSame(325, $json['code']);
 
         // Non-owner, password protected room, valid password provided
         // TODO: Test without init=1
         $post = ['password' => 'pass', 'init' => 'init'];
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", $post);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertSame($session_id, $json['session']);
 
         // Make sure the room owner can access the password protected room w/o password
         // TODO: Test without init=1
         $post = ['init' => 'init'];
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}", $post);
         $response->assertStatus(200);
     }
 
     /**
      * Test locked room and join requests
      *
      * @group openvidu
      */
     public function testJoinRequests(): void
     {
         $john = $this->getTestUser('john@kolab.org');
         $jack = $this->getTestUser('jack@kolab.org');
         $room = Room::where('name', 'john')->first();
         $room->session_id = null;
         $room->save();
         $room->setSettings(['password' => null, 'locked' => 'true']);
 
         $this->assignMeetEntitlement($john);
 
         // Create the session (also makes sure the owner can access a locked room)
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}", ['init' => 1]);
         $response->assertStatus(200);
 
         // Non-owner, locked room, invalid/missing input
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}");
         $response->assertStatus(422);
 
         $json = $response->json();
 
         $this->assertCount(4, $json);
         $this->assertSame(326, $json['code']);
         $this->assertSame('error', $json['status']);
         $this->assertSame('Failed to join the session. Room locked.', $json['message']);
         $this->assertTrue($json['config']['locked']);
 
         // Non-owner, locked room, invalid requestId
         $post = ['nickname' => 'name', 'requestId' => '-----', 'init' => 1];
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", $post);
         $response->assertStatus(422);
 
         $json = $response->json();
         $this->assertSame(326, $json['code']);
 
         // Non-owner, locked room, invalid requestId
         $post = ['nickname' => 'name', 'init' => 1];
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", $post);
         $response->assertStatus(422);
 
         $json = $response->json();
         $this->assertSame(326, $json['code']);
 
         // Non-owner, locked room, valid input
         $reqId = '12345678';
         $post = ['nickname' => 'name', 'requestId' => $reqId, 'picture' => 'data:image/png;base64,01234'];
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", $post);
         $response->assertStatus(422);
 
         $json = $response->json();
 
         $this->assertCount(4, $json);
         $this->assertSame(327, $json['code']);
         $this->assertSame('error', $json['status']);
         $this->assertSame('Failed to join the session. Room locked.', $json['message']);
         $this->assertTrue($json['config']['locked']);
 
         // TODO: How do we assert that a signal has been sent to the owner?
 
         // Test denying a request
 
         // Unknown room
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/unknown/request/unknown/deny");
         $response->assertStatus(404);
 
         // Unknown request Id
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/request/unknown/deny");
         $response->assertStatus(500);
         $json = $response->json();
 
         $this->assertCount(2, $json);
         $this->assertSame('error', $json['status']);
         $this->assertSame('Failed to deny the join request.', $json['message']);
 
         // Non-owner access forbidden
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}/request/{$reqId}/deny");
         $response->assertStatus(403);
 
         // Valid request
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/request/{$reqId}/deny");
         $response->assertStatus(200);
         $json = $response->json();
 
         $this->assertSame('success', $json['status']);
 
         // Non-owner, locked room, join request denied
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", $post);
         $response->assertStatus(422);
 
         $json = $response->json();
         $this->assertSame(327, $json['code']);
 
         // Test accepting a request
 
         // Unknown room
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/unknown/request/unknown/accept");
         $response->assertStatus(404);
 
         // Unknown request Id
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/request/unknown/accept");
         $response->assertStatus(500);
         $json = $response->json();
 
         $this->assertCount(2, $json);
         $this->assertSame('error', $json['status']);
         $this->assertSame('Failed to accept the join request.', $json['message']);
 
         // Non-owner access forbidden
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}/request/{$reqId}/accept");
         $response->assertStatus(403);
 
         // Valid request
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/request/{$reqId}/accept");
         $response->assertStatus(200);
         $json = $response->json();
 
         $this->assertSame('success', $json['status']);
 
         // Non-owner, locked room, join request accepted
         $post['init'] = 1;
         $post['canPublish'] = true;
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", $post);
         $response->assertStatus(200);
         $json = $response->json();
 
         $this->assertSame(Room::ROLE_PUBLISHER, $json['role']);
         $this->assertTrue(strpos($json['token'], 'wss://') === 0);
 
         // TODO: Test a scenario where both password and lock are enabled
     }
 
     /**
      * Test joining the room
      *
      * @group openvidu
      * @depends testJoinRoom
      */
     public function testJoinRoomGuest(): void
     {
         $this->assignMeetEntitlement('john@kolab.org');
 
         // There's no asy way to logout the user in the same test after
         // using actingAs(). That's why this is moved to a separate test
         $room = Room::where('name', 'john')->first();
 
         // Guest, request with screenShare token
         $post = ['canPublish' => true, 'screenShare' => 1, 'init' => 1];
         $response = $this->post("api/v4/openvidu/rooms/{$room->name}", $post);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertSame(Room::ROLE_PUBLISHER, $json['role']);
         $this->assertSame($room->session_id, $json['session']);
         $this->assertTrue(strpos($json['token'], 'wss://') === 0);
         $this->assertTrue(strpos($json['shareToken'], 'wss://') === 0);
         $this->assertTrue($json['shareToken'] != $json['token']);
     }
 
     /**
      * Test closing the room (session)
      *
      * @group openvidu
      * @depends testJoinRoom
      */
     public function testCloseRoom(): void
     {
         $john = $this->getTestUser('john@kolab.org');
         $jack = $this->getTestUser('jack@kolab.org');
         $room = Room::where('name', 'john')->first();
 
         // Unauth access not allowed
         $response = $this->post("api/v4/openvidu/rooms/{$room->name}/close", []);
         $response->assertStatus(401);
 
         // Non-existing room name
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/non-existing/close", []);
         $response->assertStatus(404);
 
         // Non-owner
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}/close", []);
         $response->assertStatus(403);
 
         // Room owner
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/close", []);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertNull($room->fresh()->session_id);
         $this->assertSame('success', $json['status']);
         $this->assertSame("The session has been closed successfully.", $json['message']);
         $this->assertCount(2, $json);
 
         // TODO: Test if the session is removed from the OpenVidu server too
 
         // Test error handling when it's not possible to delete the session on
         // the OpenVidu server (use fake session_id)
         $room->session_id = 'aaa';
         $room->save();
 
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/close", []);
         $response->assertStatus(500);
 
         $json = $response->json();
 
         $this->assertSame('aaa', $room->fresh()->session_id);
         $this->assertSame('error', $json['status']);
         $this->assertSame("Failed to close the session.", $json['message']);
         $this->assertCount(2, $json);
     }
 
     /**
      * Test dismissing a participant (closing a connection)
      *
      * @group openvidu
      */
     public function testDismissConnection(): void
     {
         $john = $this->getTestUser('john@kolab.org');
         $jack = $this->getTestUser('jack@kolab.org');
         $room = Room::where('name', 'john')->first();
         $room->session_id = null;
         $room->save();
 
         $this->assignMeetEntitlement($john);
 
         // First we create the session
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}", ['init' => 1]);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         // And the other user connection
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", ['init' => 1]);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $conn_id = $json['connectionId'];
         $room->refresh();
         $conn_data = $room->getOVConnection($conn_id);
 
         $this->assertSame($conn_id, $conn_data['connectionId']);
 
         // Non-existing room name
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/non-existing/connections/{$conn_id}/dismiss");
         $response->assertStatus(404);
 
         // TODO: Test accessing an existing room of deleted owner
 
         // Non-existing connection
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/connections/123/dismiss");
         $response->assertStatus(404);
 
         $json = $response->json();
 
         $this->assertCount(2, $json);
         $this->assertSame('error', $json['status']);
         $this->assertSame('The connection does not exist.', $json['message']);
 
         // Non-owner access
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}/connections/{$conn_id}/dismiss");
         $response->assertStatus(403);
 
         // Expected success
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/connections/{$conn_id}/dismiss");
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertSame('success', $json['status']);
         $this->assertNull($room->getOVConnection($conn_id));
     }
 
     /**
      * Test configuring the room (session)
      *
      * @group openvidu
      */
     public function testSetRoomConfig(): void
     {
         $john = $this->getTestUser('john@kolab.org');
         $jack = $this->getTestUser('jack@kolab.org');
         $room = Room::where('name', 'john')->first();
 
         // Unauth access not allowed
         $response = $this->post("api/v4/openvidu/rooms/{$room->name}/config", []);
         $response->assertStatus(401);
 
         // Non-existing room name
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/non-existing/config", []);
         $response->assertStatus(404);
 
         // TODO: Test a room with a deleted owner
 
         // Non-owner
         $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}/config", []);
         $response->assertStatus(403);
 
         // Room owner
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/config", []);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertCount(2, $json);
         $this->assertSame('success', $json['status']);
         $this->assertSame("Room configuration updated successfully.", $json['message']);
 
         // Set password and room lock
         $post = ['password' => 'aaa', 'locked' => 1];
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/config", $post);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertCount(2, $json);
         $this->assertSame('success', $json['status']);
         $this->assertSame("Room configuration updated successfully.", $json['message']);
         $room->refresh();
         $this->assertSame('aaa', $room->getSetting('password'));
         $this->assertSame('true', $room->getSetting('locked'));
 
         // Unset password and room lock
         $post = ['password' => '', 'locked' => 0];
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/config", $post);
         $response->assertStatus(200);
 
         $json = $response->json();
 
         $this->assertCount(2, $json);
         $this->assertSame('success', $json['status']);
         $this->assertSame("Room configuration updated successfully.", $json['message']);
         $room->refresh();
         $this->assertSame(null, $room->getSetting('password'));
         $this->assertSame(null, $room->getSetting('locked'));
 
         // Test invalid option error
         $post = ['password' => 'eee', 'unknown' => 0];
         $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}/config", $post);
         $response->assertStatus(422);
 
         $json = $response->json();
 
         $this->assertCount(2, $json);
         $this->assertSame('error', $json['status']);
         $this->assertSame("Invalid room configuration option.", $json['errors']['unknown']);
 
         $room->refresh();
         $this->assertSame(null, $room->getSetting('password'));
     }
+
+    /**
+     * Test updating a participant (connection)
+     *
+     * @group openvidu
+     */
+    public function testUpdateConnection(): void
+    {
+        $john = $this->getTestUser('john@kolab.org');
+        $jack = $this->getTestUser('jack@kolab.org');
+        $room = Room::where('name', 'john')->first();
+        $room->session_id = null;
+        $room->save();
+
+        $this->assignMeetEntitlement($john);
+
+        // First we create the session
+        $response = $this->actingAs($john)->post("api/v4/openvidu/rooms/{$room->name}", ['init' => 1]);
+        $response->assertStatus(200);
+
+        $json = $response->json();
+
+        // And the other user connection
+        $response = $this->actingAs($jack)->post("api/v4/openvidu/rooms/{$room->name}", ['init' => 1]);
+        $response->assertStatus(200);
+
+        $json = $response->json();
+
+        $conn_id = $json['connectionId'];
+        $room->refresh();
+        $conn_data = $room->getOVConnection($conn_id);
+
+        $this->assertSame($conn_id, $conn_data['connectionId']);
+
+        // Non-existing room name
+        $response = $this->actingAs($john)->put("api/v4/openvidu/rooms/non-existing/connections/{$conn_id}", []);
+        $response->assertStatus(404);
+
+        // Non-existing connection
+        $response = $this->actingAs($john)->put("api/v4/openvidu/rooms/{$room->name}/connections/123", []);
+        $response->assertStatus(404);
+
+        $json = $response->json();
+
+        $this->assertCount(2, $json);
+        $this->assertSame('error', $json['status']);
+        $this->assertSame('The connection does not exist.', $json['message']);
+
+        // Non-owner access
+        $response = $this->actingAs($jack)->put("api/v4/openvidu/rooms/{$room->name}/connections/{$conn_id}", []);
+        $response->assertStatus(403);
+
+        // Expected success
+        $post = ['role' => Room::ROLE_PUBLISHER | Room::ROLE_MODERATOR];
+        $response = $this->actingAs($john)->put("api/v4/openvidu/rooms/{$room->name}/connections/{$conn_id}", $post);
+        $response->assertStatus(200);
+
+        $json = $response->json();
+
+        $this->assertSame('success', $json['status']);
+        $this->assertSame($post['role'], Connection::find($conn_id)->role);
+    }
 }