Ember Octane + Twilio Video

create-room.js

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';

import * as Video from 'twilio-video/dist/twilio-video';

import { attachTracks } from "../utils/intrati-twilio";

export default class CreateRoomComponent extends Component {
  @tracked previewing = false;

  @service router;
  @service('room-name') roomNameService;

  get roomName() {
    let name = this.roomNameService.getName();
    return name;
  }

  @action preview() {
    const localTracksPromise = window.previewTracks
      ? Promise.resolve(window.previewTracks)
      : Video.createLocalTracks();

    localTracksPromise.then(
      tracks => {
        window.previewTracks = tracks;
        this.previewing = true;

        const previewContainer = document.getElementById("local-media");

        if (!previewContainer.querySelector("video")) {
          attachTracks(tracks, previewContainer);
        }
      },
      error => {
        console.error("Unable to access local media", error);
      }
    );
  }

  @action continue() {
    this.router.transitionTo('room', this.roomName);
  }
}

room.js

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

import * as Video from 'twilio-video/dist/twilio-video';

import {
  attachTracks,
  getTracks,
  participantConnected,
  detachParticipantTracks
} from "../utils/intrati-twilio";

export default class RoomComponent extends Component {
  @service('active-room') activeRoomService;
  @service('room-name') roomNameService;
  @service('access-token') accessTokenService;

  @action startRoom() {
    const connectOptions = { name: this.roomNameService.getName() };

    Video.connect(this.accessTokenService.getToken(), connectOptions).then((room) => {
      /* room logic */
    },
      (error) => {
      console.error(`Unable to connect to Room: ${error.message}`);
    });
  }

  get roomUrl() {
    let roomName = this.roomNameService.getName();
    // Set domain in ENV
    let domain = "localhost:4200"
    let roomUrl = `https://${domain}/rooms/${roomName}`

    return roomUrl
  }

  @action copyRoomUrlToClipboard() {
    const copyable = document.getElementById("share-room-name");
    copyable.select();

    document.execCommand('copy');
  }
}