Node.js Express + Vue.js Zoom Clone p2p WebRTC Video Chat in Browser Using Javascript Full Project For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

 

A demo Video chat app using Vue.js

Prerequsite

To run this project, you need to have:

  • Node.js installed on your system
  • A server for generating a token. Clone and install it here.

Setup

Clone the repository:

 git clone https://github.com/dongido001/VueVideoChat.git

cd into the project:

cd VueVideoChat

Install dependecies:

npm install

Run the app!

npm run dev

The app should now be accessible from http://localhost:8080

And that’s it. You can read more about how it was built here

 

 

index.html

 

 

<template>
 <div class="container-fluid chat_container" id="app">
     <div class="row" v-if="authenticated">
       <Rooms />
       <Video :username="username"/>
       <Logs />
     </div>
     <div class="row" v-else>
       <div class="username">
           <form class="form-inline" @submit.prevent="submitUsername(username)">
             <div class="form-group mb-2">
                 <input type="text" class="form-control" v-model="username" >
             </div>
             <button type="submit" class="btn btn-primary mb-2 Botton">Enter!</button>
         </form>
       </div>
     </div>
 </div>
</template>

// ...

<script>
// import components
import Rooms from './components/Rooms'
import Video from './components/Video'
import Logs from './components/Logs'
import AddRoom from './components/AddRoom'
export default {
 name: 'App',
 data() {
   return {
     username: "",
     authenticated: false
   }
 },
 components: {
   Rooms,
   Video,
   Logs,
   AddRoom
 },
 methods: {
   submitUsername(username) {
      if(!username) {
        return alert('please provide a username');
      }
      this.authenticated = true;
   }
 }
 }
</script>

<style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
   background: #2c3e50;
 }
 .box {
   border: 1px solid gray;
 }
 .username {
   margin: 12px auto 7px auto;
   color: wheat;
 }
   .Botton {
   color: #fff;
   background-color: #4d555f;
   border-color: #303840;
   padding: 8px;
   font-weight: bolder;
 }
</style>

 

See also  Vue.js Download Files From URL Using Axios and Javascript Full Project For Beginners

 

 

DOWNLOAD FULL SOURCE CODE

 

Leave a Reply