Construir una aplicación de videoconferencia web con Vue.js

Introducción

En este proyecto, aprenderás a construir una aplicación de videoconferencia web utilizando Vue.js 2.x. El proyecto se centra en implementar varios efectos de visualización para la lista de asistentes en el software de videoconferencia web.

👀 Vista previa

Vista previa de la aplicación de videoconferencia web

🎯 Tareas

En este proyecto, aprenderás:

Cómo implementar la funcionalidad de lectura y renderizado de datos asincrónicos para obtener y mostrar datos de usuario en las ventanas de inicio de sesión y participantes.
Cómo implementar la función de cambio de inicio de sesión y cierre de sesión, permitiendo a los usuarios iniciar sesión y cerrar sesión en la aplicación.
Cómo garantizar que el usuario autenticado siempre se muestre como el primer usuario en la lista de participantes.
Cómo implementar la funcionalidad de cambio de visibilidad de la ventana de participantes.
Cómo implementar la funcionalidad de cambio del efecto de visualización de la lista de participantes, incluyendo mostrar a todos los participantes, ocultar la lista de participantes y mostrar solo el usuario actualmente autenticado.

🏆 Logros

Después de completar este proyecto, podrás:

Construir una aplicación de videoconferencia web utilizando Vue.js 2.x con varias características de interfaz de usuario.
Obtener y mostrar datos asincrónicamente utilizando Axios.
Implementar el control de estado y el manejo de eventos en una aplicación Vue.js.
Crear interfaces de usuario dinámicas y cambiar entre diferentes modos de visualización.

Configurar la estructura del proyecto

En este paso, aprenderás a configurar la estructura del proyecto. Siga los pasos siguientes para completar este paso:

Abra la carpeta del proyecto para este proyecto. La estructura de directorios es la siguiente:

├── index.html
├── css
├── images
└── js
    ├── axios.min.js
    ├── userList.json
    └── vue.js

Entre ellos:

index.html es la página principal.
css es la carpeta de estilos.
images es la carpeta de imágenes.
js/axios.min.js es el archivo de axios.
js/userList.json es el archivo de datos que se necesita solicitar.
js/vue.js es el archivo de Vue 2.x.

Haga clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abra "Web 8080" en la parte superior de la VM y actualícelo manualmente y verá la página.

Descripción de la imagen

Implementar la lectura y representación de datos asincrónicos

En este paso, aprenderás a implementar la funcionalidad de lectura y renderizado de datos asincrónicos.

Abra el archivo index.html en el proyecto proporcionado.
En la opción data de la instancia de Vue, agregue algunos atributos para su posterior uso.

new Vue({
  el: "#app",
  data() {
    return {
      list: [],
      indexUser: "Tom",
      isShow: false,
      isShowRbtn: false,
      isShowUserList: true,
      isShowOtherUser: false,
      isShowIndexUser: true,
      user: "",
      buttonIndex: 2
    };
  }
});

En la instancia new Vue(), agregue el siguiente código en el hook de ciclo de vida mounted() para obtener los datos de usuario de ./js/userList.json utilizando Axios:

new Vue({
  el: "#app",
  data: {
    //...
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      // Use axios to fetch data from the server
      const res = await axios({
        url: "./js/userList.json"
      });
      this.list = res.data;
    }
  }
});

En la ventana de inicio de sesión, actualice el código para mostrar los datos de usuario obtenidos en el desplegable:

<!-- El código original: -->
<!-- <p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p> -->

<!-- El código actualizado: -->
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>

Después de completar este paso, la ventana de inicio de sesión mostrará los datos de usuario obtenidos asincrónicamente de ./js/userList.json.

El efecto es el siguiente:

Efecto de renderizado de datos asincrónicos en la ventana de inicio de sesión

Implementar el cambio entre inicio de sesión y cierre de sesión

En este paso, aprenderás a implementar la funcionalidad de cambio de inicio de sesión y cierre de sesión.

Abra el archivo index.html en el proyecto proporcionado.
En los métodos de la instancia new Vue(), agregue la función login.
En el método login(), agregue el código para cambiar entre las ventanas de inicio de sesión y cierre de sesión:

methods: {
  //...
  login() {
    this.isShow =!this.isShow;
    this.user = this.list.find((item) => item.name == this.indexUser);
  },
},

En la propiedad computed de la instancia new Vue(), agregue la propiedad isShow para controlar la visualización del texto:

computed: {
  loinOrlogout() {
    return this.isShow? "Logout" : "Login";
  }
},
methods: {
  //...
},

En la ventana de inicio de sesión o cierre de sesión, actualice el código para mostrar el contenido adecuado según el estado de inicio de sesión:

<!-- El código original: -->
<!-- <h3>Login</h3>
<p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p>

<a class="login-btn">Login</a> -->

<!-- El código actualizado: -->
<h3>{{loinOrlogout}}</h3>
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>
<a @click="login" class="login-btn">{{loinOrlogout}}</a>

