クラウドの力でロボットを遠隔から操作してみよう！

git clone https://github.com/aws-samples/aws-serverless-telepresence-robot.git
cd aws-serverless-telepresence-robot/web-app

<template>
    <div id="app">
      <div v-if="!signedIn">
         <amplify-authenticator></amplify-authenticator>
      </div>
      <div v-if="signedIn">
        <amplify-sign-out class="signout" v-bind:signOutOptions="signOutOptions"></amplify-sign-out>
        <VideoViewer msg="Control Dashboard" />
        <Interface />
      </div>
    </div>
</template>

<script>
import Interface from './components/Interface.vue'
import VideoViewer from './components/VideoViewer.vue'
// eslint-disable-next-line no-unused-vars
import { AmplifyEventBus, components } from 'aws-amplify-vue'
import { Auth } from 'aws-amplify'

// eslint-disable-next-line no-unused-vars
import * as AmplifyVue from 'aws-amplify-vue'

const signOutOptions = {
  msg: 'You are currently signed in.',
  signOutButton: 'Sign Out'
}

export default {
  name: 'app',
  components: {
    VideoViewer,
    Interface
  },
  async beforeCreate() {
    try {
      // eslint-disable-next-line no-unused-vars
      const user = await Auth.currentAuthenticatedUser()
      this.signedIn = true
    } catch (err) {
      this.signedIn = false
    }
    AmplifyEventBus.$on('authState', info => {
      console.log(info)
      if (info === 'signedIn') {
        this.signedIn = true
      } else {
        this.signedIn = false
      }
    });
  },
  data () {
    return {
      signOutOptions,
      signedIn: false
    }
  }
}
</script>

