Originally, I was going to create an Arduino pollution detector for my Mother, as she is always freaking out about how the pollution is so bad in Hong Kong. However, after some planning, I realized that none of the items would actually arrive on time from Amazon. Because of this, my Mother gave me a new idea, the idea to create a web chat that she could use with her Mother. My Mother and I have discussed what they need and by when they will need the finished product. We have agreed on me making a Peer to Peer Video Chat with a deadline of the 28th of May, 2018.
Here is a list of what the program must have:
- A video chat that would have no distractions.
- The video chat must also have a text chat.
- Simple to use.
- In order to maintain focus, only two people can chat at a time.
But before I could begin coding, I had to make sure to go through the design thinking process in order to make sure that my program would be as well created as can be.
- The first step in the design thinking process is to have empathy for whoever you are working with. At first, I didn’t understand why my mother needed a web chat program, couldn’t she use skype or facebook? But then I realized why she needed a privately built one. It was because she didn’t want to be distracted from actually talking to her Mother instead of browsing through pictures and not really paying any attention.
- This naturally leads to step 2 of the design thinking process. Which is defining the problem. The problem was simple, there are too many distractions while using social media. My Mother wants a simple program to use that would keep her focused. I also asked a bunch of my peers for their opinions on the issue, which they answered in a Google survey.
- The fourth step of the design thinking process is to make a prototype of the program. I did this by creating both pseudocode and a flowchart of the program, both of which can be seen below in Task 2. I also began the programming part of the project, which can be read further upon in the Task 2 section.
- The last step to the design thinking process is to test the program. I can be seen doing this by reading Task 4 and also watching Task 3.
A very important part of the process to developing code is to have a good flowchart and/or pseudo code that can give you a general idea on how to put your ideas into a program. Because of this, I made sure to have both a flow chart and pseudo code to help me out on my development process.
Blog – 22nd of May
Blog – 24th of May
Blog – 26th of May
I made a lot of progress on my work today. I started by installing the “NPM” software which includes “node”. This two software would allow me to create a live website that is updated whenever someone types something into the terminal. In order to get to that, I first had to use terminal and create a directory folder which would have my “.json”, “.js”, and “.html” files. After creating this, I then used the “cd apcsp-project” line to be able to edit the inside of the folder. Then I had to use the “npm init” command to initialize the installation process, which pretty much just creates a “.json” file. Then I used “npm install budo watchify —save-dev” to install those two scripts, which are key in order to create a live website. Finally, run “npm start” which starts the scripts and opens the website with the URL of my computer’s IP address followed by “9966”. I ran into many issues along the way and had to spend a lot of time fixing them. One of the sources I was using to help me was actually pretty outdated, so their code looked completely different from mine. But I still managed to get through. It also turns out I had an outdated version of “node”, so I had to update it because the “budo” script required a version of Node that was newer than mine.
The final product of today’s work looks like this:
Next time I plan on creating the actual code for the video chat. This means that I would be spending most of my time editing the “index.js” file.
Blog – 27th of May
After this, I wrote the code that would allow the other person to paste this code into their text box in order to get their own code.
After writing this, both people would now be connected. In order to meet one of the requirements by my partner, I had to make a text chat. So I did that by writing this line of code, which displays your message on your peers’ laptop.
Finally, I implemented the actual video chat. This was fairly difficult to learn, so I searched GitHub and found some help on a forum where someone also built a peer to peer video chat. After learning how to do it, I wrote the code for it.
For the testing process of my program, I mostly tested it myself during the weekend. Testing pretty much consisted of running the program and seeing if there were any semantical and syntax errors that needed fixing. I found several issues with the code that needed some improvement on. Some of these issues would have prevented me from having a finished project, so I made sure to search online on websites like GitHub to see if anyone else has similar issues.
Some of the issues that I encountered include the following:
- There were issues while developing the code, the first issue is that my “Node” software was outdated. In order to fix this, I had to download and install the latest version of “Node”. – Fixed May 26
Picture of my Node version after updating:
- The Key that was supposed to generate by the recipient wasn’t generating, so I had to restructure the HTML code and found that one of the variables I entered was actually incorrect. – Fixed May 27
Picture of the line I had to fix:
Link to my GitHub: https://github.com/Carlosthemarlos/Peer-to-Peer-Video-Chat/projects/1