Maybe I have been working in the communications industry too long, but much of the usual telephone experience seems ridiculously antiquated to me. Using a string of digits as a user address? Anyone can call you for any reason they want whether I know them and want to speak to them or not? Of all of the telephony systems daily nuisances, I find conference calls to be the worst! The process of looking up a random string of digits to dial into a bridge, listen to the same repetitive prompts, and then needing to look up and enter another random string of digits drives me insane every time.
Fix: correctly display zoom in accelerator on mac (backport: 4-0-x). Fix: don't append Shift modifier text twice to accelerators (backport: 4-0-x). Fix: update node for patch that allows native modules built on node 10. #13330; [SECURITY] Added temporal index bounds check for WebRTC.
I would prefer to just provide a user-friendly URL, like the chadwallacehart.com I own and to make my phone service available when I choose. Also, a video option would be nice – sometimes.
I like to do video calls with my parents so they can see my kids which means negotiating which video telephony service we will use first, usually via text message, based on who happens to be sitting in front of what device. Allowing multi-party video would be even better so I can let my kids have one camera to show off in the background and I can call in with another to have a real conversation. There are many solutions out there for the problems above, but none of them allow me to “own” the solution and change it to fit my needs. Fortunately I know something about WebRTC and have rudimentary programming skills, so I set out to make my own phone service during the holiday break. As I have mentioned in past posts, I do not get paid to code for a living and I do not ever plan to. Please treat my step-by-step (and sometimes step-by-misstep) log and commentary below as a rough guide as opposed to an exact instruction set to follow. If you just want to look at or copy the code, you can skip all this and just go to the ChadWallaceHart.com Github page.
Pick a Signaling Server I have limited skills in and I knew I did not want to code everything myself, so first I looked did some investigation of what server tools I wanted to use. If I had more confidence then I probably should have started with the design step I highlight below and then picked the right tool for my needs.
There were 14 vendors in the as illustrated below and a bunch more that I should probably add to this list. Var rtc = easyrtc.
Listen ( httpApp, socketServer ); server.js quick start from EasyRTC The only trick I recommend for Windows users using WebMatrix is to run node directly from a command prompt instead of using WebMatrix’s built in hooks to (IIS) which is installed with WebMatrix. IIS did not seem to like port 8080 on my machine and it was faster to run dependently than mess with IIS. Also, my Windows setup is strictly for development – I will deploy on Ubuntu.
Basic node.js Setup Now that demonstrated that the WebRTC part would be straight forward to copy from the EasyRTC demos, I decided to frame out the rest of the logic in node.js. I made a brief attempt to use to help dynamically serve the pages I would need, but after spending some time I on it I concluded this was not worth the effort for the initial prototype. Here is how my basic setup looked- My main server.js file. It took me several iterations to get to this point.
I am not a real web programmer, so the hardest part for me was figuring out how to use AJAX to correctly pass a JSON object to from login.html/ logout.html to the server and handling a response message. The rest was thinking through and validating my authentication logic.
Adding in WebRTC The WebRTC part was easy after I figured out how to properly serve static files with node. First I had to add the other required modules – I installed from NPM and add the the following to the initial module section. Var easyrtc = require ( 'easyrtc' ); // EasyRTC external module I struggled the most figuring out how to serving all the files associated with my static files. I did not want to make all my my content statically available. First I copied the demo files and the associated css, images, and js directories into a new easyrtc folder off the base of my project directory. Then I used node to serve my html files but kept the other files publicly accessible. The most important part here was using the app.use command to tell node to substitute any /js, /image, and /css references with the easyrtc sub-directories I copied.
Var webServer = app. Listen ( process. Port 80 ); //process.env.port assigned by WebMatrix I also changed my password in server.js. Deployment I had an existing Amazon Web Services (AWS) EC2 instance setup already from a past project, so I decided to reuse this. The steps to set this up are relatively straight forward:. Setup an account. If you do not have an AWS account, (see below) has documentation on this.
Setup an Ubuntu instance. Go to the AWS market place to get a preconfigured Ubuntu instance with node.js already installed. I used from bitnami – the software is free but you may have to pay for the EC2 instance. When I first signed up I got a Standard Micro instance trial for free for a year. My 1 year trial expired so now my total costs for running an EC2 micro instance are now a little more than $15/month if I keep it up all the time.
Get remote access to your instance. I did this a long time ago and did not take great notes, but bitnami has documentation on this too. I used putty for terminal access and WinSCP to transfer files. Copy your files over. I stuck mine in /srv/www which was the default Apache/tomcat folder. Lauch node.js – if you follow my setup above, navigate to the /srv/www from your terminal window and typing node server.js. When I first did this I got a EAADDRINUSE error.
This is because bitnami has the instance setup to run node behind Apache. There is a bunch of configuration you can do to make this work, but I found it easiest to just turn off Apache since I do not need any of its features at this point.
To do this just type this first. @ reboot / usr / bin / sudo / srv / www / nodemodules / forever / bin / forever start / www / srv / server. Js I did a reboot and everything restarted fine.
I tried it across several of my devices on my LAN and over LTE with no problems. That night instead of asking my parents if they wanted to talk over Facetime or Skype, I told them to use Firefox (they think Google is spying on them and won’t use Chrome) to visit. I went to logged in.
They called in and the session started. Despite my repeated attempts to explain some of the things going on in my industry, they were extremely impressed to that I somehow “created my own Skype”. It is good to see there are some WebRTC fans outside of the communications industry:). I did some further stress tests by adding more streams into the mix with variable results (for future posts). This was a great prototype that solved my video calling pain point, but it is far from production ready. Here are a few things I need to work on: A Proper Homepage A couple of days later I managed to figure out Jade enough to piece together a basic homepage that shows my availability.
Basic homepage with call availability buttons Audio Calling I could easily plug-in one of EasyRTC’s demos for an audio-only option here but I think I would like to setup my own audio calling interface myself for a future project. Security & Authentication Security was not a major consideration in my setup since I am not working with any sensitive user information. My main concern is having someone run-up my AWS bill without my knowledge.
I do have frequent alerts setup on my AWS account to see if anything unusual is happening. There are several minimal things that I should improve since I am sending my passwords in clear text. Getting a TLS certificate and using and would be better. Saving a hashed version of the password on the sever instead of having it stored in server.js would also be nice. Using OAuth to or OpenID check credentials against one of my other accounts could also be interesting. I am sure there are other things I should be worried about too. In reading through this prior to posting I wish I spent more time on these security aspects.
We will see how often I actually keep the instance running until I address some of the security implications. Other ideas. Alerting – this is setup assumes I will patiently wait for someone to join my conference at a designated time. In reality I am not likely to wait too long – some kind of audio or visual alert when someone arrives would be nice to implement too. Caching login information – it would be nice to save this in a cookie.
Hang-up when I leave – right now the bridge stays open when I leave. There might be times I want it to stop for everyone after I leave. Browser identification – it would be nice to tell my visitors they have to use a WebRTC supporting browser or find another way to reach me. Native mobile app support – that was actually my original plan for this post, that that is another story I am sure I will think of more as I use this more often. Show Me the Code You can find my latest source and changes on Github.
Please let me know your comments and suggestions. Final Thoughts This was definitely not the quickest way to build a WebRTC conference room. If I had an existing website and wanted to add a basic WebRTC-based conference room to it, it would have been better to do this with plug-ins or embedded iframes. That would have been a pretty boring post though (for those of you who actually made it this far at least). Also, I realized I did not write one single line of code that looked anything like getUserMedia or createPeerConnection during this entire project (not yet at least). For most developers that may actually be a good sign. This project certainly demonstrates the relative ease (or lack of skills required) in which WebRTC can be added to a website, thanks to third party libraries and frameworks like EasyRTC that are built on top of the.
I look forward to talking to you, on my terms, using. Want to keep up on our latest posts? Please click to subscribe to our mailing list if you have not already. We only email post updates.
You can also follow us on twitter at for blog updates. I have not looked at this code in a while (I have an update on this on my to do list). It sounds like you may be having problems when calling “easyrtcServer = easyrtc.listen(app, socketServer);” for the second time.
I would run the client in a debugger to verify where this is happening and check to see what it says on the server side. I would also recommend going to EasyRTC’s message board to see if they have anything to say about it – something may have changed on their end in the last 14 months since I wrote this.