<style>
body {
  margin: 0
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.signout {
  background-color: #ededed;
  margin: 0;
  padding: 11px 0px 1px;
}
</style>

<template>
  <div class="hello">
    <button v-on:click="forward">
      <i class="arrow up" />
    </button>
    <div class="btn-group">
      <button v-on:click="left">
        <i class="arrow left" />
      </button>
      <button v-on:click="stop">
        STOP
      </button>
      <button v-on:click="right">
        <i class="arrow right" />
      </button>
    </div>
    <button v-on:click="backward">
        <i class="arrow down" />
    </button>
  </div>
</template>

<script>
import { Auth, API } from 'aws-amplify'

Auth.currentCredentials().then((info) => {
     console.log(info)
   });
   
async function postData(dir) {
   let apiName = 'SendAction';
   let path = '/publish';
   let myInit = {
     body: {
       control: dir
     }
   }
   return await API.post(apiName, path, myInit);
}


export default {
  name: 'Interface',
  methods: {
    forward: function () {
      postData('forward')
    },
    stop: function () {
      postData('stop')
    },
    backward: function () {
      postData('backward')
    },
    left: function () {
      postData('left')
    },
    right: function () {
      postData('right')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
i {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
button {
  min-width: 45px;
  display: inline-block;
  margin-bottom: 0;
  margin: 3px;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  color: #fff;
  background-color: #f90;
  border-color: #ccc;
  padding: 14px 0;
  border: none;
  border-radius: 2px;
}
button:active {
  opacity: 1;
  background-color: var(--button-click);
}
button:hover {
  opacity: 0.8;
}
</style>

<template>
  <div class="viewer">
    <h1>{{ msg }}</h1>
    <div id="video-container">
      <div id="video-controls">
        <button type="button" id="open-stream" v-on:click="openStream" v-if="!isStreamActive">Open Video</button>
        <div id="active-video-controls" v-if="isStreamActive">
          <button type="button" id="stop-stream" v-on:click="stopStream">Stop Video</button>
        </div>
        <input type="checkbox" id="logChoice" v-model="showLogs">
        <label for="logChoice">Logs</label>
      </div>
      <video class="remote-view" id="myVideoEl" v-bind:hidden="!isStreamActive" autoplay playsinline  />
      <div id="logs" v-show="showLogs" />
    </div>
  </div>
</template>

<script>

import { SignalingClient } from 'amazon-kinesis-video-streams-webrtc'
import { Auth } from 'aws-amplify'
import { v4 as uuid } from 'uuid'
import AWS from 'aws-sdk'
import * as config from '../config.json'

function logger(msg) {
  console.log(msg)
  document.getElementById('logs').innerHTML += msg + '<br />'
}

function openStreamViewer() {
  Auth.currentCredentials().then((info) => {
       startViewer({
         channelARN: config.channelARN,
         credentials: Auth.essentialCredentials(info),
         region: info.sts.config.region,
         clientId: uuid()
       })
     })
}

let viewer = {}

async function startViewer(config) {
  logger('Starting Viewer')
  let { credentials, channelARN, region, clientId } = config

  const kinesisVideoClient = new AWS.KinesisVideo({
      region,
      credentials
  });

  const getSignalingChannelEndpointResponse = await kinesisVideoClient
      .getSignalingChannelEndpoint({
          ChannelARN: channelARN,
          SingleMasterChannelEndpointConfiguration: {
              Protocols: ['WSS', 'HTTPS'],
              Role: 'VIEWER'
          }
      })
      .promise()

  const endpointsByProtocol = getSignalingChannelEndpointResponse.ResourceEndpointList.reduce((endpoints, endpoint) => {
      logger('Get siganling channel endpoint')
      endpoints[endpoint.Protocol] = endpoint.ResourceEndpoint
      return endpoints
  }, {})

  const kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannels({
      region,
      credentials,
      endpoint: endpointsByProtocol.HTTPS
  })

  const getIceServerConfigResponse = await kinesisVideoSignalingChannelsClient
      .getIceServerConfig({
          ChannelARN: channelARN
      })
      .promise()

  const iceServers = [
      { urls: `stun:stun.kinesisvideo.${region}.amazonaws.com:443` }
  ]

  getIceServerConfigResponse.IceServerList.forEach(iceServer =>
      iceServers.push({
          urls: iceServer.Uris,
          username: iceServer.Username,
          credential: iceServer.Password
      })
  )

  const platform = navigator.platform
  logger(`Platform: ${platform}`)

  if(platform == 'iPhone') {
    try {
        viewer.localStream = await navigator.mediaDevices.getUserMedia(
          {
            video: true,
            audio: true
          })
    } catch (e) {
        logger(`Could not get usermedia ${JSON.stringify(e)}`);
        return
    }
  }

  viewer.peerConnection = new RTCPeerConnection({ iceServers })
  logger('Create peerConnection')

  viewer.signalingClient = new SignalingClient({
      channelARN,
      channelEndpoint: endpointsByProtocol.WSS,
      clientId,
      role: 'VIEWER',
      region,
      credentials
  })

  viewer.signalingClient.on('open', async () => {
      logger('Creating SDP offer')
      // Create an SDP offer and send it to the master
      const offer = await viewer.peerConnection.createOffer({
          offerToReceiveAudio: true,
          offerToReceiveVideo: true,
      })
      await viewer.peerConnection.setLocalDescription(offer)
      viewer.signalingClient.sendSdpOffer(viewer.peerConnection.localDescription)
  })
  
  // When the SDP answer is received back from the master, add it to the peer connection.
  viewer.signalingClient.on('sdpAnswer', async answer => {
      await viewer.peerConnection.setRemoteDescription(answer)
      logger('Received sdpAnswer')
  })

  // When an ICE candidate is received from the master, add it to the peer connection.
  viewer.signalingClient.on('iceCandidate', candidate => {
      logger('Candidate received from Master')
      viewer.peerConnection.addIceCandidate(candidate)
  })

  viewer.signalingClient.on('close', () => {
      logger('Signaling Client Closed')
      stopViewer()
  })

  viewer.signalingClient.on('error', error => {
      logger(`ERROR: ${JSON.stringify(error)}`)
  })

  viewer.peerConnection.addEventListener('icecandidate', ({ candidate }) => {
      if (candidate) {
        logger('Received iceCandidate')
        viewer.signalingClient.sendIceCandidate(candidate)
      }
  })

  // As remote tracks are received, add them to the remote view
  viewer.remoteView = document.querySelector('#myVideoEl')
  viewer.remoteView.play()
  logger('Start playing incoming video')

  viewer.peerConnection.addEventListener('track', event => {
      if (viewer.remoteView.srcObject) {
          return
      }
      viewer.remoteView.srcObject = event.streams[0]
  })

  viewer.signalingClient.open()

}

function stopViewer() {
  logger('[VIEWER] Stopping viewer connection')
  if (viewer.signalingClient) {
      viewer.signalingClient.close()
      viewer.signalingClient = null
  }

  if (viewer.peerConnection) {
      viewer.peerConnection.close()
      viewer.peerConnection = null
  }

  if (viewer.remoteView) {
      viewer.remoteView.srcObject = null
  }

  if (viewer.localStream) {
    viewer.localStream = null
  }
}

export default {
  name: 'WebRTC',
  props: {
    msg: String
  },
  data() {
    return {
      isStreamActive: false,
      showLogs: false
    }
  },
  methods: {
    openStream: function () {
      openStreamViewer()
      this.isStreamActive = true
    },
    stopStream: function () {
      stopViewer()
      this.isStreamActive = false
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
#logs {
  max-height: 100px;
  min-height: 50px;
  max-width: 370px;
  overflow: auto;
  border-style: solid;
  border-width: thin;
  margin: auto;
}
video {
  width:50%;
  visibility: visible;
  background: black;
}
button {
  min-width: 80px;
  display: inline-block;
  margin: 5px;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  color: #fff;
  background-color: #f90;
  border-color: #ccc;
  padding: 14px 0;
  border: none;
  border-radius: 2px;
}
button:active {
  opacity: 1;
  background-color: var(--button-click);
}
button:hover {
  opacity: 0.8;
}
button:disabled {
 opacity: 0.6;
 cursor: not-allowed;
}

</style>

{
  "endpoint": "< API Gateway エンドポイント >",
  "channelARN": "< Part 2でメモした シグナリングチャネル ARN >"
}