Week 6: Midterm

screenshot-2016-10-18-10-47-40 screenshot-2016-10-18-10-51-24 screenshot-2016-10-18-10-18-46

My Live Web Midterm took me on quite on journey. I had a vision that I wanted to create a chat where you can’t see yourself except when you send a message.

Where this idea stemmed from:

When I video chat with people I typically use FaceTime. I have noticed that when I am chatting, the majority of the time, I am just looking at myself. This tends to be a bit distracting as I’m paying more attention to how I look when I speak instead of listening and speakingĀ in a meaningful way. Conversely, when I am not paying attention to how I look and am more engaged in the conversation, I occasionally notice how incredibly silly I look when I am active listening.

Basic concept:

The default interface will be very plain and the user will be prompted to send a message. When a message is sent a picture is taken and displayed on the screen with the text message.

My first task was to get the general video chat working. It took some time, but I was able to get the chat to work with multiple users. I also used Bootstrap to help with the styling, and ideally put the videos in a grid to be nicely displayed on the screen.

Test with 1 chatter:

screen-shot-2016-10-11-at-4-14-10-pm

screen-shot-2016-10-11-at-4-41-10-pm

Test with multiple users:

I sent out texts to a bunch of people both in the States and outside. I just said if you are on a computer, please go to this URL. And with that we had a little chat working.

screen-shot-2016-10-11-at-9-45-05-pm

screen-shot-2016-10-11-at-9-45-55-pm

What I would want to improve is the placement of the messages coming in and where the videos go.

I put this to the side and then started to work on my other idea. I got everything set up but then starting running into problems.

screenshot-2016-10-17-00-08-38

screenshot-2016-10-16-17-02-53

I asked one of my friends who is backend developer to look at my code and see what the issue is. And alas! It was that I was missing the Image and Text HTML tags. Now it’s at a point where it’s taking awkward photos, below is showing one of the first while I was testing.

screenshot-2016-10-17-00-17-35

screenshot-2016-10-18-02-06-46

screenshot-2016-10-18-09-20-01

screenshot-2016-10-18-09-23-58

screenshot-2016-10-18-09-25-06

screenshot-2016-10-18-09-26-45

screenshot-2016-10-18-09-28-23

screenshot-2016-10-18-09-52-06