Added pictures to WebRTC article

master
Nicolas Schoemaeker (nschoe) 11 years ago
parent b73b59ebe9
commit f9709d0825

@ -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. 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? ### 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). 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: 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! ## 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 ### 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). 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: 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. **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 ### Some Code Now, Please
![](/images/some_code.png "Give me some code!")
Is this the moment? The one? Is this the moment? The one?
Yes it is! Enjoy! 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). 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. 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 ### 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. 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.

@ -116,7 +116,8 @@ header img {
left: 0; left: 0;
top: 57px; top: 57px;
height: 3px; height: 3px;
background: rgb(148, 194, 228); background: rgb(100, 194, 228);
/*background: rgb(148, 194, 228);*/
transition: width 0.5s; transition: width 0.5s;
} }
@ -248,10 +249,11 @@ h4:before {
.figure { .figure {
/*border: 1px solid black;*/ /*border: 1px solid black;*/
text-align: center; text-align: center;
margin-top: 10px;
} }
.figure img { .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 { .caption {

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Loading…
Cancel
Save