Project

General

Profile

Feature #7558

WebRTC into global chat

Added by Yannick Warnier over 4 years ago. Updated almost 4 years ago.

Status:
Feature implemented
Priority:
Low
Assignee:
Category:
Chat
Target version:
Start date:
27/02/2015
Due date:
% Done:

100%

Estimated time:
Spent time:
Complexity:
Normal
SCRUM pts - complexity:
?

Description

In Firefox and Chrome, enable a video and audio icon in the global chat (bottom-right of screen) to start a video/audio conversation.

WebRTC requires a "link" to start a video conference, so when a user wants to start a videoconference, somehow it has to pass as a link to the person who is called and "ring" (without sound) for about 30 seconds. If the other user doesn't accept, the call is closed.

The global chat code is divided between main/inc/lib/javascript/chat/js/chat.js and main/inc/ajax/chat.ajax.php.

At the moment, the chat history is maintained in the TABLE_MAIN_CHAT table ("chat"):

CREATE TABLE IF NOT EXISTS chat (
    id            INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
    from_user    INTEGER,
    to_user        INTEGER,
    message        TEXT NOT NULL,
    sent        DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00',
    recd        INTEGER UNSIGNED NOT NULL DEFAULT 0,
    PRIMARY KEY (id)
);

This doesn't really allow us to send a special message to start a webrtc chat, but I suppose we could send a message with a "webrtc://" header or something like that and have it recognized on the other side, so we don't have to modify the database at all.

WebRTC libraries exist at different locations, including:

Files

chamilo-wertc.png (612 KB) chamilo-wertc.png Alex Aragon, 30/06/2015 23:56
chamilo-template-video.svg (7.59 MB) chamilo-template-video.svg Alex Aragon, 01/07/2015 00:01
web-rtc.png (635 KB) web-rtc.png Alex Aragon, 01/07/2015 00:27
whoisonline.png (365 KB) whoisonline.png Alex Aragon, 06/08/2015 20:21

Associated revisions