Después de completar este paso, se implementará la funcionalidad de cambio de inicio de sesión y cierre de sesión, y la ventana de participantes solo mostrará la información del usuario actualmente autenticado por defecto.

El efecto es el siguiente:

Efecto después del inicio de sesión

Efecto después del cierre de sesión

Asegurarse de que el usuario autenticado siempre sea el primero en la lista de participantes

En este paso, aprenderás a asegurar de que el usuario autenticado siempre sea el primero en la lista de participantes.

Abra el archivo index.html en el proyecto proporcionado.
En la ventana de Participantes, actualice el código para class="say-list" y class="user-list" para mostrar solo la información del usuario actualmente autenticado por defecto:

<ul class="say-list">
  <li>
    <span class="iconfont icon-microphone"></span>
  </li>
  <li class="line"></li>
  <li>Being spoken to: {{list.find((item) => item.isHost).name}};</li>
</ul>
<ul v-if="isShow" class="user-list">
  <li v-if="isShowIndexUser">
    <img class="header" :src="user.imgPath" />
    <div class="user-name">
      <span v-if="user.isHost" class="iconfont icon-user header-icon"></span>
      <span class="iconfont icon-microphone"></span>
      {{user.name}}
    </div>
  </li>
  <li v-for="item in list" v-if="item.name!=user.name&&isShowOtherUser">
    <img class="header" :src="item.imgPath" />
    <div class="user-name">
      <span
        v-if="item.isHost&&changeBtnActive"
        class="iconfont icon-user header-icon"
      ></span>
      <span class="iconfont icon-microphone"></span>
      {{item.name}}
    </div>
  </li>
</ul>

Después de completar este paso, el usuario autenticado siempre se mostrará como el primer usuario en la lista de participantes.

El efecto es el siguiente:

El primer usuario en la lista de participantes siempre es el usuario autenticado

Implementar el cambio de visibilidad de la ventana del participante

En este paso, aprenderás a implementar la funcionalidad de cambiar la visibilidad de la ventana de participantes.

Abra el archivo index.html en el proyecto proporcionado.
En los métodos de la instancia new Vue(), agregue la función showUserList y la función showRbtn.

methods: {
  showUserList() {
    this.isShowUserList =!this.isShowUserList;
    this.showRbtn();
  },
  showRbtn() {
    this.isShowRbtn =!this.isShowRbtn;
  },
},

En el HTML, actualice el código para agregar el botón para mostrar u ocultar la ventana de participantes:

<!-- El código original: -->
<!-- <button id="show" class="right-btn">
  <span class="iconfont icon-left-arrow"></span>
</button> -->

<!-- El código actualizado: -->
<button
  v-if="isShow&&isShowRbtn"
  @click="showUserList"
  id="show"
  class="right-btn"
>
  <span class="iconfont icon-left-arrow"></span>
</button>

Después de completar este paso, podrás mostrar u ocultar la ventana de participantes haciendo clic en el botón.

El efecto es el siguiente:

Posición del icono del botón para mostrar/ocultar la ventana de participantes

Implementar el cambio del efecto de visualización de la lista de participantes

En este paso, aprenderás a implementar la funcionalidad de cambiar el efecto de visualización de la lista de participantes.

Abra el archivo index.html en el proyecto proporcionado.
En los métodos de la instancia new Vue(), agregue la función changeBtnActive.
En el método changeBtnActive(), agregue el código para manejar el cambio del efecto de visualización de la lista de participantes:

methods: {
  changeBtnActive(userFlag, otherUserFlag, value) {
    this.isShowIndexUser = userFlag;
    this.isShowOtherUser = otherUserFlag;
    this.buttonIndex = value;
  },
},

En el HTML, localice la clase class="user-dialog" y actualice el código para agregar el botón utilizado para alternar el efecto de visualización de la lista de asistentes:

<div v-if="isShowUserList&&isShow" class="user-dialog">
  <ul class="tools">
    <li class="tools-left">
      <button
        @click="changeBtnActive(false,false,1)"
        :class="{'active': buttonIndex==1? true : false}"
      >
        <span class="iconfont icon-close"></span>
      </button>
      <button
        @click="changeBtnActive(true,false,2)"
        :class="{'active': buttonIndex==2? true : false}"
      >
        <span class="iconfont icon-dialog"></span>
      </button>
      <button
        @click="changeBtnActive(true,true,3)"
        :class="{'active': buttonIndex==3? true : false}"
      >
        <span class="iconfont icon-list"></span>
      </button>
    </li>
    <li @click="showUserList" class="tools-right">
      <button class="show-list">
        <span class="iconfont icon-retract"></span>
      </button>
    </li>
  </ul>
  <!-- lista de usuarios -->
  <!-- Omita el código ya mencionado... -->
</div>

Después de completar este paso, podrás cambiar el efecto de visualización de la lista de participantes haciendo clic en los botones correspondientes.

El efecto es el siguiente:

Efecto de mostrar a todos los participantes