Introducing WebKeyer API

Last version (M5) of WebKeyer includes an API to allow developers and thrid party software access WebKeyer functionality.

The communication with WebKeyer is based in the WebSockets protocol.

WebSocket is a web technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket. The WebSocket protocol has been standardized by the IETF as RFC 6455.

Meztura WebKeyer incorporates an internal WebSockets server that listens to incoming connections and establishes a bi-directional communication with a client.

The nice thing of using WebSockets is that all modern web browsers has support for it so you can code your client-side/controling application in plain html5/javascript.

We have built a demo of a WebApp that can connect and control WebKeyer whole UI. You can play with it, test it or donwload it from here: WebKeyer WEB UI.

There is also a very simple demo that allows you to control a On-air stopwatch.

If you prefer to integrate the API with third party software, or you just don't like HTML/Javascript to code your client, you can also use any of the many WebSockets libraries that can be found on internet for many different programming languages and platforms.

One of the coolest things of the new API is that it allows you to fire or inject Javascript code from a external source in the application that is being executed by WebKeyer, this way you can control your graphics from any device or third party software.

Make sure to download the M5 documentation to learn more about the API.

RSS news ticker. The easy way!

One of the big advantages of webKeyer working with web standards is the amount of open source proyects you can find out there in the wild. Many of you probably know about jQuery and its vast amount of plugins and add-ons.

We had the intention to build a RSS news ticker for broadcast TV with the following characteristics:

• It had to be a horizontal scroll news ticker as it is the most suitable format for TV.
• It had to be really easy to change its appearance.
• It had to be really easy to change the source of the RSS.
• It had to automatically update the feed when the last news is displayed.

We didn't find something that exactly fit our needs but we found this interesting jQuery plugin by Gian Carlo Mingati that turned a <ul> HTML list into a nice horizontal scroller. Having this as a start point we only had to code a script to bring our RSS news into a <ul> list. We found this nice RSS2Array script by Alec Hussey and then we wrote a single Array2Xml that brought us the data in the desired format.

The last step was to introduce some modifications to li-Scroller in order to make it to automatically reload the news feed using AJAX.

And VOILÁ! a RSS news ticker for broadcast the easy way. Bellow you can download the source code play with it and adapt it to your needs. It's free and it's open source.

Download

Demo

Demo note: You can easily changue the default RSS source by passing the GET parameter "xml_source" to the script.

http://meztura.com/main_site/en/labs/webkeyer/demos/news_ticker
/index.php?xml_source=http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml

WebKeyer coding tips

Really there are not many. If it works in a normal web browser it will probably work in webKeyer.

There are although some thing to take into account:

Web pages transparency (alpha channel): In order for transparency to work properly and be able to overlay HTML on top of video, background of your pages must be set to transparent or not defined (with no color) in the CSS style sheet.

Scrollbars and margins: Probably you don't want to show the scroll bars of the webpage whenever some elements are overflown. You can easily remove them by setting the 'overflow' propiety of the 'body' element to 'hidden' in your CSS sheet. By default all browsers setup a margin for the 'body' element. It would be convenient that you reset it to 0. This way you can make sure your content fits perfectly on screen:

Flash and Silverlight: Meztura webKeyer uses the NPAPI plugins that are installed on the system. This means it uses the plugins that are designed for Firefox/Chrome. So, in order to run Flash or Silverlight content in webKeyer, make sure these plugins are correctly installed and working in Firefox or Chrome.

Why Meztura webKeyer?

Internet Explorer, Firefox, Opera, Chrome. Hundreds of developers have worked for years building some of the most used applications in today's world: Web Browsers. Millions of lines of code, vast functionality, immense complexity and development of new technologies.

New open web platform standards like CSS3, HTML5, and JavaScript ensure that developers have the tools and features they need to build more beautiful and interactive web apps than ever before.

In Meztura we are trying to meet the Internet world with the TV world. Meztura webKeyer is the first On-Air graphic system that makes it possible to overlay HTML5/CSS3/Javascript as well as Flash and Silverlight content on top of High Definition or Standard Definition video signals.

You don't have to rely on a proprietary and not standardized manufacturer's content creator to build interactive graphics for your broadcast anymore. Now you can take advantage of all the potential that modern web technologies have to offer and code your apps the easy way, as if they were projected to run in a normal web browser.

Meztura webKeyer is a special Web Browser. It is special because it displays web content as the Playout of professional video cards and also because it preserves the transparency information (Alpha channel) of the rendered web applications allowing them to be overlaid on top of live video in real time.

In this page we will try to post some tips and tricks as well as some experimets and samples related to our work with webKeyer.

If you have a cool project using webKeyer and want to let the world know, definitely drop us a line at info@meztura.com.

WebKeyer System Requirements:

• Operating System: 32 bits or 64 bits Windows 7
• Video Capture Card: Black Magic Decklink Studio or Decklink Extreme 3D

Download Meztura webKeyer

Documentation