︎

Midterm 

https://jm8785.itp.io

About

Multiuser real-time chat application using socket.io, node server.js. The live captured profile photos are updated as the user sends the message.

How it works:

• At the top of the chat application, the live video of yourself shows up.

• During the chat message, the profile picture keeps getting updated by sending the message. The user can check themselves by scrolling up at the top of the webpage where the live video is attached.

• My message: Green/ Client side: Pink
  

Usage

• getUserMedia

• web RTC

• https://itp.nyu.edu/~sve204/liveweb_spring2023/week4.html

Problem

• It crashes when many people tries to log in

• Solution: Don’t put js file as array?

Personal Notes


Emitting data url constantly ︎︎︎
var draw = function () {

To make the video radius circular︎︎︎
.video-circle {
border-radius: 30%;
object-fit: cover;
}

Video circular shape ︎︎︎
<img src="${data.profileImageUrl}" class="video-circle" class=${data.fromid}></img>
<img src="${dataUrl}"class= "video-circle" ></img>


Server.js

• Adding id

• Socket that sent

• Socket Id and data that is sending and broadcasting

socket.on('newImage',function(data){


io. emit

• Sent it to everybody