<template>
  <div>
    <image-stream/>
    <Nipple :position="'left'" @move="moveCamera"/>
    <Nipple :position="'right'" @move="moveWalle"/>
  </div>
</template>

<script>
import ImageStream from '../components/ImageStream.vue';
import Nipple from '../components/Nipple.vue';

export default {
  name: 'Camera',
  mounted() {
  },
  data() {
    return {
    };
  },
  methods: {
    toggleFullScreen() {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        window.document.body.requestFullscreen();
      }
    },
    moveCamera({ force, angle }) {
      this.$socket.emit('camera', {
        force, angle,
      });
    },
    moveWalle({ force, angle }) {
      this.$socket.emit('move', {
        force, angle,
      });
    },
  },
  components: {
    ImageStream,
    Nipple,
  },
};
</script>
