[live web week8] recreating an older socket project with webrtc

Screenshot 2016-03-30 10.06.00

Screenshot 2016-03-30 10.06.07

(URL here.)

This week, I simply recreated the chatroom I made a few weeks back using peer.js instead of socket.io. The difference now is that you have to call the other person/people, but otherwise it works in the same way. Much more simple, but maybe less interesting?

https://gist.github.com/nicolehe/914464b275e963205fc9e278a5da574e.js

[live web week 6] midterm: swap chat

Screenshot 2016-03-09 10.26.21

Try Swap Chat here.

For my midterm, I made a chat room that takes a picture of somebody else in the room whenever you submit a message. I built it off of the Face Chat from the other week.

One of the first things I added was a thing to tell you how many other people are currently in the room. I kept track of the client count in a variable in the server-side code, and added to it every time a new person joined the room. Once they disconnected, I removed a number, and I sent this updating number over to the client-side, which shows it on the page.

In order to take a picture of a different person in the room, I made an array of all the clients’ socket IDs, and added someone’s ID once they joined, and then removed them once they left.

I knew I had to pick a random ID from the ID array in order to take a picture of that person, but I didn’t want the user getting themselves, so I made another array called notMe[] of all the IDs in the room except for the user’s own ID on the client side. Then sending a message looked like this:

function sendmessage(message, randoPicked) {
//pick a random person each time
randoPicked = notMe[Math.floor(Math.random() * notMe.length)];
socket.emit(‘chatmessage’, message, randoPicked);
}

From there, I executed the picture-taking code, and added that photo to the text that the original user sent.

There were a couple other extra things I added in order to make the chat experience a little better, like the floating text box, and the auto-scrolling to the bottom of the page once new data is added.

There are still a lot of CSS related things I’d want to change so that it looks better, but getting all my divs lined up properly is a task beyond me right now. I also want to add something that prevents people who don’t allow a camera on the page to not be able to access the content.

Screenshot 2016-03-08 21.07.34

I’ve only tested it myself with two cameras, so we’ll see what happens once more users try it……

See Swap Chat here.
https://gist.github.com/nicolehe/7e1851098f751d7a1609.js

[live web week 4] face chat

Screenshot 2016-02-24 00.04.24

(The url for this project is here. If I’ve turned off the server, it won’t be currently running.)

Building off of the chatroom I made the other week, I added a feature that takes a picture from your webcam once you submit your message, and posts them together. It was tricky to get it up and running, and I had a lot of problems managing divs, but it looks like it generally works.

 

Screenshot 2016-02-24 00.46.49

Sometimes the images don’t post, and I’m not entirely sure why. Also the formatting of the whole thing leaves a lot to be desired. But I’m glad I managed to get it to generally do what I wanted it to. I’m interested in bringing this one a little further…hopefully I can continue working on this.

https://gist.github.com/nicolehe/903d1e619206ed6a9858.js