diff --git a/articles/2015-02-14-Lets-Have-Fun-With-WebRTC-Part-1.md b/articles/2015-02-14-Lets-Have-Fun-With-WebRTC-Part-1.md index fa9c03b..3cc9989 100644 --- a/articles/2015-02-14-Lets-Have-Fun-With-WebRTC-Part-1.md +++ b/articles/2015-02-14-Lets-Have-Fun-With-WebRTC-Part-1.md @@ -10,6 +10,9 @@ Today we are going to build an audio/video communication app with WebRTC, and th WebRTC is a new technology that allows peer-to-peer (multimedia) communications. It is not intended for browsers in particular, but it is true that the simplest (_read "easiest to use"_) APIs are implemented in Javascript and thus, we will use these. ### What does WebRTC bring to the table, and what can we do with it? + +![WebRTC logo](/images/webRTC_logo.png "WebRTC Logo") + In this world today, all we can hear is about "[The Cloud](http://betabeat.com/2013/03/chrome-extension-replaces-every-instance-of-the-cloud-with-the-far-superior-my-butt/)". While it has some advantages (data is synchronized across all our devices, it is backed up in case of failure, etc) it does have some drawbacks (data is hosted on private companies that can analyze and sell it, these big servers are the target of some criminal attacks, etc). WebRTC is **not** a replacement for the Cloud, it has nothing to do with it, but it brings some interesting features: @@ -30,6 +33,8 @@ Just go grab a bottle of Coke, go buy some candies (_sugar my friend, sugar..._) ## Let's do This: Skype-like Application in Browser! +![](/images/webRTC_peer-to-peer.png "Let's build a peer-to-peer application") + ### A Little Word on the Workflow You can find the code for that article on my [github repo](https://github.com/nschoe/webrtc-fun-part-1). Here is what we are going to need to do to build our application: @@ -651,6 +656,9 @@ And now the methods, you will have to call them to build your application: **Important**: this is quite honestly hidden too deep in the documentation, but I'll say it here: the whole ICE process (gathering candidates, etc) will not begin before you called `setLocalDescription()`. You might spend some awful lot of time trying to debug your WebRTC application with `console.log([insert insulting debugging messages here])` and the answer might just be that: `setLocalDescription()` is not called (at the right time). So keep that in mind. ### Some Code Now, Please + +![](/images/some_code.png "Give me some code!") + Is this the moment? The one? Yes it is! Enjoy! @@ -1214,7 +1222,8 @@ And tada! Now you should have a basic, Skype-like application in your browser. It comes with comparable bitrate and quality (especially since the new WebRTC 1.0 review, where H.264 can be used as a video codec, VP8 was the only one before). The media is truly peer-to-peer, so your media data flow from your computer to your peer's, with no proxy (see the following paragraph on that note). I hope you enjoyed reading the article, and that I was clear enough. I am aware this is a pretty long article, but I did not want to simply give three lines of codes and "voilĂ !". I wanted to give you a sense of what was happening _under the hood_ and **more importantly** I wanted to write down the tricky parts like the fact that you have to add the stream to the `RTCPeerConnection` before calling `set{Local,Remote}Description`, because it is often omitted in the code examples that you might have seen on the web. -[Any feedback is appreciated!](mailto:ns.schoe@gmail.com) +[Any feedback is appreciated!](mailto:ns.schoe@gmail.com) +You can find the whole code for the Skype-like application [here](https://github.com/nschoe/fun-with-WebRTC-part-1/tree/master/2_skype-like). ### What we did In this simple application, we used the most talked about feature of WebRTC: peer-to-peer _media_ communication. We created a simple Skype-like application to transmit video and audio data between two peers. diff --git a/css/default.css b/css/default.css index 87ad428..dcfa806 100644 --- a/css/default.css +++ b/css/default.css @@ -116,7 +116,8 @@ header img { left: 0; top: 57px; height: 3px; - background: rgb(148, 194, 228); + background: rgb(100, 194, 228); + /*background: rgb(148, 194, 228);*/ transition: width 0.5s; } @@ -248,10 +249,11 @@ h4:before { .figure { /*border: 1px solid black;*/ text-align: center; + margin-top: 10px; } .figure img { - box-shadow: 0px 0px 5px 1px rgba(200,200,200,1); + /*box-shadow: 0px 0px 5px 1px rgba(200,200,200,1);*/ } .caption { diff --git a/images/some_code.png b/images/some_code.png new file mode 100644 index 0000000..e13ac19 Binary files /dev/null and b/images/some_code.png differ diff --git a/images/webRTC_logo.png b/images/webRTC_logo.png new file mode 100644 index 0000000..ecf577f Binary files /dev/null and b/images/webRTC_logo.png differ diff --git a/images/webRTC_peer-to-peer.png b/images/webRTC_peer-to-peer.png new file mode 100644 index 0000000..4c0fa13 Binary files /dev/null and b/images/webRTC_peer-to-peer.png differ