diff --git a/src/resources/js/meet/media.js b/src/resources/js/meet/media.js
index 768e8c8..cd5285e 100644
--- a/src/resources/js/meet/media.js
+++ b/src/resources/js/meet/media.js
@@ -1,281 +1,310 @@
 'use strict'
 
 function Media()
 {
     let audioActive = false     // True if the audio track is active
     let videoActive = false     // True if the video track is active
     let audioSource = ''        // Current audio device identifier
     let videoSource = ''        // Current video device identifier
     let cameras = []            // List of user video devices
     let microphones = []        // List of user audio devices
     let setupVideoElement       // <video> element for setup process
     let setupVolumeElement      // Volume indicator element for setup process
 
 
     this.getAudioDevices = async () => {
         let audioDevices = {}
 
         try
         {
             const devices = await navigator.mediaDevices.enumerateDevices()
 
             for (const device of devices) {
                 if (device.kind !== 'audioinput') {
                     continue
                 }
 
                 audioDevices[device.deviceId] = device
             }
         }
         catch (error) {
             console.error(error)
         }
 
         return audioDevices
     }
 
     this.getWebcams = async () => {
         let webcamDevices = {}
 
         try {
             const devices = await navigator.mediaDevices.enumerateDevices()
 
             for (const device of devices) {
                 if (device.kind !== 'videoinput') {
                     continue
                 }
 
                 webcamDevices[device.deviceId] = device
             }
         }
         catch (error) {
             console.error(error)
         }
 
         return webcamDevices
     }
 
     this.getMediaStream = async (successCallback, errorCallback) => {
         navigator.mediaDevices.getUserMedia({ audio: true, video: true })
             .then(mediaStream => {
                 successCallback(mediaStream)
             })
             .catch(error => {
                 errorCallback(error)
             })
     }
 
     this.getTrack = async (constraints) => {
         const stream = await navigator.mediaDevices.getUserMedia(constraints)
 
         if (constraints['audio']) {
             return stream.getAudioTracks()[0]
         }
 
         return stream.getVideoTracks()[0]
     }
 
     this.createVideoElement = (tracks, props) => {
         const videoElement = document.createElement('video')
 
         const stream = new MediaStream()
 
         tracks.forEach(track => stream.addTrack(track))
 
         videoElement.srcObject = stream
 
         this.setVideoProps(videoElement, props)
 
         return videoElement
     }
 
+    this.makePicture = (videoElement) => {
+        // Skip if video is not "playing"
+        if (!videoElement.videoWidth) {
+            return
+        }
+
+        // we're going to crop a square from the video and resize it
+        const maxSize = 64
+
+        // Calculate sizing
+        let sh = Math.floor(videoElement.videoHeight / 1.5)
+        let sw = sh
+        let sx = (videoElement.videoWidth - sw) / 2
+        let sy = (videoElement.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(videoElement, sx, sy, sw, sh, 0, 0, dw, dh)
+
+        // convert it to a usable data URL (png format)
+        return canvas.toDataURL()
+    }
+
     this.setVideoProps = (videoElement, props) => {
         videoElement.autoplay = true
         videoElement.controls = false
         videoElement.muted = props.muted || false
         videoElement.disablePictureInPicture = true // this does not work in Firefox
         videoElement.tabIndex = -1
         videoElement.setAttribute('playsinline', 'true')
 
         if (props.mirror) {
             videoElement.style.transform = 'rotateY(180deg)'
             videoElement.style.webkitTransform = 'rotateY(180deg)'
         }
     }
 
     /**
      * 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)
      */
     this.setupStart = (props) => {
         setupVideoElement = props.videoElement
         setupVolumeElement = props.volumeElement
 
         const callback = async (mediaStream) => {
             let videoStream = mediaStream.getVideoTracks()[0]
             let audioStream = mediaStream.getAudioTracks()[0]
 
             audioActive = !!audioStream
             videoActive = !!videoStream
 
             this.setVideoProps(setupVideoElement, { mirror: true, muted: true })
             setupVideoElement.srcObject = mediaStream
 
             volumeMeterStart()
 
             microphones = await this.getAudioDevices()
             cameras = await this.getWebcams()
 
             Object.keys(cameras).forEach(deviceId => {
                 // device's props: deviceId, kind, label
                 const device = cameras[deviceId]
                 if (videoStream && videoStream.label == device.label) {
                     videoSource = device.deviceId
                 }
             })
 
             Object.keys(microphones).forEach(deviceId => {
                 const device = microphones[deviceId]
                 if (audioStream && audioStream.label == device.label) {
                     audioSource = device.deviceId
                 }
             })
 
             props.onSuccess({
                 microphones,
                 cameras,
                 audioSource,
                 videoSource,
                 audioActive,
                 videoActive
             })
         }
 
         this.getMediaStream(callback, props.onError)
     }
 
     /**
      * Stop the setup "process", cleanup after it.
      */
     this.setupStop = () => {
         volumeMeterStop()
 
         // Unset the video element tracks
         if (setupVideoElement) {
             const mediaStream = new MediaStream()
             setupVideoElement.srcObject = mediaStream
         }
     }
 
     this.setupData = () => {
         return {
             microphones,
             cameras,
             audioSource,
             videoSource,
             audioActive,
             videoActive
         }
     }
 
     /**
      * Change the publisher audio device
      *
      * @param deviceId Device identifier string
      */
     this.setupSetAudio = async (deviceId) => {
         const mediaStream = setupVideoElement.srcObject
 
         if (!deviceId) {
             volumeMeterStop()
             this.removeTracksFromStream(mediaStream, 'Audio')
             audioActive = false
             audioSource = ''
         } else if (deviceId == audioSource) {
             volumeMeterStart()
             audioActive = true
         } else {
             const constraints = {
                 audio: {
                     deviceId: { ideal: deviceId }
                 }
             }
 
             volumeMeterStop()
 
             // Stop and remove the old track, otherwise you get "Concurrent mic process limit." error
             this.removeTracksFromStream(mediaStream, 'Audio')
 
             // TODO: Error handling
 
             const track = await this.getTrack(constraints)
 
             mediaStream.addTrack(track)
             volumeMeterStart()
             audioActive = true
             audioSource = deviceId
         }
 
         return audioActive
     }
 
     /**
      * Change the publisher video device
      *
      * @param deviceId Device identifier string
      */
     this.setupSetVideo = async (deviceId) => {
         const mediaStream = setupVideoElement.srcObject
 
         if (!deviceId) {
             this.removeTracksFromStream(mediaStream, 'Video')
             // Without the next line the video element will freeze on the last video frame
             // instead of turning black.
             setupVideoElement.srcObject = mediaStream
             videoActive = false
             videoSource = ''
         } else if (deviceId == audioSource) {
             videoActive = true
         } else {
             const constraints = {
                 video: {
                     deviceId: { ideal: deviceId }
                 }
             }
 
             // Stop and remove the old track, otherwise you get "Concurrent mic process limit." error
             this.removeTracksFromStream(mediaStream, 'Video')
 
             // TODO: Error handling
 
             const track = await this.getTrack(constraints)
 
             mediaStream.addTrack(track)
             videoActive = true
             videoSource = deviceId
         }
 
         return videoActive
     }
 
     this.removeTracksFromStream = (stream, type) => {
         if (stream) {
             stream[`get${type}Tracks`]().forEach(track => {
                 track.stop()
                 stream.removeTrack(track)
             })
         }
     }
 
     const volumeMeterStart = () => {
         // TODO
     }
 
     const volumeMeterStop = () => {
         // TODO
     }
 }
 
 export { Media }
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
index 627667b..2d90b3e 100644
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -1,731 +1,705 @@
 <template>
     <div id="meet-component">
         <div id="meet-session-toolbar" class="hidden">
             <span id="meet-counter" :title="$t('meet.partcnt')"><svg-icon icon="users"></svg-icon> <span></span></span>
             <span id="meet-session-logo" v-html="$root.logo()"></span>
             <div id="meet-session-menu">
                 <button :class="'btn link-audio' + (audioActive ? '' : ' on')" @click="switchSound" :disabled="!isPublisher()" :title="$t('meet.menu-audio-' + (audioActive ? 'mute' : 'unmute'))">
                     <svg-icon :icon="audioActive ? 'microphone' : 'microphone-slash'"></svg-icon>
                 </button>
                 <button :class="'btn link-video' + (videoActive ? '' : ' on')" @click="switchVideo" :disabled="!isPublisher()" :title="$t('meet.menu-video-' + (videoActive ? 'mute' : 'unmute'))">
                     <svg-icon :icon="videoActive ? 'video' : 'video-slash'"></svg-icon>
                 </button>
                 <button :class="'btn link-screen' + (screenShareActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" :title="$t('meet.menu-screen')">
                     <svg-icon icon="desktop"></svg-icon>
                 </button>
                 <button :class="'btn link-hand' + (handRaised ? ' on' : '')" v-if="!isPublisher()" @click="switchHand" :title="$t('meet.menu-hand-' + (handRaised ? 'lower' : 'raise'))">
                     <svg-icon icon="hand-paper"></svg-icon>
                 </button>
                 <span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown">
                     <button :class="'btn link-channel' + (session.channel ? ' on' : '')" data-bs-toggle="dropdown"
                             :title="$t('meet.menu-channel')" aria-haspopup="true" aria-expanded="false"
                     >
                         <svg-icon icon="headphones"></svg-icon>
                         <span class="badge bg-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span>
                     </button>
                     <div class="dropdown-menu">
                         <a :class="'dropdown-item' + (!session.channel ? ' active' : '')" href="#" data-code="" @click="switchChannel">- {{ $t('form.none') }} -</a>
                         <a v-for="code in channels" :key="code" href="#" @click="switchChannel" :data-code="code"
                            :class="'dropdown-item' + (session.channel == code ? ' active' : '')"
                         >{{ $t('lang.' + code) }}</a>
                     </div>
                 </span>
                 <button :class="'btn link-chat' + (chatActive ? ' on' : '')" @click="switchChat" :title="$t('meet.menu-chat')">
                     <svg-icon icon="comment"></svg-icon>
                 </button>
                 <button class="btn link-fullscreen closed hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen')">
                     <svg-icon icon="expand"></svg-icon>
                 </button>
                 <button class="btn link-fullscreen open hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen-exit')">
                     <svg-icon icon="compress"></svg-icon>
                 </button>
                 <button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" :title="$t('meet.options')">
                     <svg-icon icon="cog"></svg-icon>
                 </button>
                 <button class="btn link-logout" @click="logout" :title="$t('meet.menu-leave')">
                     <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">{{ $t('meet.setup-title') }}</div>
                 <div class="card-text">
                     <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 mb-2">
                                 <label for="setup-microphone" class="input-group-text mb-0" :title="$t('meet.mic')">
                                     <svg-icon icon="microphone"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mb-2">
                                 <label for="setup-camera" class="input-group-text mb-0" :title="$t('meet.cam')">
                                     <svg-icon icon="video"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
                                     <option value="">{{ $t('form.none') }}</option>
                                     <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
                                 </select>
                             </div>
                             <div class="input-group mb-2">
                                 <label for="setup-nickname" class="input-group-text mb-0" :title="$t('meet.nick')">
                                     <svg-icon icon="user"></svg-icon>
                                 </label>
                                 <input class="form-control" type="text" id="setup-nickname" v-model="nickname" :placeholder="$t('meet.nick-placeholder')">
                             </div>
                             <div class="input-group mt-2" v-if="session.config && session.config.requires_password">
                                 <label for="setup-password" class="input-group-text mb-0" :title="$t('form.password')">
                                     <svg-icon icon="key"></svg-icon>
                                 </label>
                                 <input type="password" class="form-control" id="setup-password" v-model="password" :placeholder="$t('form.password')">
                             </div>
                             <div class="mt-3">
                                 <button type="submit" id="join-button"
                                         :class="'btn w-100 btn-' + (isRoomReady() ? 'success' : 'primary')"
                                 >
                                     <span v-if="isRoomReady()">{{ $t('meet.joinnow') }}</span>
                                     <span v-else-if="roomState == 323">{{ $t('meet.imaowner') }}</span>
                                     <span v-else>{{ $t('meet.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-queue">
                 <div class="head" :title="$t('meet.qa')"><svg-icon icon="microphone-alt"></svg-icon></div>
             </div>
             <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">{{ $t('meet.leave-title') }}</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
                     </div>
                     <div class="modal-body">
                         <p>{{ $t('meet.leave-body') }}</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-danger modal-action" data-bs-dismiss="modal">{{ $t('btn.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">{{ $t('meet.media-title') }}</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></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-mic" class="input-group-text mb-0" :title="$t('meet.mic')">
                                     <svg-icon icon="microphone"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-mic" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">{{ $t('form.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-cam" class="input-group-text mb-0" :title="$t('meet.cam')">
                                     <svg-icon icon="video"></svg-icon>
                                 </label>
                                 <select class="form-select" id="setup-cam" v-model="camera" @change="setupCameraChange">
                                     <option value="">{{ $t('form.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-bs-dismiss="modal">{{ $t('btn.close') }}</button>
                     </div>
                 </div>
             </div>
         </div>
 
         <room-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></room-options>
     </div>
 </template>
 
 <script>
     import { Modal } from 'bootstrap'
+    import { Media } from '../../js/meet/media.js'
     import { Room as Meet } from '../../js/meet/room.js'
     import { Roles } from '../../js/meet/constants.js'
     import StatusMessage from '../Widgets/StatusMessage'
     import LogonForm from '../Login'
     import RoomOptions from './RoomOptions'
 
     // Register additional icons
     import { library } from '@fortawesome/fontawesome-svg-core'
 
     import {
         faComment,
         faCog,
         faCompress,
         faCrown,
         faDesktop,
         faExpand,
         faHandPaper,
         faHeadphones,
         faMicrophone,
         faMicrophoneSlash,
         faMicrophoneAlt,
         faPowerOff,
         faUser,
         faUsers,
         faVideo,
         faVideoSlash,
         faVolumeMute
     } from '@fortawesome/free-solid-svg-icons'
 
     // Register only these icons we need
     library.add(
         faComment,
         faCog,
         faCompress,
         faCrown,
         faDesktop,
         faExpand,
         faHandPaper,
         faHeadphones,
         faMicrophone,
         faMicrophoneSlash,
         faMicrophoneAlt,
         faPowerOff,
         faUser,
         faUsers,
         faVideo,
         faVideoSlash,
         faVolumeMute
     )
 
     let roomRequest
     const authHeader = 'X-Meet-Auth-Token'
 
     export default {
         components: {
             LogonForm,
             RoomOptions,
             StatusMessage
         },
         data() {
             return {
                 setup: {
                     cameras: [],
                     microphones: [],
                 },
                 canShareScreen: false,
                 camera: '',
                 channels: [],
                 languages: {
                     en: 'lang.en',
                     de: 'lang.de',
                     fr: 'lang.fr',
                     it: 'lang.it'
                 },
                 meet: null,
                 microphone: '',
                 nickname: '',
                 password: '',
                 room: null,
                 roomState: 'init',
                 roomStateLabels: {
                     init: 'meet.status-init',
                     323: 'meet.status-323',
                     324: 'meet.status-324',
                     325: 'meet.status-325',
                     326: 'meet.status-326',
                     327: 'meet.status-327',
                     404: 'meet.status-404',
                     429: 'meet.status-429',
                     500: 'meet.status-500'
                 },
                 session: {},
                 audioActive: false,
                 videoActive: false,
                 chatActive: false,
                 handRaised: false,
                 screenShareActive: false
             }
         },
         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()
 
             // Configure dialog events
             $('#leave-dialog')[0].addEventListener('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' })
             })
 
             const dialog = $('#media-setup-dialog')[0]
             dialog.addEventListener('show.bs.modal', () => { this.setupSession() })
             dialog.addEventListener('hide.bs.modal', () => { this.meet.setupStop() })
         },
         beforeDestroy() {
             clearTimeout(roomRequest)
 
             $('#app').removeClass('meet')
 
             if (this.meet) {
                 this.meet.leaveRoom()
             }
 
             delete axios.defaults.headers.common[authHeader]
 
             $(document.body).off('keydown.meet')
         },
         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)
             },
             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()
                         }
 
                         if (this.session.authToken) {
                             axios.defaults.headers.common[authHeader] = this.session.authToken
                         }
                     })
                     .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 >= 400)
 
                         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;
 
                             case 429:
                                 // Rate limited, wait and try again
                                 const waitTime = error.response.headers['retry-after'] || 10
                                 roomRequest = setTimeout(() => { this.initSession(init) }, waitTime * 1000)
                                 break;
 
                             default:
                                 if (this.roomState >= 400 && this.roomState != 404) {
                                     this.roomState = 500
                                 }
                         }
                     })
 
                 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-end">`
                             + `<button type="button" class="btn btn-sm btn-success accept">${this.$t('btn.accept')}</button>`
                             + `<button type="button" class="btn btn-sm btn-danger deny ms-2">${this.$t('btn.deny')}</button>`
                 )
 
                 this.$toast.message({
                     className: 'join-request',
                     icon: 'user',
                     timeout: 0,
                     title: this.$t('meet.join-request'),
                     // titleClassName: '',
                     body: body.html(),
                     onShow: element => {
                         const id = data.requestId
 
                         $(element).find('p').text(this.$t('meet.join-requested', { user: data.nickname || '' }))
 
                         // 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.session.token) {
                     this.initSession(true)
                     return
                 }
 
                 clearTimeout(roomRequest)
 
                 this.session.nickname = this.nickname
                 this.session.languages = this.languages
                 this.session.menuElement = $('#meet-session-menu')[0]
                 this.session.chatElement = $('#meet-chat')[0]
                 this.session.queueElement = $('#meet-queue')[0]
                 this.session.counterElement = $('#meet-counter span')[0]
                 this.session.translate = (label, args) => this.$t(label, args)
                 this.session.onSuccess = () => {
                     $('#app').addClass('meet')
                     $('#meet-setup').addClass('hidden')
                     $('#meet-session-toolbar,#meet-session-layout').removeClass('hidden')
                 }
                 this.session.onError = () => {
                     this.roomState = 500
                 }
                 this.session.onDestroy = event => {
                     // TODO: Display different message for every other reason
                     if (event.reason == 'session-closed' && !this.isRoomOwner()) {
                         new Modal('#leave-dialog').show()
                     }
                 }
                 this.session.onSessionDataUpdate = data => { this.updateSession(data) }
                 this.session.onJoinRequest = data => { this.joinRequest(data) }
                 this.session.onMediaSetup = () => { this.setupMedia() }
 
                 this.meet.joinRoom(this.session)
 
                 this.keyboardShortcuts()
             },
             keyboardShortcuts() {
                 $(document.body).on('keydown.meet', e => {
                     if ($(e.target).is('select,input,textarea')) {
                         return
                     }
 
                     // Self-Mute with 'm' key
                     if (e.key == 'm' || e.key == 'M') {
                         if ($('#meet-session-menu').find('.link-audio:not(:disabled)').length) {
                             this.switchSound()
                         }
                     }
                 })
             },
             logout() {
                 this.meet.leaveRoom(true)
                 this.meet = null
                 this.$router.push({ name: 'dashboard' })
             },
             makePicture() {
-                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();
+                return (new Media()).makePicture($("#meet-setup video")[0]) || '';
             },
             requestId() {
                 const key = 'kolab-meet-uid'
 
                 if (!this.reqId) {
                     this.reqId = localStorage.getItem(key)
                 }
 
                 if (!this.reqId) {
                     // We store the identifier in the browser to make sure that it is the same after
                     // page refresh for the avg user. This will not prevent hackers from sending
                     // the new identifier on every request.
                     // If we're afraid of a room owner being spammed with join requests we might invent
                     // a way to silently ignore all join requests after the owner pressed some button
                     // stating "all attendees already joined, lock the room for good!".
 
                     // This will create max. 24-char numeric string
                     this.reqId = (String(Date.now()) + String(Math.random()).substring(2)).substring(0, 24)
                     localStorage.setItem(key, this.reqId)
                 }
 
                 return this.reqId
             },
             roomOptions() {
                 new Modal('#room-options-dialog').show()
             },
             setupMedia() {
                 const dialog = $('#media-setup-dialog')[0]
 
                 if (!$('video', dialog).length) {
                     $('#meet-setup').find('video,div.volume').appendTo($('.media-setup-preview', dialog))
                 }
 
                 new Modal(dialog).show()
             },
             setupSession() {
                 this.meet.setupStart({
                     videoElement: $('#meet-setup video')[0] || $('#media-setup-dialog video')[0],
                     volumeElement: $('#meet-setup .volume')[0] || $('#media-setup-dialog .volume')[0],
                     onSuccess: setup => {
                         this.setup = setup
                         this.microphone = setup.audioSource
                         this.camera = setup.videoSource
 
                         this.audioActive = setup.audioActive
                         this.videoActive = setup.videoActive
                     },
                     onError: error => {
                         this.audioActive = false
                         this.videoActive = false
                     }
                 })
             },
             async setupCameraChange() {
                 this.videoActive = await this.meet.setupSetVideoDevice(this.camera)
             },
             async setupMicrophoneChange() {
                 this.audioActive = await this.meet.setupSetAudioDevice(this.microphone)
             },
             switchChannel(e) {
                 let channel = $(e.target).data('code')
 
                 this.$set(this.session, 'channel', channel)
                 this.meet.switchChannel(channel)
             },
             switchChat() {
                 let chat = $('#meet-chat')
                 let enabled = chat.is('.open')
 
                 chat.toggleClass('open')
 
                 if (!enabled) {
                     chat.find('textarea').focus()
                 }
 
                 this.chatActive = !enabled
 
                 // 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()
                 }
             },
             async switchHand() {
                 this.handRaised = await this.meet.raiseHand(!this.handRaised)
             },
             async switchSound() {
                 this.audioActive = await this.meet.switchAudio()
             },
             async switchVideo() {
                 this.videoActive = await this.meet.switchVideo()
             },
             switchScreen() {
                 const switchScreenAction = () => {
                     this.meet.switchScreen((enabled, error) => {
                         this.screenShareActive = enabled
                         if (!enabled && !error) {
                             // Closing a screen sharing connection invalidates the token
                             delete this.session.shareToken
                         }
                     })
                 }
 
                 if (this.session.shareToken || this.screenShareActive) {
                     switchScreenAction()
                 } else {
                     axios.post('/api/v4/openvidu/rooms/' + this.room + '/connections')
                         .then(response => {
                             this.session.shareToken = response.data.token
                             this.meet.updateSession(this.session)
                             switchScreenAction()
                         })
                 }
             },
             updateSession(data) {
                 this.session = data
                 this.channels = data.channels || []
 
                 const isPublisher = this.isPublisher()
 
                 this.videoActive = isPublisher ? data.videoActive : false
                 this.audioActive = isPublisher ? data.audioActive : false
                 this.handRaised = data.hand
             }
         }
     }
 </script>