amazon-chime-sdk-rails 1.0.0

data/spec/rails_app/app/javascript/channels/consumer.js

@@ -0,0 +1,6 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the `rails generate channel` command.
+
+import { createConsumer } from "@rails/actioncable"
+
+export default createConsumer()

data/spec/rails_app/app/javascript/channels/index.js

@@ -0,0 +1,5 @@
+// Load all the channels within this directory and all subdirectories.
+// Channel files must be named *_channel.js.
+
+const channels = require.context('.', true, /_channel\.js$/)
+channels.keys().forEach(channels)

data/spec/rails_app/app/javascript/components/DeviseTokenAuth.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="login">
+    <h2>Log in</h2>
+    <form class="new_user" @submit.prevent="login">
+      <div class="field">
+        <label for="user_email">Email</label><br />
+        <input v-model="loginParams.email" autofocus="autofocus" autocomplete="email" type="email" value="" name="user[email]" id="user_email" />
+      </div>
+      <div class="field">
+        <label for="user_password">Password</label><br />
+        <input v-model="loginParams.password" autocomplete="current-password" type="password" name="user[password]" id="user_password" />
+      </div>
+      <div class="actions">
+        <input type="submit" name="commit" value="Log in" data-disable-with="Log in" />
+      </div>
+    </form>
+
+    <a href="/users/sign_up">(Sign up)</a><br />
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'DeviseTokenAuth',
+  props: {
+    isLogout: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      loginParams: {
+        email: "",
+        password: ""
+      }
+    }
+  },
+  mounted () {
+    if (this.isLogout) {
+      this.logout();
+    }
+  },
+  methods: {
+    login () {
+      axios
+        .post('/auth/sign_in', { email: this.loginParams.email, password: this.loginParams.password })
+        .then(response => {
+          if (response.status == 200) {
+            let authHeaders = {};
+            for (let authHeader of ['access-token', 'client', 'uid']) {
+              authHeaders[authHeader] = response.headers[authHeader];
+              axios.defaults.headers.common[authHeader] = authHeaders[authHeader];
+            }
+            this.$store.commit('signIn', { user: response.data.data, authHeaders: authHeaders });
+            if (this.$route.query.redirect) {
+              this.$router.push(this.$route.query.redirect);
+            } else {
+              this.$router.push('/');
+            }
+          }
+        })
+        .catch (error => {
+          console.log("Authentication failed");
+          if (error.response.status == 401) {
+            this.$router.go({path: this.$router.currentRoute.path});
+          }
+        })
+    },
+    logout () {
+      for (var authHeader of Object.keys(this.$store.getters.authHeaders)) {
+        delete axios.defaults.headers.common[authHeader];
+      }
+      this.$store.commit('signOut');
+      this.$router.push('/');
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

data/spec/rails_app/app/javascript/components/meetings/Index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <p id="notice">{{ notice }}</p>
+
+    <h1>Meetings by Amazon Chime SDK</h1>
+
+    <table>
+      <thead>
+        <tr>
+          <th>Meeting ID</th>
+          <th>External Meeting ID</th>
+          <th>Media Region</th>
+          <th colspan="1"></th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="meeting in meetings" :key="`${meeting.Meeting.MeetingId}`">
+          <td><router-link v-bind:to="{ name: 'Meeting', params: { room_id: room_id, meeting_id: meeting.Meeting.MeetingId } }">{{ meeting.Meeting.MeetingId }}</router-link></td>
+          <td>{{ meeting.Meeting.ExternalMeetingId }}</td>
+          <td>{{ meeting.Meeting.MediaRegion }}</td>
+          <td><a href="#" v-on:click="delete_meeting(meeting.Meeting.MeetingId, 'Are you sure?')" data-remote="true">Destroy</a></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p><a href="#" v-on:click="create_meeting(room_id)" data-remote="true">Create Meeting</a></p>
+    <p><router-link v-bind:to="{ name: 'Room', params: { room_id: room_id } }">Back to Room</router-link></p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'Meetings',
+  props: {
+    room_id: {
+      required: true
+    },
+    message: String
+  },
+  data () {
+    return {
+      meetings: [],
+      notice: this.message
+    }
+  },
+  mounted () {
+    axios
+      .get(`/rooms/${this.room_id}/meetings`)
+      .then(response => {
+        this.meetings = response.data.meetings;
+      })
+      .catch(error => {
+        if (error.response.status == 403) {
+          this.$router.push({ name: 'Room', params: { room_id: this.room_id, message: error.response.data.notice } });
+        }
+        this.notice = error;
+      })
+  },
+  methods: {
+    create_meeting (room_id) {
+      axios
+        .post(`/rooms/${this.room_id}/meetings`)
+        .then(response => {
+          if (response.status == 201) {
+            let meeting_id = response.data.Meeting.MeetingId;
+            this.$router.push({ name: 'Meeting', params: { room_id: this.room_id, meeting_id: meeting_id, message: `Meeting <${meeting_id}> was successfully created.` } });
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 403) {
+            this.notice = error.response.data.notice;
+          } else {
+            this.notice = error;
+          }
+        })
+    },
+    delete_meeting(meeting_id, confirmation) {
+      if (confirm(confirmation)) {
+        axios
+          .delete(`/rooms/${this.room_id}/meetings/${meeting_id}`)
+          .then(response => {
+            if (response.status == 204) {
+              this.notice = `Meeting <${meeting_id}> was successfully destroyed.`;
+            }
+          })
+          .catch (error => {
+            console.log(error.response);
+            this.notice = error;
+          })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

data/spec/rails_app/app/javascript/components/meetings/Meeting.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <p id="notice">{{ notice }}</p>
+
+    <h1>Meeting by Amazon Chime SDK</h1>
+
+    <p><router-link v-bind:to="{ name: 'Meetings', params: { room_id: room_id } }">Show Meetings</router-link></p>
+
+    <div v-if="meeting">
+      <strong>Meeting</strong>
+      <p>
+        Meeting ID : <router-link v-bind:to="{ name: 'Meeting', params: { room_id: room_id, meeting_id: meeting.Meeting.MeetingId } }">{{ meeting.Meeting.MeetingId }}</router-link><br>
+        External Meeting ID : {{ meeting.Meeting.ExternalMeetingId }}<br>
+        Media Region : {{ meeting.Meeting.MediaRegion }}
+      </p>
+    </div>
+
+    <div v-if="attendee">
+      <strong>Attendee</strong>
+      <p>
+        Attendee ID : <a v-bind:href="`/rooms/${room_id}/meetings/${meeting.Meeting.MeetingId}/attendees/${attendee.Attendee.AttendeeId}`">{{ attendee.Attendee.AttendeeId }}</a><br>
+        External User ID : {{ attendee.Attendee.ExternalUserId }}<br>
+        Application Attendee Name : {{ attendee.Attendee.ApplicationMetadata.User.name }}
+      </p>
+
+      <div id="status">
+        <strong>Status</strong>
+        <div v-if="meetingOnline">
+          <div id="meeting-status">
+            <p>Meeting : Online <input type="button" value="Leave a meeting" v-on:click="leave()"></p>
+            <div id="audio-status">
+              <div v-if="meetingMuted">
+                <p>Audio : Muted <input type="button" value="Unmute" v-on:click="unmute()"></p>
+              </div>
+              <div v-else>
+                <p>Audio : Active <input type="button" value="Mute" v-on:click="mute()"></p>
+              </div>
+            </div>
+          </div>
+          <div id="attendee-status">
+            <strong>Present Attendees</strong>
+            <ul>
+              <li v-for="attendeeName in presentAttendees" :key="attendeeName">{{ attendeeName }}</li>
+            </ul>
+          </div>
+        </div>
+        <div v-else>
+          <div id="meeting-status">
+            <p>Meeting : Offline <input type="button" value="Join a meeting" v-on:click="join()"></p>
+          </div>
+        </div>
+      </div>
+
+      <audio id="audio"></audio>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import {
+  ConsoleLogger,
+  DefaultDeviceController,
+  DefaultMeetingSession,
+  LogLevel,
+  MeetingSessionConfiguration
+} from 'amazon-chime-sdk-js'
+
+export default {
+  name: 'Meeting',
+  props: {
+    room_id: {
+      required: true
+    },
+    meeting_id: {
+      required: true
+    },
+    message: String
+  },
+  data () {
+    return {
+      meeting: null,
+      attendee: null,
+      notice: this.message,
+      meetingOnline: false,
+      meetingMuted: false,
+      presentAttendees: []
+    }
+  },
+  mounted () {
+    axios
+      .get(`/rooms/${this.room_id}/meetings/${this.meeting_id}`)
+      .then(response => {
+        this.meeting = { Meeting: response.data.Meeting };
+        this.attendee = { Attendee: response.data.Attendee };
+
+        const logger = new ConsoleLogger('ChimeMeetingLogs', LogLevel.INFO);
+        const deviceController = new DefaultDeviceController(logger);
+        const configuration = new MeetingSessionConfiguration(this.meeting, this.attendee);
+        this.meetingSession = new DefaultMeetingSession(configuration, logger, deviceController);
+      })
+      .catch(error => {
+          if (error.response.status == 404) {
+            this.$router.push({ name: 'Meetings', params: { room_id: this.room_id, message: `${error.response.data.error.message}: ${error.response.data.error.type}` } });
+          } else {
+            this.notice = error;
+          }
+      })
+  },
+  methods: {
+    // Customize this function to extract attendee name to show
+    showApplicationUserName(attendee) {
+      // return attendee.Attendee.AttendeeId;
+      return `${attendee.Attendee.ApplicationMetadata.User.name} (${attendee.Attendee.AttendeeId})`;
+    },
+    async join() {
+      try {
+        const audioInputDevices = await this.meetingSession.audioVideo.listAudioInputDevices();
+        const audioOutputDevices = await this.meetingSession.audioVideo.listAudioOutputDevices();
+        await this.meetingSession.audioVideo.chooseAudioInputDevice(audioInputDevices[0].deviceId);
+        await this.meetingSession.audioVideo.chooseAudioOutputDevice(audioOutputDevices[0].deviceId);
+      } catch (error) {
+        // handle error - unable to acquire audio device perhaps due to permissions blocking
+        console.log(error);
+      }
+      const audioOutputElement = document.getElementById('audio');
+      this.meetingSession.audioVideo.bindAudioElement(audioOutputElement);
+      this.meetingSession.audioVideo.start();
+      this.meetingOnline = true;
+      this.parepareAttendeeStatus();
+    },
+    leave() {
+      this.meetingSession.audioVideo.stop();
+      this.meetingOnline = false;
+      this.meetingMuted = false;
+      this.presentAttendees = [];
+    },
+    mute() {
+      this.meetingSession.audioVideo.realtimeMuteLocalAudio();
+      this.meetingMuted = true;
+    },
+    unmute() {
+      const unmuted = this.meetingSession.audioVideo.realtimeUnmuteLocalAudio();
+      if (unmuted) {
+        this.meetingMuted = false;
+      } else {
+        console.log('You cannot unmute yourself');
+      }
+    },
+    parepareAttendeeStatus() {
+      this.presentAttendeeMap = {};
+      const callback = (presentAttendeeId, present) => {
+        if (present) {
+          axios
+            .get(`/rooms/${this.room_id}/meetings/${this.meeting_id}/attendees/${presentAttendeeId}`)
+            .then(response => {
+              this.presentAttendeeMap[presentAttendeeId] = response.data;
+              this.updateAttendeeStatus(this.presentAttendeeMap);
+            })
+            .catch(error => {
+              console.log(error);
+            });
+        } else {
+          delete this.presentAttendeeMap[presentAttendeeId]
+          this.updateAttendeeStatus(this.presentAttendeeMap);
+        }
+      };
+      this.meetingSession.audioVideo.realtimeSubscribeToAttendeeIdPresence(callback);
+    },
+    updateAttendeeStatus(presentAttendeeMap) {
+      this.presentAttendees = Object.values(presentAttendeeMap).map(attendee => this.showApplicationUserName(attendee));
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

data/spec/rails_app/app/javascript/components/rooms/Index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <p id="notice">{{ notice }}</p>
+
+    <h1>Rooms</h1>
+
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th colspan="3"></th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="room in rooms" :key="`${room.id}`">
+          <td>{{ room.name }}</td>
+          <td><router-link v-bind:to="{ name: 'Room', params: { room_id: room.id } }">Show</router-link></td>
+          <td><a v-bind:href="`/rooms/${room.id}/edit`">(Edit)</a></td>
+          <td><a v-bind:href="`/rooms/${room.id}`" data-method="delete" data-confirm="Are you sure?" rel="nofollow">(Destroy)</a></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <br>
+
+    <a href="/rooms/new">(New Room)</a>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'Rooms',
+  data () {
+    return {
+      rooms: [],
+      notice: null
+    }
+  },
+  mounted () {
+    axios
+      .get('/rooms')
+      .then(response => {
+        this.rooms = response.data;
+      })
+  }
+}
+</script>
+
+<style scoped>
+</style>

data/spec/rails_app/app/javascript/components/rooms/Show.vue

@@ -0,0 +1,91 @@
+<template>
+  <div v-if="room">
+    <p id="notice">{{ notice }}</p>
+
+    <p>
+      <strong>Name:</strong>
+      {{ room.name }}
+    </p>
+
+    <p>
+      <strong>Private Meeting:</strong>
+      <p><router-link v-bind:to="{ name: 'Meetings', params: { room_id: room.id } }">Show Meetings</router-link></p>
+      <p><a href="#" v-on:click="create_meeting(room)" data-remote="true">Create Meeting</a></p>
+    </p>
+
+    <p>
+      <strong>Members:</strong>
+      <div>
+        <table>
+          <tbody>
+            <tr v-for="member in room.members" :key="`${member.name}`">
+              <td>{{ member.name }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </p>
+
+    <p>
+      <strong>Manage members:</strong>
+      <a v-bind:href="`/rooms/${room.id}`">(Show)</a>
+    </p>
+
+    <br>
+
+    <a v-bind:href="`/rooms/${room.id}/edit`">(Edit)</a>
+    <router-link v-bind:to="{ name: 'Rooms' }">Back</router-link>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'Room',
+  props: {
+    room_id: {
+      required: true
+    },
+    message: String
+  },
+  data () {
+    return {
+      room: null,
+      notice: this.message
+    }
+  },
+  mounted () {
+    axios
+      .get(`/rooms/${this.room_id}`)
+      .then(response => {
+        this.room = response.data;
+      })
+      .catch(error => {
+        this.notice = error;
+      })
+  },
+  methods: {
+    create_meeting (room_id) {
+      axios
+        .post(`/rooms/${this.room_id}/meetings`)
+        .then(response => {
+          if (response.status == 201) {
+            let meeting_id = response.data.Meeting.MeetingId;
+            this.$router.push({ name: 'Meeting', params: { room_id: this.room_id, meeting_id: meeting_id, message: `Meeting <${meeting_id}> was successfully created.` } });
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 403) {
+            this.notice = error.response.data.notice;
+          } else {
+            this.notice = error;
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>