Remote presentation screencasts with YouTube recordings for meetups in Google Hangout

After seeing it in happening in a HelsinkiJS, I figured out that having a remote presenter in your local meetup kicks ass. Thanks Oleg for getting our meta meetup together for sharing the best practices!

Why a remote presenter via screencast?

  • Remote presenters offer some more color over seeing the same old faces in your meetup all the time
  • More information trade across organizational borders… or countries.
  • The benefits of the online presentation are not limited for the local participants – anyone can join to see the online presentation online – like all those home daddies who often miss the chance to be there in person.

[toc]

Meet Google Hangout

Google offers Hangout video sharing feature in their Google+ social service. The benefits of doing a screencast presentation in Google Hangout include

  • Anyone can watch the live stream
    • The number of participants is not limited or pre-selectd like e.g. in Skype.
    • You get anonymous Youtube short URL where anyone can follow live broadcast
  • You get automatically YouTube video recording out of your broadcast. This is a big plus as post-processing recordings from the conferences have always been great pain.
  • Google Hangout works on any OS, maybe even on some mobile devices?
  • Google is generously offering the bandwidth from their streaming CDN network. You don’t need to provide the bandwidth for those 100 viewers of 2 mbit stream 🙂

Do the math

  • In local meetup you reach the 30 people in the room
  • With live Google Hangout you can reach 100 or so people if you advertise the event beforehand in your community medias
  • With YouTube recording you can reach all those 5000+ people who were not there in time or space when it happened

… this is not good only for the local community, but also good in general to have high quality recordings of your presentation to share later on for anyone.

The disadvantages of Google Hangout

  • You need a Google+ account for sharing your webcam or screen (your soul, real name, I know…)
  • The hangout organizer must be able to bind his/her Google+ account to YouTube account with real name policy permanently
  • … Google is little shortsighted here: you may need to create fake non-person G+ credentials for meetup organizations (now I hear Eric Schmidt crying)

Image

 

Using Hangout with Google Apps user account

If your organization is using Google Apps for email you may be able to enable both YouTube and G+ in your domain settings. After this, there still exist real name policy problems and you cannot use a name like “Secretary of Python Finland” in G+. So better come up with a foreign fake name… Also settings the name in G+ will silently enforce this name on Gmail and other Google services, so be careful.

Another warning: YouTube cannot be enabled for Google Apps accounts in all countries, so check this beforehand before trying to create an organizational G+ account. Finland was such a country. Rogue Gmail account, here I come…

Image

Preparing for live Google Hangout broadcasting

Start preparing a day before the event! As you can see the account policy and such may lie down obstacles on your way to become a screencast ninja. As sad it is, you need to practice the technical aspects of Hangout thing to make sure it works when the great day comes.

The encoding of live video will max out at least one of your CPU cores. Make sure you have powerful enough hardware under your fingers when you share your screen.

First your Google identities and cookies will become messed up in your web browser if you try to use G+ and/or Youtube with several Google accounts at once. In theory Google has some clever cookie tossing to tackle this problem, but in practice it just doesn’t work. Use Multifox Firefox extension and open a new identity window where the only logged in Google user is your Hangout user.

Image

Make sure all your presenters have their G+ account created beforehand and you have added them on your friend list. Make sure that the presenters have test drived the screensharing on their personal laptops – it would be shameful if streaming would fail because of something like a Linux driver bug. You will need to install a browser plug-in for the video encoding: I know at least Google Chrome and Firefox work, but I don’t suspect other major desktop browsers should have any problems (Lynx, Iceweasel and others, sorry again…)

To test things out, ask people to come to a test Hangout session where you really see their screensharing is working with you and you learn how to use Cameraman feature (more below).

Creating your Hangout

Just login to Google, click G+ and then Hangout > Create hangout.

A new pop-up window ensures. You need to also accept some additional site policy and Google warns you that you must have permission to broadcast and record the material. Make sure you obtain necessary permission from the presenters beforehand.

Image

Image

Starting the screencast

Hangout offers options to stream your webcam, screencast any of your monitors or screencast a particular window. There doesn’t seem to be option for a floating head on the top of presentation yet.

Image

 

On Air

(oblig. related Reckless Love music video)

The broadcasting can be public or private (only for invited hangout participants). The latter doesn’t scale well when you try to make it as pain free as possible for others to see the presentation online.

When you go public “on air” you’ll receive the YouTube short URL which has live broadcasting as Flash video widget (no HTML5 or WebRTC yet, sorry!). No YouTube login is needed in order to see the video in this URL: you can share it in IRC, Twitter and other social networks for your audience.

Image

Image

As the summoner of the Hangout, you have a Cameraman feature which controls who of the participants “is live” in the main live stream. You can switch the stream between any of the presenters and your local webcam, just for the audience to say hi for the presenters.

Image

Image You have a group chat feature  in Hangout. But often the chat is best to handle offband, like in IRC, where your target audience naturally come together online and you have better moderation tools in your possession.

Image

