Create video chat application in Vuejs

Creating a simple video chat application using Vue.js involves several key steps, including setting up a Vue project, integrating a video chat API like WebRTC, and handling the UI and UX aspects. For this guide, we’ll focus on a basic implementation that allows two users to video chat with each other. We’ll use Vue.js for the frontend and assume you have some basic backend or use a service like Firebase or PeerJS to handle WebRTC signaling.

Step 1: Setting Up Your Vue.js Project

First, ensure you have Node.js and npm installed. Then, create a new Vue.js project:

npm install -g @vue/cli
vue create my-video-chat-app
cd my-video-chat-app
npm run serve

Step 2: Install PeerJS

PeerJS simplifies WebRTC peer-to-peer data, video, and audio calls. Install PeerJS in your project:

npm install peerjs

Step 3: Create the Video Chat Component

Create a new component for the video chat functionality in your Vue project. Under the src/components directory, create a file named VideoChat.vue.

<template>
  <div>
    <h2>Video Chat</h2>
    <video id="my-video" muted="true" autoplay playsinline></video>
    <video id="user-video" autoplay playsinline></video>
    <div>
      <button @click="startCall">Start Call</button>
    </div>
  </div>
</template>

<script>
import Peer from 'peerjs';

export default {
  data() {
    return {
      peer: null,
      myStream: null,
      myPeerId: '',
    };
  },
  mounted() {
    this.initializePeer();
  },
  methods: {
    async initializePeer() {
      this.peer = new Peer(undefined, {
        path: '/peerjs',
        host: '/', // This should be replaced with your signaling server
        port: '3001', // Make sure to use the port your signaling server is on
      });

      await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      }).then((stream) => {
        this.myStream = stream;
        this.addVideoStream('my-video', stream);
      });

      this.peer.on('call', (call) => {
        call.answer(this.myStream); // Answer the call with your stream.
        call.on('stream', (userVideoStream) => {
          this.addVideoStream('user-video', userVideoStream);
        });
      });
    },
    startCall() {
      const userPeerId = prompt("Enter the peer ID of the user you'd like to call:");
      const call = this.peer.call(userPeerId, this.myStream);
      call.on('stream', (userVideoStream) => {
        this.addVideoStream('user-video', userVideoStream);
      });
    },
    addVideoStream(videoElementId, stream) {
      const video = document.getElementById(videoElementId);
      video.srcObject = stream;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      });
    },
  }
};
</script>

<style scoped>
video {
  width: 50%;
  border: 1px solid black;
}
</style>

Step 4: Use the Video Chat Component

Open your src/App.vue file and import the VideoChat component to include it in the template.

<template>
  <div id="app">
    <VideoChat/>
  </div>
</template>

<script>
import VideoChat from './components/VideoChat.vue'

export default {
  name: 'App',
  components: {
    VideoChat
  }
}
</script>

Step 5: Run Your Application

npm run serve

This guide provides a basic setup. Depending on your requirements, you might need to configure a signaling server for peer discovery and establish a connection (this example assumes a simple scenario). Explore the PeerJS documentation and Vue.js guides for more advanced features and customization options.