amazon-chime-sdk-rails 1.0.0

data/spec/rails_app/app/javascript/packs/application.js

@@ -0,0 +1,17 @@
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+
+require("@rails/ujs").start()
+require("turbolinks").start()
+require("@rails/activestorage").start()
+require("channels")
+
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)

data/spec/rails_app/app/javascript/packs/spa.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import App from '../App.vue'
+import router from '../router'
+import store from '../store'
+
+Vue.config.productionTip = false
+
+document.addEventListener('DOMContentLoaded', () => {
+  new Vue({
+    router,
+    store,
+    render: h => h(App)
+  }).$mount('#app')
+})

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

@@ -0,0 +1,74 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import store from '../store'
+import DeviseTokenAuth from '../components/DeviseTokenAuth.vue'
+import Rooms from '../components/rooms/Index.vue'
+import Room from '../components/rooms/Show.vue'
+import Meetings from '../components/meetings/Index.vue'
+import Meeting from '../components/meetings/Meeting.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  // Routes for common components
+  {
+    path: '/',
+    name: 'Root',
+    component: Rooms
+  },
+  {
+    path: '/users/sign_in',
+    name: 'SignIn',
+    component: DeviseTokenAuth
+  },
+  {
+    path: '/users/sign_out',
+    name: 'SignOut',
+    component: DeviseTokenAuth,
+    props: { isLogout: true }
+  },
+
+  // Routes for Rooms
+  {
+    path: '/rooms',
+    name: 'Rooms',
+    component: Rooms
+  },
+  {
+    path: '/rooms/:room_id',
+    name: 'Room',
+    component: Room,
+    props: true,
+    meta: { requiresAuth: true }
+  },
+
+  // Routes for Meetings
+  {
+    path: '/rooms/:room_id/meetings',
+    name: 'Meetings',
+    component: Meetings,
+    props: true,
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/rooms/:room_id/meetings/:meeting_id',
+    name: 'Meeting',
+    component: Meeting,
+    props: true,
+    meta: { requiresAuth: true }
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth) && !store.getters.userSignedIn) {
+      next({ name: 'SignIn', query: { redirect: to.fullPath }});
+  } else {
+    next();
+  }
+})
+
+export default router

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

@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import createPersistedState from "vuex-persistedstate"
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    signedInStatus: false,
+    currentUser: null,
+    authHeaders: {}
+  },
+  mutations: {
+    signIn(state, { user, authHeaders }) {
+      state.currentUser = user;
+      state.authHeaders = authHeaders;
+      state.signedInStatus = true;
+    },
+    signOut(state) {
+      state.signedInStatus = false;
+      state.currentUser = null;
+      state.authHeaders = {};
+    }
+  },
+  getters: {
+    userSignedIn(state) {
+      return state.signedInStatus;
+    },
+    currentUser(state) {
+      return state.currentUser;
+    },
+    authHeaders(state) {
+      return state.authHeaders;
+    }
+  },
+  plugins: [createPersistedState({storage: window.sessionStorage})]
+});

data/spec/rails_app/app/models/application_record.rb

@@ -0,0 +1,3 @@
+class ApplicationRecord < ActiveRecord::Base
+  self.abstract_class = true
+end

data/spec/rails_app/app/models/entry.rb

@@ -0,0 +1,5 @@
+class Entry < ApplicationRecord
+  belongs_to :room
+  belongs_to :user
+  validates :user, uniqueness: { scope: :room }
+end

data/spec/rails_app/app/models/room.rb

@@ -0,0 +1,12 @@
+class Room < ApplicationRecord
+  has_many :entries, dependent: :destroy
+  has_many :members, through: :entries, source: :user
+
+  def add_member(user)
+    entries.create(user: user)
+  end
+
+  def member?(user)
+    members.include?(user)
+  end
+end

data/spec/rails_app/app/models/user.rb

@@ -0,0 +1,6 @@
+class User < ApplicationRecord
+  devise :database_authenticatable, :registerable
+  include DeviseTokenAuth::Concerns::User
+  has_many :entries, dependent: :destroy
+  validates_uniqueness_of :name
+end

data/spec/rails_app/app/views/devise/registrations/new.html.erb

@@ -0,0 +1,34 @@
+<h2>Sign up</h2>
+
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="field">
+    <%= f.label :name %><br />
+    <%= f.text_field :name, autocomplete: "name" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :password %>
+    <% if @minimum_password_length %>
+    <em>(<%= @minimum_password_length %> characters minimum)</em>
+    <% end %><br />
+    <%= f.password_field :password, autocomplete: "new-password" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :password_confirmation %><br />
+    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Sign up" %>
+  </div>
+<% end %>
+
+<%= render "devise/shared/links" %>