Please note that public broadcasting may attract unwanted attention. My fellow friends in Bitcoin Hackathlon got flooded over by kids when they were experimenting with Hangout. You can directly share your Hangout URL from the web browser’s address bar, but it means that anyone using that URL can join in Hangout for chat and video streaming.

Ending the Hangout and video postprocessing

After you press “terminate the call” icon in the top right corner, you’ll get a message telling that the recording of the live stream will be uploaded to YouTube.

Image

You can edit the recording later on in YouTube.

Bonus photo

I found a lovely Google Effects panel in Hangout. You can play sounds (drums, applause) or glue artifacts on the top of live video stream. It’s Movember and I seem to be victorious.

Image

 

\"\" Subscribe to RSS feed Image Follow me on Twitter Image Follow me on Facebook Image Follow me Google+

Why people hate Adobe (and have now headache with sports-tracker.com)?

sportstracker.nokia.com was a GPS based sports tracking service for Nokia phones. Around a year ago it spun off as independent company, which was a good move if you really want to develop your service business. Now sports-tracker.com has launched a new website. You can upload your runs and photos there and share your sports results through social media.

It was delightful to see the new site opened and having the features been missing so long time ago. However, I was not totally happy with what I saw.

Image

The whole new site is built on top of Adobe Flash run-time technologies. There are no traditional web pages per se.

The problem is that full page Flash is resource hog. In the picture above you see that opening this web site in my Safari web browser spikes CPU to 100% usage – and it actually stays there indefinitely (note: on front page, see remarks below). This means that my computer is working to barely survive under the stress caused by this one web site – and my computer is powerful iMac. This means that if I have this site open background in my web browser my laptop battery would die very very fast. This means that all programs I try to simultaneously use on my computer become sluggish.

I assume that when sports-tracker.com was spun off from Nokia they contracted some digital advertisiment agency to built the new site for them. Digital advertisement agencies are often, not always, companies focused on the brand and visual appearance. They love to work with Flash because it gives good authoring tools to build nice looking, bling bling filled, animations.  Flash is a great tool for animations. Flash is a great tool for building browser based games. However, it is not good for building the whole web site where the user experience criteria could include 1) the site actually to responds to clicks 2) the site does not bring down to the whole computer. The decision makers probably drink cool-aid “hey let’s built the site with the Adobe’s latest tools – have you seen the demos how coooooool they look like”.

The thing is, I want to just see my sports tracking results. I don’t care whether the diagrams have blurred drop shadows with state of the art Web 3.0 mouse over effects. Now I can enjoy the effects, points for the artistic leader for that, but doing the actual task, accessing my sports results, have become irritating task to do. Things respond sloooow – that’s the main reason. In-flash scrolls bars have noticeable lag.

There exists an uncanny valley how normal web sites behave and how 100% Flash site behave. My right click does not work. I cannot right click a link and open it in new tab. I cannot right click a link to copy it to my friend. I cannot access the site on my N900 web browser (which even has Flash). I coudn’t even send feedback to sports-tracker.com team without first installing a desktop email client, as the email address cannot be copied from Flash to web mail. Text boxes are little different.

I cannot hold my horses to see Adobe conquering mobile phones with Flash and doing the same thing for mobile browsing experience it has now done for sports-tracker.com.

The site is not bad. Usability guidelines have been followed carefully when building the site. The developers seem to have gone into great details to make the operations smooth as possible. For example, URL fragment identifies are used to make sure bookmarking works even though Flash is present on the site. Social media features, not present in old sport tracker, are finally there. The results of design decision to built the whole site on Flash, instead of using Flash for some components only, might not have been seen by the time this decision was taken.

When Nokia Sports Tracker was first introduced 3-4 years ago with the first Series 60 GPS phones it was ahead of the competition. Wow effect had no limits – can you really do that with your mobile phone – in real-time and live?

It is funny how time passes.

It is definitely possible to build a sports tracking site, which looks cool, but does not have issues mentioned here.

Note: With little more research it seems that CPU usage stays 100% is specific to front page only and it has issues of not winding down action when you move away from your browser. However, rendering of other pages still uses vast amount of CPU, causing lag you do not see when opening web pages. The background CPU consumption on sports-tracker.com page is aroud 8% per tab when should be 0%.

Note 2: I am using the latest 10.1  Flash Player.

\"\" Subscribe to RSS feed Image Follow me on Twitter Image Follow me on Facebook Image Follow me Google+

Why C# / Javascript will be allowed and Flash won’t be as App Store programming language

All the Flash developers of the world wet their pants on 8th April 2010 when Apple announced that Flash based application won’t be approved in the Apple’s App Store. This essentially destroyed the easy opportunity to monetize existing Flash development skills and the huge Adobe expansion potential into mobile markets, pissing a lot of folks who had bet on Adobe’s technology, leading developers’ rage on Internet forums.  Bad news for those who had already building iPhone apps on Flash CS5 even before it was released…

Unfortunately it was not only Adobe and Flash who got in the line of fire: popular frameworks like Appcelerator, Unity 3D and Monotouch apps are theoretically excluded to enter App Store by the new developer agreement which states that the original source code of the application must be C, C++, Objective-C or WebKit/Javascript.