Revision 5363cee7 (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Vendor - Add SimpleRTC - refs #7558

Revision 7fb57d42 (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Fix chat CSS - refs #7558

Revision 1c9bfc4e (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Integrate WebRTC in chat - refs #7558

Revision 4cc15731 (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Update database install scripts - refs #7558

Revision ae5cbc6f (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Send message with video chat link - refs #7558

Revision 53e7a67d (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Use lang variable - refs #7558

Revision 34f622d8 (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Add migration down - refs #7558

Revision 63eb068c (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Rename video chat table - refs #7558

Revision 5598d5df (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Use unsigned integers - refs #7558

Revision 0eb9ff99 (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Check WebRTC support - refs #7558

Revision 894e7242 (diff)
Added by Angel Fernando Quiroz Campos over 4 years ago

Avoid database.sql changes - refs #7558

Revision 7034706d
Added by Yannick Warnier over 4 years ago

Merge pull request #698 from AngelFQC/7558

Integrate WebRTC in global chat - refs #7558

Revision f2a03393 (diff)
Added by Angel Fernando Quiroz Campos about 4 years ago

Add method to get a HTML code for a icon by Font Awesome - refs #7558

Revision 3e267d5e (diff)
Added by Angel Fernando Quiroz Campos about 4 years ago

Fix and improve WebRTC video chat - refs #7558

Revision bfb46c21 (diff)
Added by Angel Fernando Quiroz Campos about 4 years ago

Minor - Update language files - refs #7558

Revision 28399477 (diff)
Added by Angel Fernando Quiroz Campos about 4 years ago

Don't show icon to start WebRTC video chat when user is offline - refs #7558

Revision 1707e8a1 (diff)
Added by Angel Fernando Quiroz Campos about 4 years ago

Don't show icon con the user himself - refs #7558

Revision 8b091eeb (diff)
Added by Angel Fernando Quiroz Campos about 4 years ago

Fix showing the link to start video chat on own chat history - refs #7558

Revision 56fe742e (diff)
Added by Angel Fernando Quiroz Campos about 4 years ago

Avoid multiples remote video elements - refs #7558

Revision 84676674 (diff)
Added by Angel Fernando Quiroz Campos about 4 years ago

Fix show friend avatar on history - refs #7558

Revision bd489096 (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Redirect user to video chat room when he/she created the video chat - refs #7558

Revision de25e997 (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Fix video element's background in video chat - refs #7558

Revision 87738089 (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Fix show user avatar on chat window - refs #7558

Revision d28facfc (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Auto-create video chat room - refs #7558

Revision f28384fb (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Minor - Update language files - refs #7558

Revision 06485602 (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Enter to video chat by its ID instead of by name - refs #7558

Revision 43978f8c (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Show alert for video call end - refs #7558

Revision 53f3671c (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Fix join video chat room with name - refs #7558

Revision fa9b35e8 (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Show messages for status from video chat connection - refs #7558

Revision 9efa3153 (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Minor - Format code - refs #7558

Revision d1a532ff (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Minor - Update language files - refs #7558

Revision 14b03606 (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Fix lang variable - refs #7558

Revision 2dc81490 (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Change location for videos on WebRTC Video chat - refs #7558

Revision e0e75b05 (diff)
Added by Angel Fernando Quiroz Campos almost 4 years ago

Fix user friends block - refs #7558

History

#1

Updated by Yannick Warnier over 4 years ago

  • Status changed from New to Assigned
  • Assignee set to Angel Quiroz
#2

Updated by Angel Quiroz over 4 years ago

  • % Done changed from 0 to 20

Integrate SimpleWebRTC library http://simplewebrtc.com/ in Chamilo Chat for tets

#3

Updated by Angel Quiroz over 4 years ago

  • % Done changed from 20 to 80

The basis of chat with WebRTC works (between two users)

https://github.com/chamilo/chamilo-lms/compare/chamilo:1.10.x...AngelFQC:7558

#4

Updated by Angel Quiroz over 4 years ago

Rename video_chat table to chat_video
Use unsigned integeres

Updated branch

#5

Updated by Angel Quiroz over 4 years ago

  • Status changed from Assigned to Needs testing
  • Assignee deleted (Angel Quiroz)
  • % Done changed from 80 to 100
#6

Updated by Yannick Warnier about 4 years ago

  • Status changed from Needs testing to Assigned
  • Assignee set to Angel Quiroz
  • % Done changed from 100 to 80

Missing a few adjustments to language variables usage in PHP code (see comments on commit)

#7

Updated by Alex Aragon about 4 years ago

Adjunto diseño para esta interfaz de usuario

#8

Updated by Alex Aragon about 4 years ago

Adjunto svg para muestra

#9

Updated by Alex Aragon about 4 years ago

nuevos cambios.

#10

Updated by Yannick Warnier about 4 years ago

  • Assignee changed from Angel Quiroz to Alex Aragon

Adelante con la implementación, Alex.

#11

Updated by Alex Aragon about 4 years ago

Eso va con un pequeño arreglo al whoisonline.

#12

Updated by Alex Aragon about 4 years ago

Envie los cambios del webRTC

https://github.com/chamilo/chamilo-lms/pull/795

Observaciones: Cuando el usuario no coloca camara deberia salir el avatar del usuario en el centro del div para que no quede vacio.
Agrege la lista de usuarios para el chat

Existe un error de carga de imagen del avatar al abrir una conversacion entre dos usuarios conectados.

#13

Updated by Alex Aragon about 4 years ago

  • Assignee changed from Alex Aragon to Angel Quiroz
#14

Updated by Yannick Warnier about 4 years ago

Angel, porfa, alguna noticia sobre esto?

#15

Updated by Angel Quiroz about 4 years ago

  • Assignee changed from Angel Quiroz to Alex Aragon
  • % Done changed from 80 to 90

He corregido algunas cosas respecto al video con WebRTC y el chat global.

Asigno a Alex para que agregue una imagen de fondo a los elementos video para que en caso no se comparta el vídeo (sólo audio) por los usuarios, no aparezaca en blanco el recuadro

#16

Updated by Yannick Warnier about 4 years ago

  • Assignee changed from Alex Aragon to Angel Quiroz

Todavía hay demasiado pasos antes de lanzar el video chat. Es necesario poner un nombre de conferencia? Es necesario, luego de poner el nombre, dar clic en un enlace para iniciarlo? Son muchos pasos solo para ver alguien en vídeo.

Todavía tengo un icono de imagen roto cuando el otro usuario no tiene foto (y mi gravatar siquiera está prendido).

#17

Updated by Angel Quiroz almost 4 years ago

Todavía hay demasiado pasos antes de lanzar el video chat. Es necesario poner un nombre de conferencia? Es necesario, luego de poner el nombre, dar clic en un enlace para iniciarlo? Son muchos pasos solo para ver alguien en vídeo.

El nombre de la conferencia sí es necesario, para webrtc. He quitado el paso de hacer click luego de ingresar el nombre de la conferencia. El ingreso del nombre se hace sólo una vez para el chat entre las mismas personas. Para las siguientes veces, sólo aparece el modal con el enlace para iniciar el video chat.

bd48909
de25e99

#18

Updated by Angel Quiroz almost 4 years ago

  • Status changed from Assigned to Needs testing
  • Assignee deleted (Angel Quiroz)

Todavía tengo un icono de imagen roto cuando el otro usuario no tiene foto (y mi gravatar siquiera está prendido).

Corregido. Faltaba asignar la ruta de la imagen en $_SESSION
8773808

#19

Updated by Yannick Warnier almost 4 years ago

  • Status changed from Needs testing to Assigned
  • Assignee set to Angel Quiroz
  • % Done changed from 90 to 80
Luego de una revisión, se necesita:
  • generar automáticamente un nombre de sala (username1_username2) para no pedir nada al usuario la primera vez
  • poner un mensaje de bajo del flujo vídeo para indicar que salir de esta pantalla cortaría la sesión de conferencia
    • $AvoidChangingPageAsThisWillCutConference = "Avoid changing page as this will cut your current conference session";
  • añadir un mensaje cuando se congela la imagen
    • $ConferenceSignalHasBeenLost = "Conference signal has been lost";
#20

Updated by Angel Quiroz almost 4 years ago

  • Status changed from Assigned to Needs testing
  • Assignee deleted (Angel Quiroz)

El nombre ahora se genera en base a los nombres de los usuarios.
Se agregó un alerta con el mensaje "Avoid changing page as this will cut your current conference session".
Se modificó el código JS para manejar los estados de la conexión
También se muestra una alerta al intentar de cerrar la ventana/pestaña cuando se ha iniciado una videollamada

Commits:
0648560
43978f8
53f3671
4c9a8d4
fa9b35e
9efa315
d1a532f
14b0360

#21

Updated by Yannick Warnier almost 4 years ago

  • Status changed from Needs testing to Feature implemented
  • Assignee set to Angel Quiroz
  • % Done changed from 80 to 100

I checked the latest developments and I'm really fine with what I see.
On disconnection of the other user, a message in the left panel indicates the connection was closed.

One last thing I think should be there is that the video of the other person should appear on top when viewed through a mobile device. At the moment, it appears at the bottom and requires a lot of scrolling to get there, but we'll look at that in a future version.

Good job!

#22

Updated by Angel Quiroz almost 4 years ago

Modified. the left panel becomes right and the rigth becomes left to show the remote video on top.
2dc8149

Also available in: Atom PDF