Cree una aplicación de chat de video con Laravel 7 y Vue.js

-

 

Cree una aplicación de chat de video con Laravel 7 y Vue.js (basada en WebRTC)

Cómo implementar el chat de vídeo

Visión general

Paso 0: instalar la interfaz de usuario de Laravel y los paquetes Vue

laravel nuevo laravel-video-chat
cd laravel-video-chatel compositor requiere laravel/uiphp artesano interfaz de usuario vue --auth
npm instalar && npm ejecutar dev
servicio artesanal php

Paso 1: instalar los paquetes necesarios

npm instalar simple-peer --save-dev 
npm instalar pusher-js --save-dev
el compositor requiere pusher/pusher-php-server

Paso 2: crear una cuenta de empujador

.envPULSADOR _APP_ ID=****** 
PULSADOR _APP_ CLAVE=******************** 
PULSADOR _APP_ SECRETO=************ ******** 
PULSADOR _APP_ CLUSTER=ap3

Paso 3: crear páginas

Definir ruta

// web.phpRuta::grupo(['middleware' => 'autorización'], función(){  Ruta::get('video_chat', 'VideoChatController@index');  Ruta::post('auth/video_chat', 'VideoChatController@auth');});

Crear controlador

php crafty make:controlador VideoChatController
// VideoChatController.php<?phpespacio de nombres App\Http\Controllers;utilice Illuminate\Http\Request; 
usar empujador\empujador;class VideoChatController extiende el controlador 
{ 
    índice de función pública (Solicitud $ solicitud) {        $usuario = $solicitud->usuario(); 
        $otros = \Aplicación\Usuario::where('id', '!=', $usuario->id)->pluck('nombre', 'id'); 
        return view('video_chat.index')->with([ 
            'usuario' => recopilar($solicitud->usuario()->only(['id', 'nombre'])), 
            'otros' => $ otros 
        ]);    } 
    
    public function auth(Solicitud $solicitud) { 
        $usuario = $solicitud->usuario(); 
        $socket_id = $solicitud->socket_id; 
        $nombre_canal = $solicitud->nombre_canal; 
        $pusher = new Pusher( 
            config('broadcasting.connections.pusher.key'), 
            config('broadcasting.connections.pusher.secret'), 
            config('broadcasting.connections.pusher.app_id'), 
            [ 
                'cluster' = > config('broadcasting.connections.pusher.options.cluster'), 
                'encrypted' => true 
            ] 
        ); 
        respuesta de retorno ( 
            $puser->presence_auth($channel_name,
        );    }
}

Crear front-end

// VideoChat.ver<template> 
  <div class="container"> 
    <h1 class="text-center">Laravel Video Chat</h1> 
  </div> 
</template> 
<script></script>
// aplicación.jsVue.component('video-chat', require('./components/VideoChat.vue').default);
// índice.blade.php@extends('diseños.aplicación')@section('contenido')<video-chat :user="{{ $user }}" :others="{{ $others }}" pusher-key="{{ config('broadcasting.connections.pusher.key') }}" pusher- cluster="{{ config('broadcasting.connections.pusher.options.cluster') }}"></video-chat>@endsection

Editar componente de vista

VideoChat.vue<template> 
  <div class="container"> 
    <h1 class="text-center">Laravel Video Chat</h1> 
    <div class="video-container" ref="video-container"> 
      <video class=" video-aquí" ref="video-aquí" reproducción automática></video>   
      <video class="video-allí" ref="video-allí" reproducción automática></video> 
      <div class="text-right" v- for="(name,userId) in others" :key="userId"> 
        <button @click="startVideoChat(userId)" v-text="`Hable con ${name}`"/> 
      </div> 
    < /div> 
  </div> 
</plantilla><script>importar Pusher desde 'pusher-js'; 
importar Peer desde 'simple-peer';export default { 
  props: ['user', 'others', 'pusherKey', 'pusherCluster'], 
  data() { 
    return { 
      channel: null, 
      stream: null, 
      peers: {} 
    } 
  }, 
  mounted() { 
    this. configurarVideoChat(); 
  }, 
  métodos: { 
    startVideoChat(userId) { 
      this.getPeer(userId, true); 
    }, 
    getPeer(ID de usuario, iniciador) {      if(this.peers[userId] === indefinido) { 
        let peer = new Peer({ initiator 
          , 
          stream: this.stream, 
          trickle: false 
        }); 
        peer.on('señal', (datos) => { 
          this.channel.trigger(`client-signal-${userId}`, { 
            userId: this.user.id, 
            data: data 
          }); 
        }) 
        .on ('stream', (stream) => { 
          const videoThere = this.$refs['video-there']; 
          videoThere.srcObject = stream; 
        }) 
        .on('close', () => { 
          const peer = this .peers[userId]; 
          if(peer!== indefinido) {
            peer.destroy(); 
          } 
          eliminar this.peers[userId]; 
        });        this.peers[userId] = compañero; 
      } 
      devuelve this.peers[userId]; 
    },    async setupVideoChat() { 
      // Para mostrar los errores del empujador 
      // Pusher.logToConsole = true;      const stream = espera navigator.mediaDevices.getUserMedia({video: verdadero, audio: verdadero}); 
      const videoHere = this.$refs['video-here']; 
      videoHere.srcObject = corriente; 
      este.flujo = flujo;      empujador constante = this.getPusherInstance(); 
      this.channel = pusher.subscribe('presence-video-chat'); 
      this.channel.bind(`client-signal-${this.user.id}`, (signal) => 
      { 
        const peer = this.getPeer(signal.userId, false); 
        peer.signal(signal.data); 
      }); 
    },    getPusherInstance() { 
      devuelve nuevo Pusher(this.pusherKey, { 
        authEndpoint: '/auth/video_chat', 
        cluster: this.pusherCluster, 
        auth: { 
          headers: { 
            'X-CSRF-Token': document.head.querySelector('meta [nombre="csrf-token"]').content 
          } 
        } 
      }); 
    } 
  } 
}; 
</script><estilo> 
.video-container { 
  ancho: 500px; 
  altura: 380px; 
  margen: 8px automático; 
  borde: 3px sólido #000; 
  posición: relativa; 
  sombra de caja: 1px 1px 1px #9e9e9e; 
}.video-aquí { 
  ancho: 130px; 
  posición: absoluta; 
  izquierda: 10px; 
  abajo: 16px; 
  borde: 1px sólido #000; 
  borde-radio: 2px; 
  índice z: 2; 
}.video-allí { 
  ancho: 100%; 
  altura: 100%; 
  índice z: 1; 
}.text-right { 
  text-align: right; 
} 
</estilo>

Paso 4 —Prueba

Comentarios

Publicar un comentario

Entradas populares de este blog

Filtrando por fecha

-
Cuando realizamos consultas a la base de datos haciendo uso de Eloquent, generalmente hacemos uso de las “Where Clauses” para de manera sencilla obtener información según ciertos parámetros,    por lo que haremos uso de dicha característica del ORM para ejemplificar el post del día de hoy. Ejemplos: Supongamos que desea filtrar las entradas creadas hoy, o cualquier otro día, podemos hacer lo siguiente: He visto gente haciéndolo con consultas sin procesar , como esta: $q->where(DB::raw("DATE(created_at) = '".date('Ymd')."'")); O sin consultas sin procesar por fecha y hora, así: $q->where('created_at', '>=', date('Ymd').' 00:00:00')); Afortunadamente, Laravel Query Builder ofrece una solución más elocuente : $q->whereDate('created_at', '=', date('Ymd')); En lugar de PHP date() puedes usar Carbon : $q->whereDate('created_at', '=', Carbon::today()-...
Leer más

10 videojuegos gratis para aprender JavaScript en línea

-
Imagen
  JavaScript es un lenguaje de programación de alto nivel que se utiliza principalmente para agregar funcionalidades interactivas a las páginas web. Es uno de los lenguajes de programación más populares y ampliamente utilizados en la actualidad, y se ejecuta en el lado del cliente (es decir, en el navegador web del usuario). JavaScript se utiliza para crear efectos dinámicos en las páginas web, como animaciones, formularios interactivos, menús desplegables, y mucho más. Además, también se puede utilizar para crear aplicaciones web completas y para trabajar con bases de datos y servidores web. En resumen, JavaScript es un lenguaje de programación esencial para cualquier desarrollador web que desee crear sitios y aplicaciones interactivas y dinámicas. Es posible aprender JavaScript jugando videojuegos. Existen muchos juegos educativos y plataformas de aprendizaje en línea que utilizan el lenguaje JavaScript para enseñar programación de manera divertida e interactiva. Estos juegos sue...
Leer más

reloj obs---datetime.lua

-
Imagen
  Como agregar un reloj a obs Como colocamos un reloj en obs. Primero descargamos el script datetime.lua del siguiente link:: https://obsproject.com/forum/resources/datetime-digital-clock.882/ Lo situamos en la carpeta de script de obs, la cual se encuentra en la siguiente ruta C:\Program Files\obs-studio\data\obs-plugins\frontend-tools\scripts   Lo siguiente es quitar la extencion .txt y dejar solo la lua en el script. Después de ello ingresamos a obs, creamos una etiqueta texto y la enlazamos con el escript. Para ello vamos a herramientas, script. Seleccionamos el script que descargamos y lo enlazamos con la etiqueta que creamos. Fin. 1-Agregamos una etiqueta texto y la llamamos reloj:: 1-1 1-2 1-3 2-Descargamos el scripts datetime.lua 2-1 2-2 :El script se descargara con la extensión txt la cual debemos eliminar para que solo que de la extensión .lua 2-3 :El script se descargara con la extensión txt la cual debemos eliminar para que solo que de la extensión .lua 2-4::Si tu...
Leer más