data/spec/rails_app/app/views/layouts/_header.html.erb

@@ -0,0 +1,20 @@
+<header>
+  <div>
+    <div>
+      <%= link_to 'SPA with Rails API', "/spa/" %>
+      <strong><%= link_to 'Rails App with Action View', root_path %></strong>
+    </div>
+    <div>
+      <strong>Rails Application for Amazon Chime SDK Meeting (Rails App with Action View)</strong>
+    </div>
+    <div>
+      <% if user_signed_in? %>
+        <%= current_user.name %>
+        <%= link_to 'Logout', destroy_user_session_path, method: :delete %>
+      <% else %>
+        <%= link_to "Sign up", new_user_registration_path %>
+        <%= link_to 'Login', new_user_session_path %>
+      <% end %>
+    </div>
+  </div>
+</header>

data/spec/rails_app/app/views/layouts/application.html.erb

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Rails Application for Amazon Chime SDK Meeting</title>
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= yield(:javascript_pack_tag) %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+  </head>
+
+  <body>
+    <div id="app">
+      <%= render 'layouts/header' %>
+      <%= yield %>
+    <div>
+  </body>
+</html>

data/spec/rails_app/app/views/meetings/index.html.erb

@@ -0,0 +1,28 @@
+<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>
+    <% @meetings.each do |meeting| %>
+      <tr>
+        <td><%= link_to(meeting[:Meeting][:MeetingId], meeting_resource_path(meeting[:Meeting][:MeetingId])) %></td>
+        <td><%= meeting[:Meeting][:ExternalMeetingId] %></td>
+        <td><%= meeting[:Meeting][:MediaRegion] %></td>
+        <td><%= link_to 'Destroy', meeting_resource_path(meeting[:Meeting][:MeetingId]), method: :delete, data: { confirm: 'Are you sure?' } %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<p><%= link_to 'Create Meeting', meeting_resources_path, method: :post %></p>
+<p><%= link_to("Back to Room", room_path(@room)) %></p>

data/spec/rails_app/app/views/meetings/show.html.erb

