IDO GREEN: So hello, and welcome to another episode of
GDL-IL, Google Developers Live Israel.
Today, I'm quite happy and very pleased to have my
colleague with me, Sam Dutton from London.
SAM DUTTON: Thank you so much.
Thanks for inviting me.
It's my first time at an Israel GDL,
so great to be here.
IDO GREEN: No, thank you, and hopefully in the near future,
we'll be able to do it face to face here in
campus Tel Aviv, right?
SAM DUTTON: Fantastic.
Looking forward.
IDO GREEN: Excellent.
So today, we're going to cover some of the new, cool things
that we have in WebRTC.
Maybe the best thing would be if I could
just share the slides.
We'll have the links for the slides and all the other good
stuff that we're going to share with you later on in the
footnotes of the GDL page on Google Developer Live, and of
course, I'll have it on my blog, and Sam definitely will
have it on his blog and on his G+ page, and you have the
links to both of them in the event itself.
So feel free to go there.
So today, we're going to speak about WebRTC, and Sam will be
able to share with us some of the new, cool demos that are
just showing the power of this cool API.
Maybe the best thing would be if, Sam, you could take over
and just go through these slides and some of the great
links that we have here.
SAM DUTTON: Absolutely.
So we've got this new set of technologies called WebRTC,
and what that gives us is real-time communication built
into the browser.
So this is for obvious applications.
We can think of things like video chat, exchange of data,
low latency between games, stuff like file
sharing, even telephony.
Now, the point about WebRTC where it's been implemented is
that it's peer to peer.
So the communication is happening between the
browsers, between what's called peers.
So if we think of technologies like web sockets, which are
really, really fast, but they're going via an
intermediary server, and with WebRTC, it's
directly between the peers.
WebRTC has been built as a free and open-source project,
doesn't need any plug-ins, and like I say, it's standardized
and it's free.
It's free for developers to use, and all the technologies
are free for the end users as well.
If we start, I guess, with the most important API in this,
we've got something called getUserMedia, also known as
media stream.
Now, the WebRTC APIs have been implemented now in Chrome, on
desktop, and on Android, and in Firefox, and we're told
coming to Opera on mobile and on desktop.
So that's great news.
This simpl.info/gUM, and you can see there that it's asking
me permission box up at the top there if I can let it use
the camera.
So here we are.
We're using the camera and we're getting [INAUDIBLE]
a video element.
You can see the code is pretty simple there.
What's that?
20 lines of code to cover cross-browser as well.
The stream variable there, that shows what the stream is
coming from the video, and you can see [INAUDIBLE] elements,
and then [INAUDIBLE]
the video tracks for that.
[INAUDIBLE] that we have one video track.
This represents the stuff coming from the camera.
And you can see there the name and the label, and so on.
So a really useful API on its own, kind of fun, but people
are doing cool things with this.
And when these APIs come up against each other, we see
these amazing things.
So I love this ASCII camera example.
What's happening here, it's actually really simple code.
What we're doing is we're getting the video stream from
the camera, and we're putting that onto a canvas element,
pretty straightforward, and then analyzing each of the
pixels of the canvas element and turning that into ASCII.
Really, if you look at the code there, it's pretty
minimal stuff.
So again, this richness where we're getting one API
[INAUDIBLE].
And you can have a look at Webcam Toy, which does the
same using Web-GL, and AudoRecorder here.
What we're doing is we're using getUserMedia as the
input to web audio.
You allow that, you can see I'm getting some visualization
there happening with the canvas element again.
And I can actually download this content using
what we call a JS.
And if I open up that file, you can see it there in VLC,
and I can play that back just there.
So again, one API coming up against another in really
interesting ways.
Speaking of this, actually, you might be interested to
check out MediaRecorder.
I've linked to the API there.
This has been implemented in Firefox Nightly, and it's
coming soon.
We've got an intent to implement in
Chrome, which is great.
So that's going to be the ability to record audio and
video files.
And again, some links to some API stuff there.
Now, to do something more powerful, the core of WebRTC,
we've got this API, RTCPeerConnection, and this is
the API for peer to peer communication.
So the obvious stuff for this is the ability to do stuff
like video chat, but it also gets used by the API called
RTCDataChannel.
[INAUDIBLE]
swap these over.
We'll fix these up anyway.
So what this allows us to do is video
chat between browsers.
We've got a link to an application there.
What I'd really recommend if you want to get your head
around RTCPeerConnection is to have a go at the Codelab there
on Bitbucket.
Really straightforward stuff.
And we will fix up the labels on these pages,
which are back to front.
Now, there is also a part of RTCPeerConnection, which is
RTCDataChannel.
This is the API for arbitrary data
communication between peers.
And some examples here.
Let's have a look at [INAUDIBLE].
This is using the API for file sharing.
Let's select a file here.
So this is a photograph of a local pub, and we're using the
RTCDataChannel API to share this.
Now, if I open this in a new [INAUDIBLE]
on a new machine, but you can see that I've actually
downloaded that sharing peer to peer.
And if I open it up, I should be able to see--
maybe not.
OK, not with this.
Anyway, I've downloaded the file here.
This is a great way to do file sharing.
Let me go back.
I'll just show you another link there to a
project called PeerCDN.
Now, this is really interesting.
This is the idea of sharing content using RTCDataChannel
to enable content distribution peer to peer.
So it's something really radical.
We'll see how the future pans out, but this could be a
completely different way of sharing content on the
internet, maybe the peer to peer dream come true.
I would also strongly recommend you take a look at
the wonderful Cube Slam game there.
You can play with friends via WebRTC or with a bear.
So just to keep going, some more great stuff coming into
media on the web.
We have a JavaScript API called Encrypted Media.
This is an extension to HTML Media Elements.
It gives us the ability to deal with encrypted media on
the web, so simple cases like, say, maybe corporate
presentations where we're just sharing a password to more
complex applications where we're using a plug-in, what's
called content decryption module, for stuff like Netflix
and so on where we have a more complex schedule
set up and so on.
So a way for content distributors to use the web
with encrypted media extensions.
Now, this has been implemented using something called Media
Source Extensions.
Media Source Extensions are a way of chunking out bits of
video, other content potentially, and then playing
them back using a JavaScript interface.
Kind of simple [INAUDIBLE]
if you follow the link, kind of doesn't do much.
But what we're seeing here is the ability to get chunks of
[INAUDIBLE] and then play them back using the Media Source
Extensions [INAUDIBLE].
That works, but what makes it really powerful is the ability
to use this, stuff like what's called DASH, MPEG-DASH, to do
adaptive streaming.
That means that depending on the bandwidth conditions and
so on, we can change the actual quality, the resolution
of the video that's being downloaded in real time.
So very, very useful in this modern world where we've got--
I heard that Cisco is estimating something like 80%
to 90% of web traffic will be video within
the next three years.
YouTube, we've already got something like 100 hours of
video uploaded each minute, six billion views a
month, and so on.
And in that context, stuff like adaptive streaming with
MSE is going to be really, really important.
But also, the use of really good codecs.
Google is working on a codec called VP9, which is source
and royalty free video standards.
As we look at the [INAUDIBLE] here, this is showing VP9 in
comparison with H.264, and you can see it's comparing very
favorably there with the existing technology.
[INAUDIBLE]
There's nothing we can compare with [INAUDIBLE].
Let's go out of full screen.
IDO GREEN: So maybe you could repeat the last sentence,
because I think we couldn't hear it well.
SAM DUTTON: Sorry, yeah.
So the demo there, people might think that's an unfair
comparison because it's not comparing with H.265, the next
version following on from H.264, also known as HEVC,
confusingly.
We don't have a playback mechanism for that, that can
compare with in that way.
But really to show that VP9 is comparing very favorably,
certainly with existing encoding technology there.
And there's a stack of several more links if you'd like to
find out more about VP9.
You know, think about coping is this coming world where we
have HD on the rise, we have broadcasters moving to IPTV,
in other words, broadcast over the internet.
And I saw some figures the other day for the BBC here in
the UK, TV viewing, broadcasting, is still pretty
much all-- it's like all still on televisions.
It's something like 1%, I think, 2% maybe of people here
are watching TV on the internet.
So there's a huge opportunity there.
There's going to be a huge shift in the way people view
TV, so we really--
IDO GREEN: Absolutely, absolutely.
I agree.
And I think there was a very interesting blog post that
showed the stats of Netflix in the US--
and obviously, it will go to other markets as well--
the numbers there are just staggering.
Like you said, basically, on what we have today in YouTube.
It's [INAUDIBLE].
SAM DUTTON: Yeah, that's right.
We've got this huge move from--
well, it's video viewing onto the internet.
I think I saw some figures from the US that people are
now spending more time on the internet, and a lot of that
watching video.
And that's going to require these really good
technologies, like MSE and great codecs like VP9, for the
internet to keep going.
So some great stuff there, and check out the links.
There's a whole stack of more material there.
IDO GREEN: Yeah, absolutely.
Absolutely.
And maybe we'll just go for the last--
oh, by the way, I wanted to ask you about the encrypted
media because I've got questions from start-ups that
wanted to try and start playing, or let's say,
developing and check this technology.
Where does it stand today in terms of enabling us to
encrypt, decrypt on the client, and what can you share
with us in terms of where this project is going?
SAM DUTTON: So over the next couple of months, we're going
to actually be producing something called "EME in a
Box." So this is going to be a complete starter pack for
people who want to have a go with EME.
In the meantime, I would check out the links
that we've got there.
Actually, I can share some more stuff later, some more
resources about how EME works and how you might implement it
in your project.
But we will be producing some more materials, resources, for
developers so that they can integrate the encryption part,
key servers, and the actual web applications, in their
infrastructure.
IDO GREEN: Excellent.
SAM DUTTON: Their app.
IDO GREEN: Excellent.
So--
SAM DUTTON: We'll keep you posted.
We'll distribute that stuff.
It will be available in the next month or two.
IDO GREEN: Great.
And then last but not least, we put
some links to resources.
So of course, we'll have the recording, so people that
weren't with us.
And I know there are a few that would love to see the
recording, so of course we'll have a link there.
And there's a Google I/O presentation on WebRTC.
I highly recommend it.
I watched it live and then watched it again three or four
weeks ago, and it's a great presentation.
And then we have two tutorials on HTML5 Rock about WebRTC
basics and an eBook or paperback
that you could purchase.
SAM DUTTON: Yeah, that's right.
The book is brilliant.
I really like that.
Download it to your eBook reader, and it's just coming
out in the second edition.
We'll actually put a link there, too.
The other resource I would recommend--
shameless self-promotion--
is the Codelab that we did at Google I/O. That shows you how
to make a complete video chat application,
including how to build--
really, really simple--
how to build a signaling server using Node JS and
Socket I/O.
IDO GREEN: Excellent, excellent.
That sounds brilliant.
And then we put a link just to show where, for developers
that want to see what are their users using, and then
plan ahead and see.
So as you mentioned, it's supported today in Firefox and
Chrome, and hopefully Opera will join the gang soon.
SAM DUTTON: Yeah.
[INAUDIBLE] happens elsewhere.
IDO GREEN: Yeah, yeah, yeah.
So that's pretty cool.
SAM DUTTON: Yeah.
That's great.
You also might want to check out chromestatus.com.
We'll put a link to that, too.
IDO GREEN: Yeah.
SAM DUTTON: This tells you the implementation status of APIs
in Chrome and Chromium.
Great resource.
Just been relaunched.
That's another good way to find out when things are on
the way, how standardization is going, and so on.
IDO GREEN: Yeah, absolutely.
[INAUDIBLE] .com/features.
I really like the new edition to see exactly which API is
going to be supported in which platforms, and some great work
over there.
SAM DUTTON: Yeah, beautiful piece of work.
That's very nice.
IDO GREEN: Excellent.
Excellent.
So I think we are just on time.
I would like to thank you very much for joining us and
putting some lights on this cool, new technology.
SAM DUTTON: Thanks, everyone there, for joining us, and
apologies for the confusion of RTCDataChannel and
PeerConnection.
We'll put some more links up there.
I hope it's useful.
If you're working on stuff, please feel
free to contact us.
And any bugs with the APIs, we really appreciate all the bug
reports we've had, and feature requests, and all that stuff.
crbug.com/new.
That's the place for your comments on the WebRTC APIs.
So thank you.
IDO GREEN: Yeah, absolutely.
So thank you very much, and until next time, be strong.
Bye bye.
SAM DUTTON: See you.