I belive Apple does not hate certain programming languages. Apple does not either want to force you to use their development tools. Only by understanding what Apple really meant with the infamous 3.3.1  clause in the developer agreement, we can start building a bridge to get MonoTouch et. al. to be Apple’s favorites again.

History of Flash (Lite)

Adobe (Macromedia) and Flash have been into mobile business far before iPhone was published. The thing is called Flash Lite run-time. It runs on billions of phones.

The problem of Flash Lite is that it does not very well integrate with its host environment. It does not even have so simple user interface component as a “menu” out of the box. Which means that every developer must create their own menu implementation. Which means that there exist hundreds of shitty Flash Lite menu implementations out there, each behaving differently and each not resembling the native menu component. This is not a very nice thing if you consider the user experience of the application and iPhone  is all about user experience. Note that this is not so big thing for games, as games have radically different user experience anyway.

Flash does not communicate with its host platform either. You wouldn’t be able to access native API features even if you fully controlled the deployment environment of Flash application, as Flash is a binary blob into which you cannot plug-in more parts. There even exists a product for mobile Flash whose sole purpose is circumvent the limitations of  Flash by using a localhost TCP/IP socket connection and a native server application. If developers choose Flash they choose to lock themselves into Flash and what Adobe gives for them.

This crippling of your platform potential with Flash is not limited to Flash Lite and mobile. I have personal experiences from a project done with Adobe Air for Windows. We wisely chose Adobe Air as a desktop application development platform, because it would guarantee the future portability of our code. However, this nice idea did not really interest in the point when we noticed that we e.g. couldn’t control how File Open dialogs behave (file mask, remember start folder, etc.), severely reducing the user experience of the application.

So, Steve Jobs definitely is on something when he says “intermediary translation or compatibility layer” is bad for your platform.

Note that the same limitation concerns Java ME also. Desktop Java has JNI interface for building extensions, but mobile Java doesn’t.

How other frameworks differ from Flash

Let’s take a MonoTouch for example. MonoTouch is Novell’s open source Mono project based development tool which allows you to create iPhone applications in C# language. Compared to Objective C, development using MonoTouch  has several advantages for certain audience: you don’t need to learn new programming language, C# is closer to traditional Java/C++ languages than Objective-C, you can leverage the full potential of existing C# ecosystem out there, the standard library has more functionality and of course, it is easier to port the core of the application from a platform to another.

Note that the porting part concerns core i.e. application logic only. MonoTouch does not try to separate you from Apple’s platform. It does not reinvent platform services or user interface building blocks, or force something like Windows user interface into your shiny iPhone. In fact, MonoTouch seamlessly integrates with Apple’s platform. You even need to use Apple’s own Interface Builder tool to create user interfaces, which will be exposed to MonoTouch’s C# code. Binding with native API is breeze: below ten lines of code guaranteeing that whenever Apple releases a new platform feature it will be instantly available for all MonoTouch developers.

MonoTouch embraces the platform. You can pick Objective C or C# depending on taste. The resulting source code is similar in idea, different in syntax. There is no “compatibility layer” so to say. Not even technically, as C# is compiled to native ARM binary. There is no way how a person could distinguish a MonoTouch application from an application build using Objective-C.

Open source philosophy and platforms

Appcelerator, PhoneGap and other open source / Javascript frameworks are also protected from Apple’s wrath. They are open source which means that you can tap the full potential Apple’s development platform as long as someones writes a little binding code. Also, they try to use native look and feel and components as much as possible, just to make the applications slick. The frameworks do not have conflicting interest with Apple; the frameworks provide portability to a certain point, but they do this respecting their master.

Flash does not enjoy this freedom; developers can’t change Flash or venture outside Flash’s sandbox.

The Future

There is no point of technically counter App Store’s developer agreement, like saying “hey I’ll just compile all my Flash source code to C so it is C code.” It’s Apple’s game. Apple can do anything they wish and they can also change the developer agreement. So when Apple sees something happening in its ecosystem which might damage it, it simply pulls the rug under your feet again. But Apple can also change the agreement in a positive way. PhoneGap has already went through process of becoming App Store approved framework once. I hope that development communities will not burn its bridges with Apple, but try to communicate this matter with a meaningful manner and come to a development agreement resolution based on ideas given in this blog post. Below is my proposition (IANAL. It is left to the reader to come up with something smarter):

3.3.1 — Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be written using Apple’s guidelines and best practices to express Apple’s intend how the application should behave.

iPhone is not a monopoly. You are free to build and run your Flash application on a device like N900 on any day and sell it in Nokia’s OVI store. If this is a problem for your business then maybe you should reconsider your business model to be less iPhone centric and promote heterogenicity of mobile platforms and application stores.

Until Flash is fixed so that you can mix-in native code, instead of it being a barrier between the expression and the hosting platform, I find it unlikely any company based their reputation around the user experience would allow Flash on their platform.

\"\" Subscribe to RSS feed Image Follow me on Twitter Image Follow me on Facebook Image Follow me Google+