@@ -0,0 +1,136 @@
+<p id="notice"><%= notice %></p>
+
+<h1>Meeting by Amazon Chime SDK</h1>
+
+<p><%= link_to("Show Meetings", meeting_resources_path) %></p>
+
+<% if @meeting %>
+  <strong>Meeting</strong>
+  <p>
+    Meeting ID : <%= link_to(@meeting[:Meeting][:MeetingId], meeting_resource_path(@meeting[:Meeting][:MeetingId])) %><br>
+    External Meeting ID : <%= @meeting[:Meeting][:ExternalMeetingId] %><br>
+    Media Region : <%= @meeting[:Meeting][:MediaRegion] %>
+  </p>
+
+  <div id="meeting" meeting-data="<%= @meeting.to_json %>"></div>
+<% end %>
+
+<% if @attendee %>
+  <strong>Attendee</strong>
+  <p>
+    Attendee ID : <%= link_to(@attendee[:Attendee][:AttendeeId], attendee_resource_path(@meeting[:Meeting][:MeetingId], @attendee[:Attendee][:AttendeeId])) %><br>
+    External User ID : <%= @attendee[:Attendee][:ExternalUserId] %><br>
+    Application Attendee Name : <%= application_attendee_name(@attendee) %>
+  </p>
+
+  <div id="status">
+    <strong>Status</strong>
+    <div id="meeting-status">
+      <p>Meeting : Offline <input type="button" value="Join a meeting" onclick="join()"></p>
+    </div>
+    <div id="attendee-status"></div>
+  </div>
+
+  <audio id="audio"></audio>
+
+  <div id="attendee" attendee-data="<%= @attendee.to_json %>"></div>
+  <div id="attendee-resources-path" attendee-resources-path-data="<%= attendee_resources_path(@meeting[:Meeting][:MeetingId]) %>"></div>
+<% end %>
+
+<%= javascript_include_tag "amazon-chime-sdk.min.js" %>
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+<script defer>
+  // This is a very simple script as a template view using Amazon Chime SDK.
+  // This script only provides simple audio meeting function.
+  // See the following guide to develop your own video meeting application.
+  // https://github.com/aws/amazon-chime-sdk-js
+  // https://aws.github.io/amazon-chime-sdk-js/modules/gettingstarted.html
+
+  // Customize this function to extract attendee name to show
+  function showApplicationUserName(attendee) {
+    // return attendee.Attendee.AttendeeId;
+    return `${attendee.Attendee.ApplicationMetadata.User.name} (${attendee.Attendee.AttendeeId})`;
+  }
+
+  const meeting = JSON.parse(document.getElementById('meeting').getAttribute('meeting-data'));
+  const attendee = JSON.parse(document.getElementById('attendee').getAttribute('attendee-data'));
+  const attendeeResourcesPath = document.getElementById('attendee-resources-path').getAttribute('attendee-resources-path-data');
+  const audioOutputElement = document.getElementById('audio');
+
+  const logger = new ChimeSDK.ConsoleLogger('ChimeMeetingLogs', ChimeSDK.LogLevel.INFO);
+  const deviceController = new ChimeSDK.DefaultDeviceController(logger);
+  const configuration = new ChimeSDK.MeetingSessionConfiguration(meeting, attendee);
+  const meetingSession = new ChimeSDK.DefaultMeetingSession(configuration, logger, deviceController);
+
+  const attendeeApi = axios.create({
+    baseURL: `${attendeeResourcesPath}/`
+  });
+
+  async function join() {
+    try {
+      const audioInputDevices = await meetingSession.audioVideo.listAudioInputDevices();
+      const audioOutputDevices = await meetingSession.audioVideo.listAudioOutputDevices();
+      await meetingSession.audioVideo.chooseAudioInputDevice(audioInputDevices[0].deviceId);
+      await meetingSession.audioVideo.chooseAudioOutputDevice(audioOutputDevices[0].deviceId);
+    } catch (error) {
+      // handle error - unable to acquire audio device perhaps due to permissions blocking
+      console.log(error);
+    }
+    meetingSession.audioVideo.bindAudioElement(audioOutputElement);
+    meetingSession.audioVideo.start();
+    document.getElementById("meeting-status").innerHTML = '<p>Meeting : Online <input type="button" value="Leave a meeting" onclick="leave()"></p><div id="audio-status"></div>';
+    document.getElementById("audio-status").innerHTML = '<p>Audio : Active <input type="button" value="Mute" onclick="mute()"></p>';
+    document.getElementById("attendee-status").innerHTML = '<strong>Present Attendees</strong>';
+    parepareAttendeeStatus();
+  }
+
+  function leave() {
+    meetingSession.audioVideo.stop();
+    document.getElementById("meeting-status").innerHTML = '<p>Meeting : Offline <input type="button" value="Join a meeting" onclick="join()">';
+    document.getElementById("attendee-status").innerHTML = '';
+  }
+
+  function mute() {
+    meetingSession.audioVideo.realtimeMuteLocalAudio();
+    document.getElementById("audio-status").innerHTML = '<p>Audio : Muted <input type="button" value="Unmute" onclick="unmute()"></p>';
+  }
+
+  function unmute() {
+    const unmuted = meetingSession.audioVideo.realtimeUnmuteLocalAudio();
+    if (unmuted) {
+      document.getElementById("audio-status").innerHTML = '<p>Audio : Active <input type="button" value="Mute" onclick="mute()"></p>';
+    } else {
+      console.log('You cannot unmute yourself');
+    }
+  }
+
+  function parepareAttendeeStatus() {
+    const presentAttendeeMap = {};
+    const callback = (presentAttendeeId, present) => {
+      if (present) {
+        attendeeApi.get(presentAttendeeId)
+          .then(response => {
+            presentAttendeeMap[presentAttendeeId] = response.data;
+            updateAttendeeStatus(presentAttendeeMap);
+          })
+          .catch(error => {
+            console.log(error);
+          });
+      } else {
+        delete presentAttendeeMap[presentAttendeeId]
+        updateAttendeeStatus(presentAttendeeMap);
+      }
+    };
+    meetingSession.audioVideo.realtimeSubscribeToAttendeeIdPresence(callback);
+  }
+
+  function updateAttendeeStatus(presentAttendeeMap) {
+    presentAttendees = "<strong>Present Attendees</strong><ul>";
+    Object.values(presentAttendeeMap).forEach(attendee => {
+      presentAttendees = presentAttendees + `<li>${showApplicationUserName(attendee)}</li>`
+    });
+    presentAttendees = presentAttendees + '</ul>'
+    document.getElementById("attendee-status").innerHTML = presentAttendees;
+  }
+</script>

data/spec/rails_app/app/views/rooms/_form.html.erb

@@ -0,0 +1,22 @@
+<%= form_with(model: room, local: true) do |form| %>
+  <% if room.errors.any? %>
+    <div id="error_explanation">
+      <h2><%= pluralize(room.errors.count, "error") %> prohibited this room from being saved:</h2>
+
+      <ul>
+        <% room.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="field">
+    <%= form.label :name %>
+    <%= form.text_field :name %>
+  </div>
+
+  <div class="actions">
+    <%= form.submit %>
+  </div>
+<% end %>