Tip:
Highlight text to annotate it
X
LEE DENNISON: You ready?
IAN BARBER: Hm-mm.
LEE DENNISON: Go.
IAN BARBER: Hello everybody, and welcome to the second
attempt at the Google+ EMEA platform office hours.
We had a bit of a technical difficulties last time.
And this time, we've attempted to resolve those technical
difficulties.
Hopefully, if we have any more problems this time, they'll be
entirely new and unexpected.
With me, as always, is Lee Dennison.
LEE DENNISON: Hi, everybody.
IAN BARBER: And over on Hangouts, joining us from
Spain is Silvano Luciani.
SILVANO LUCIANI: Hola!
IAN BARBER: [CHUCKLING]
OK, cool.
So, today, what we're going to talk about a little bit is
DevFest, which is sort of happening at the moment in
various places around the world.
Then we're going to look at something that came out of the
London DevFest, which is a Hangout application that
Silvano built, so he's going to take us through that.
And then finally, if you've got any questions, we'll
handle that.
Otherwise, we'll say goodbye and catch up
with you next time.
So DevFest is our sort of first point of call, and
that's something that was kicked off the weekend before
last, in fact, in London, and is a global event with
conferences happening all over the world just to investigate
and celebrate very bits of Google technology, and web
technology, and mobile technology, and all the kind
of cool stuff that's being built.
So they're organized by the local Google Develop Groups in
different regions, and we have the advantage of going along
to the London one.
But in between them, we've had events in
[INAUDIBLE], in India.
We've had events in Shanghai--
all over the place.
It's been really amazing.
And over the next few months, we've got them coming up
across the world.
I think the next one's in Kyoto,
which might be tomorrow--
pretty soon.
And if you want any more information on that, go to
DevFest.info, where you can see all the upcoming events.
We thought it might be interesting to show you some
of the pictures from DevFest London, so you can get a
little bit of a feel for what it was like and also to talk
about what some of our favorite sessions were there.
So, Lee, I believe you've got some photos you can stick up.
LEE DENISON: Yep.
IAN BARBER: So, if we--
--simplifying your life, making things a bit easier
while making web apps of all kinds.
So it comes with a whole bunch of tools already out of the
box, configurable for you.
It's a package manager, and it's a build tool that can get
your application ready to go up-- very, very fantastic, and
a useful set of functionality, and a really interesting talk
from [INAUDIBLE], not just about Yeoman, but also about
how you integrate a tool chain into your process, looking at
how he uses sublime text in his editor to improve what
he's doing to make it a little bit more powerful to allow him
to get more done in the same amount of time-- very, very
interesting talk and definitely worth
checking out Yeoman.io.
There's some good intro videos on the site.
LEE DENISON: --talk, he was getting tips and tricks to
developers who were looking to get the most out of Jelly
Bean, and to take advantage of the new features that have
been released in Jelly Bean, and help their applications
really fit in with the look, and feel, and the UI that's
coming in Jelly Bean.
So, yeah, that was a great, great talk.
IAN BARBER: Excellent.
Cool.
So one of the things that we actually presented as part of
DevFest was a Hangout application that Silvano and I
talked about on stage there.
But if you're interested about any of the other things that
are happening at the DevFests, or you'd like to check out
some more events in London, do check out gdg-london.com,
which is the site of the London GDG
Google Developer Group.
Unfortunately, the next meeting, which is next week,
is all sold out.
It's about cloud technologies.
But stay tuned.
There'll be further things coming up, so
it's worth a look.
But I think now, one of the best things to do would be to
just switch over to Silvano.
And, Silvano, perhaps you could take us through the
application which you built.
SILVANO LUCIANI: Yeah.
Sure, Ian.
So just let me quickly introduce the
story of the app.
The app is called "Being Paul Irish." Paul Irish is a
developer advocate for Chrome based in the United States,
and in July, he came to London-- visiting with members
based in London with other team members
coming from the US.
And they did one of these Google Developers Live events
for the Chrome platform.
And when they came back to that area where we sit all
together in the office, [INAUDIBLE]
was saying, oh, it could be really cool if we could have
Paul Irish up here in all of our Hangouts.
And I was there listening, and I said, yeah, we can do that.
So we took a couple of pictures of Paul, and then I
wrote this, and now I will show it to you.
MALE SPEAKER: Hey there.
I'm Paul Irish.
SILVANO LUCIANI: --in the Hangout, so you can see this
nice overlay of Paul's face, and the animation of the
mouth, which is more or less going on when I'm speaking.
The app is actually a very simple app.
And I'd like to show the source code to you if we can
go with the slides.
This is from the slide pack that Ian and
I used at the GDG--
at the DevFest London--
and this is the way you can launch the app, so you're
seeing a Hangout [INAUDIBLE].
It's very, very simple code.
It's mostly boilerplate.
And the only thing that you need to personalize is the ID
of your app that you can get from the Google API console.
If we can go to the next slide--
so this is an example of a standard Hangout App.
And when I say standard, I mean that this is XML code.
But we have published the service, which is called the
Hangout iframer.
That will allow you to write your app using your HTML, and
then the Hangout iframer will take care of grafting your
code into an XML in an iframe inside the Hangout.
And you can find more about this at hangout [INAUDIBLE]
.blogspot.com.
And I personally recommend to use it because I like HTML way
better than the XML code in my [INAUDIBLE].
If we go to the next, we can see this is the beginning in
the head of the code.
One thing that I'm doing and that I wanted to show with
this app is initializing Google Analytics.
It's very important when you write a Hangout app to be able
to measure the engagement that the app is
generating with your user.
And Google Analytics is the most straightforward
way of doing it.
And you don't need anything special when it comes to
Hangout Apps.
It's just another web property, as any website, so
this is the plain, standard, boilerplate code that you can
get when you create a property on Google Analytics.
And the only thing that you will need to change, of
course, is the code for your property.
And we will see later how to be able to push events, to be
able to track, for instance, when users are performing some
actions on your Hangout App.
The most important part is at the end of the code, and we
include the [INAUDIBLE] for the Hangout API and then the
Hangout API itself.
Next slide please.
So this is all my initilization code.
It's a bunch of variables that I use to store the frames for
the animation.
It's very simple.
We have six frames.
It's basically Paul's face, and then Paul's face with
different degrees of openness, let's say of his mouth.
Then we have a couple of messages that we use for the
button that enables and activates the
overlay on the face.
And then the most important part is at the end.
Before we start doing anything inside a Hangout App, we need
first to be sure that we have loaded the API.
And for this, we used the [INAUDIBLE]
API ready event, and we add the listnet, which in this
case is the function initApp.
If we can move to the next slide, please.
This is initApp.
And once again, all I'm doing is just organizing my logic
for reverting some of the things like getting the
participant ID for the local participant, which we will use
later to get the changes in the volume for the local
participant.
And then the unit functions for the overlays, the sounds,
and the events that we add to the user interface.
Next slide--
now, unit overlays is the most important function in this
application where the main part is played by the overlay
of Paul Irish's face over the local participant's face.
As you might know if you've used already the API, first,
you need to create an image of sorts from a PNG file on http,
preferably.
And then once we have the image results on top of the
image results, we can create the overlay, specifying where
we want the overlay to be put.
In this case, it's the nose [INAUDIBLE], because it's more
or less in the center of the face so that our face overlay
will be centered all over the face.
One thing that I wanted to show is one edition from the
latest version of the API--
v1.2.
And this effect that we can now manage the resources.
So we can decide to perform some action just when the
state of the image results change.
And we can use this also for sounds and overlays.
So in this case, what we do is we check, and when an image is
actually loaded, we call the image loaded function.
As we will see later, what this does is making sure that
the button that enables to show the overlay is activated
only when we have already loaded all the images that are
the frames for our animation.
In this case, I'm not doing anything particularly useful
in the case that the image is not loaded.
I'm just writing a message to the console.
But, of course, you could try, for instance, to reload the
image resource if there's been some problem, or send more
meaningful messages to the user.
In initsounds, it shows another edition
of v1.2 of the API.
And in this case, initsounds when I show the
face of Paul Irish.
That's also a salute from Paul that I read of one of his
very, very interesting video.
It is the one on [INAUDIBLE]
from the [INAUDIBLE], that I strongly recommend to watch.
And the addition from the v1.2 is the possibility of great
sounds which are global, meaning that they are not
played only on the local instance of the app, but they
are, let's say, broadcasted, so every instance of the app
will play the sound.
And in this case, as you see, we used the [INAUDIBLE]
parameter set [INAUDIBLE], and this means that the sound will
be global, and everyone will be saluted by Paul in the
moment where we apply the overlay.
Next slide, please.
So this is the function that actually
activates the overlay.
It's very simple.
So we add or remove a listener to the volume change event.
With the Hangouts API, we can get updates on the volume of
each participant.
In this case, the volume is the input from the microphone.
So what we do is if the overlay's active, we have the
[INAUDIBLE] that will animate the mouth when the volume
changes, and otherwise, we remove the [INAUDIBLE]
so that there's no animation.
One important thing is at the end.
There you can see how it is to track events with Analytics.
It's just calling the push function with track event
parameter, and then you can define your own event.
In this case, our label is [INAUDIBLE]--
is the way I call this event.
And I'm tracking with event [INAUDIBLE]
if people feel like Paul, or if they don't feel like Paul,
meaning that I will see how many times they click to show
or write the overlay.
And as you can see, it's very simple, and you can use it for
all kinds of interactions and actions that the user can
perform on your app.
And this is the function that animates the mouth.
Once again, it's quite easy.
So what we do, we check the volumes of our local
participant.
To do so, we need the participant ID because on this
event, the parameter for this event is an array [INAUDIBLE]
by participant ID.
What we do, if the volume is more than zero,
we animate the mouth.
Otherwise, we just show the frame with the mouth closed,
meaning that we are not speaking.
And that's all.
IAN BARBER: Cool.
All right, Silvano.
Thanks.
So that just goes to show you, really, how simple it is to
put together a app using Hangouts.
It's really something that you can do very, very easily--
very, very quickly.
And it's not something that really requires a great deal
of investment of time to get going.
That's one of the nice things-- you can do it,
basically, as a joke, which is what the results of the Paul
Irish app is.
The other thing that's really important to remember with
Hangouts is that kind of app, with doing something like a
facial overlay or something on the screen works, but it's not
the only kind of app you can build.
You also have the flexibility to put a A-frame into the main
section of the Hangout app and build
whatever you want to there.
So that last slide, you just saw a little bit of at the
end, that was from a game called WarLight, which is a
really fun kind of risk style game that you can play via
Hangouts with your friends.
And you can build anything like that into your
application.
So you can go and take an application which exists
somewhere else and add video chat to it with a Hangout, or
you can go and build some crazy new experience or new
kind of game that works within the Hangout.
So it's very, very flexible and definitely something
that's worth looking into.
If you're interested in doing more with Hangouts, or you'd
like to try something out, if you go to developers.googl
e.com/+/hangouts--
that's the plus sign--
then you'll find sample apps, you'll find API documentation,
you'll find lots and lots of stuff to help you get started.
And we'll put a link to that in the [INAUDIBLE]
about the show.
So that was the kind of Google+ presentation at
DevFest London.
I hope it was interesting for everyone.
And the rest of the day on Friday actually was filled up
with a couple more presentations, and then we
went down and did some enlightening talks with people
like Ilmari Heikkinen, gave a really, really great talk
about doing images--
multiple resolution images--
and a few other people talking about some things that made a
difference to them or that they wanted
to share with people.
And then on a Saturday, we actually had a hackathon.
So the hackathon was a really interesting day full of
coding, building projects based on all these different
technologies, and people came up with games, with
applications for doing video streaming, via get user media
in the browser--
with all sorts of different things, which made it just a
really, really great day to be around, so I would definitely
say if there is a DevFest near you, get along to it.
Check it out, and see if there's anywhere you want to
speak or anywhere you just want to go along to.
So I think that's probably about it from me, unless we've
got any questions.
LEE DENNISON: I just had a quick look, and I've not seen
any questions on the [INAUDIBLE], so I
think that's it.
IAN BARBER: Excellent.
Well, apologies again to everyone that turned up last
week and suffered through our technical difficulties, but
hopefully, we've gotten it sorted out.
It looks like this week has gone OK.
Particular apologies to the amazing Gavin [INAUDIBLE], who
we brought along last week and then completely
failed to get on air.
So, Gavin, we will get back with you in the future.
We'd love to have you on now that we have some idea of what
we're doing.
So, thank you, and that's it from me.
LEE DENNISON: And that's it from me.
IAN BARBER: All right.
See you later guys.
SILVANO LUCIANI: Bye.