11 Mar 2019

RealEyes & NBC Sports: A Pivotal Year of Streaming Events

The past year was a pivotal year for streaming video. Powered by its Playmaker Media operations, NBC Sports led the sports industry by delivering 4.37 billion live streaming minutes for the three biggest digital events of 2018: Super Bowl LII, the PyeongChang Winter Olympics, and Spanish-language coverage of the 2018 FIFA World Cup. Including its other sports, NBC Sports delivered 90,000 hours of streaming coverage across more than 30,000 events for 6.5 billion minutes for the year (up from 3.4 billion in 2017) breaking streaming records for the NFL, NHL, NASCAR, MLB, NBA, Golf, Horse Racing, Premier League, Notre Dame Football, and Olympics.

The stakes couldn’t be higher for supporting streaming video events of this scale, and NBC Sports relies on a network of trusted partners to ensure exceptional services for its customers. With an experienced team and extensive video streaming capabilities, RealEyes began working with NBC Sports in 2012 shortly after the London Olympics. As an industry leader in streaming video, RealEyes’ deep expertise includes advanced video player development, large scale streaming delivery systems, and an ability to troubleshoot complex systems and global live events quicker than anyone else. These competencies have enabled RealEyes to serve many prominent customers, including NBC Sports, over the past 15 years.

“To execute not just one but three major events of this size, scale, quality, and stability in such a short duration is unheard of in the digital video delivery landscape,” said Eric Black, SVP and CTO, NBC Sports Digital and Playmaker Media. “With partners like RealEyes, we look forward to future opportunities to innovate and deliver world class solutions for both NBC Sports Group and our Playmaker Media partners.”

RealEyes also supplied and deployed its MOE:QC/Packager for quality control (QC) and multi-CDN ad content packaging for NBC Sports in 2018. These services helped NBC Sports to deliver the highest quality of seamless ad delivery, adapt to industry changes, and maintain solid performance and resiliency while automating complex manual tasks.

For more than six years, the RealEyes team has been a trusted development and strategic consulting partner across all streaming platforms of NBC Sports. RealEyes and NBC Sports propelled 2018 to one of the most exciting and successful years in streaming video, and we look forward to collaborating towards more cutting-edge advances in 2019. RealEyes has been honored to work with NBC Sports and be part of the many successes realized in 2018.

Share this
28 Feb 2019

Open Positions at RealEyes

We’re Hiring!!!

We are looking for talented and passionate individuals to join our team.  As a leading innovator and expert in advanced applications and in all aspects of streaming media, RealEyes offers many opportunities for team members to continue to grow their skills and make an impact for our diverse clients. We foster a collaborative work environment and encourage ownership and responsibility.
If you are interested in joining our team, we want to talk to you. We are currently accepting applications for the following positions:
Share this
24 Sep 2018

RealEyes Media Tech Roundup

Week of September 24, 2018

From time to time, RealEyes Media will be sharing a tech roundup of cool products, technologies, and tools we recently learned about and dig. Feel free to reach out to us with questions or share some experiences of your own!

Contact us to learn more about our products and services.

MUX

Jun Heider, Director of Technology

As a streaming media development shop we’re always keeping an eye out for innovative APIs to leverage under the hood of our applications. If you haven’t heard already MUX provides a video-centric API that allows you to embellish your applications by hook in the ability to easily stream your live and VOD content.

For those that are geeky streaming engineers like us various value-add features such as thumbnail generation, per-title encoding, and watermarking should perk your interest. They have a reasonable pricing plan and a $20 starter credit to play around. Go check out MUX.

ngVFor

William McCormack, Web Developer

We all love the Angular framework here at RealEyes Media. We have been using it since version 1 to produce some complex robust applications. But every framework has limitations and Angular isn’t excluded from that. As an Angular application grows, developers need to proactively think ahead about some of the pitfalls that can occur. We found a cool tool called ngVFor. Instead of looping through hundreds of thousands of items in a list and producing that view then deleting the view and creating it all again, ngVFor actually recycles the view! As the user scrolls down the list, ngVFor is only showing the user what they need to see, instead of creating the entire list all at once. If there is a new item that needs to come into view, the tool will delete the last item on the list and add the newest item. This is why it’s called recycling the view!  This tool will detach the views, remove the context, and cache them so we can attach them and re-context them on the add cycle. Therefore saving a considerable number of script/render cycles. Also what’s cool is that ngVFor is 100% compatible with ngFor, so you can simply do a global replace of ‘*ngFor’ with ‘*ngVFor’ in all the HTML if you want to. This is a very cool tool that is worth checking out.

Offline DRM

Grant Curtis, Software Developer

Do you have a DRM-protected video that you would like to play offline? Request a persistent license while connected to the internet, and once you get a Key Session save that Session ID. Later, when you’re offline, provide that same Session ID instead of requesting a new session. The CDM will check the expiration date of your session, and if it hasn’t expired yet, you should be able to watch your drm-protected content offline!

Dash.js is a player that exposes a lot of this functionality. Capturing a session looks like this:


Providing a session looks like this:

Share this
20 Aug 2018

RealEyes Tech Roundup

Week of August 20, 2018

From time to time, RealEyes Media will be sharing a tech roundup of cool products, technologies, and tools we recently learned about and dig. Feel free to reach out to us with questions or share some experiences of your own!

Contact us to learn more about our product and services.

Callbags

John Gainfort, Senior Developer

With the introduction to Angular 2 a couple of years ago I was introduced to the wonderful world of Reactive Programming with the RxJS library. I was immediately hooked and had to learn more. Through my research I found Cycle.js, a Functional Reactive Framework, which used another reactive library called XStream. XStream was developed to remove some of the bloat that the RxJS library had by only including what was thought to be the most necessary operators instead of the 100+ that RxJS carried by default. This however still had the same flaw RxJS had and that it is only maintained by a handful of developers and it could still include more code than a user was using in their project. Andre Staltz, the creator of Cycle.js and XStream, then created the Callbag spec.

A Callbag is simply a definition of a function that handles callbacks in a functional reactive way. The idea being that anyone can create a function that adheres to the Callbag spec and open source it as a library. This removes the burden of maintaining larger libraries like RxJS and the steep learning curve of creating an open source project for the first time. This also enables the ability to only include the desired callbags into your projects bundle through either single imports or a collection of imports. In my opinion this new idea that you are no longer dependant on oss maintainers to fix bugs or add new features will lead to a better development experience. When the need to change or add a new Callbag arises, simply create your own and release it to the world. I am not alone in this opinion and can be seen with the boom of Callbag libraries created within the 5 months since it has been introduced. I urge everyone to read up on this new spec, dive into the many operators created by Andre and the many other authors, and then create your own.

QUIC

John Cohen, Developer

As time has passed, computers have gotten faster and faster. The raw hardware, as well as our internet connections, but, there has been a lot of buildup of latency. The web today is laggy, even though it is very fast. It takes a long time for systems to establish connections. With the way trends in design of web applications aregoing, it is only going to become even slower as every application you use has to talk to more and more applications to do anything.

One thing I am keeping my eye on is the rise of the QUIC (Quick UDP Internet Connections) protocol. This is a replacement for TCP which underpins the standard HTTP/HTTPS connections that most websites rely on. Google has been developing the QUIC protocol for a few years now, and it has started to see some adoption in some locations internally in Google services (and their Chrome browser), as well as from some big players like Akamai.

QUIC addresses the multiple RTT (Round-Trip-Time) of establishing connections that TCP has (SYN, SYN-ACK, ACK), which adds latency that can become a problem as more and more connections to different systems are required. Add additional RTTs of overhead for every connection established that is HTTPS.

QUIC cuts out that overhead. It also describes the encryption used, instead of needing another layer for encryption, like HTTPS needs TLS.

It may still be years before the internet at large switches to a different protocol, but I am looking forward to the relative speedups when we migrate away from TCP to something faster.

360|AnDev

Lora Kulm, Mobile Developer

360|AnDev, a local Denver Android conference, was a couple of weeks ago, and they filled two days with great speakers and amazing content ranging from advanced Kotlin techniques to learning how to effectively work with designers. One of my favorite talks by Yun Cheng covered the process of splitting up an existing code base into an MVP architecture, and had some great tips and explanations of benefits, as well as the underlying concepts behind the architecture. It was a great conference and I had the privilege to connect with talented Android developers from all over the world. Looking forward to the next one!

Share this
24 Jul 2018

Docker on Raspberry Pi 3

Big Upgrades for Little Devices

By Marcy Nugent, DevOps Engineer

Just look at that tiny server

Developing for Raspberry Pi inspires a sense of wonder at what can be done with tight resources; many services that once required a cluster of expensive servers in a data center can run without issue on this $35 tech toy. On the other hand, the ubiquity of x86 processors makes running common software a challenge – try finding up-to-date versions built for Raspbian (the default OS choice for the Pi) and you’ll quickly find yourself scouring Stack Overflow articles and old blog posts. You can spend hours looking for someone, anyone who has this thing working already. Once building from source seems like the easy way out, you may rethink whether this $35 computer is worth it.

xkcd wrote my biography for me

Docker to the Rescue!

Enter Docker.

Now that Docker on ARM has matured into a usable product, it’s trivially easy to install the latest Docker CE engine on a Pi. Once that’s complete, we can really get rolling on the Pi and deliver applications with the same methods you would use on any other device. Using a Dockerfile, we can codify the heinously detailed work of compiling an app for ARM without utterly unmanageable Rasbian shell scripts, ancient apt-get versions, or typing “chmod +x” for every last install script.

Unless this is your idea of fun

The fantastic folks over at Resin.io have done the heavy lifting for us with their ARM-emulating base images, so we can build our software without using a Pi, and simply deliver it via Docker Hub or Quay.io through a “docker pull” command. Check out the RealEyes Github for a Dockerized WireShark Dumpcap implementation and check out our Quay.io repo for the public image, so you can always have a Docker Repository on Quay.

Contact us to learn more about our products and services.

Share this
31 May 2018

RealEyes Tech Roundup

Week of May 29, 2018

From time to time, RealEyes Media will be sharing a tech roundup of cool products, technologies, and tools we recently learned about and dig. Feel free to reach out to us with questions or share some experiences of your own!

Lora Kulm, Mobile Developer

Google I/O, Google’s annual developer conference, introduced so many new things this year, with a continued focus on AI and machine learning. For developers, a big announcement was the conglomeration of the support libraries and architecture components into Android Jetpack. Jetpack takes existing libraries and commonly used Android features, and combines them into one easy-to-use collection that provides guidance for UI, architecture, and features. Also announced was a virtual assistant that calls businesses and schedules appointments for you called Duplex, updates to Assistant and Lens (including a super cool Google Maps integration), and the Android P public beta.

Phil Moss, Senior Developer

Earlier this month I had the opportunity to attend Streaming Media East in New York City. I had been to Streaming Media conferences before, but this time, I got to speak! There was an all star cast of presenters at this conference, including Google, Wowza, Bitmovin, Verizon, Facebook, Netflix, and many more big time folks. After three days of seeing presentations, I was overloaded with some great information, but my absolute favorites involved low latency video, new ways of live encoding, learning how to analyze objective and subjective video quality from none other than SSIM and Netflix, and, of course, our very own, Jun Heider, who did a great talk on video AI platforms. It was an honor to be involved with this conference, and have the opportunity to share some of the knowledge and experience I’ve gained over the years working with RealEyes. I am looking forward to more just like this.

Paula Gettman, Operations Analyst

JIRA applications from Atlassian are awesome, right? YES, especially IF you know how to use them properly to get the most out of them for your business. One way to go from a JIRA beginner to a JIRA master is with the Expium 3-day Jira Boot Camp, and recently, a coworker and I went on this journey. I say journey because it was over 22 hours of learning about JIRA Software and JIRA Core, starting with the most basic JIRA overview to hands-on workshops configuring workflows, projects, agile boards and more. For me personally, the most complex aspects of the training were the workflows and screen schemes. Luckily, each student has the opportunity to dig deep and explore each of these topics, and others, in what I believe to be the greatest part of the training: the workshops! Getting a chance to actually put what we learned into action was a fantastic way to make sure we retained the information and understood how to best apply it to our RealEyes JIRA instance which is specific to our business goals. Luckily, the training course comes with two expert instructors who answered literally hundreds of questions for us and other students in the class. That being said, shout out to our instructors Johnson Wang @jonccwang and Scott Price! As an online trainee it was nice to have an instructor dedicated solely to us, and Scott did an excellent job.

Contact us to learn more about our products and services.

Share this
03 May 2018

RealEyes Tech Roundup

From time to time, RealEyes Media will be sharing a tech roundup of cool products, technologies, and tools we recently learned about and dig. Feel free to reach out to us with questions or share some experiences of your own!

Jun Heider, Director of Technology

While walking the halls of NAB Summit, I ran into a startup – Valossa – that built its own AI and ML stack to index and analyze video. They have a 300 minute free trial and a top-notch front-end to review the AI analysis that rivals Microsoft’s Video Indexer. You should check them out at http://valossa.com/.

Frances Janz, Quality Assurance Engineer

The QA process involves many activities that, preferably, should be tracked and recorded. Up until now, we’ve been tracking everything via spreadsheets in Google Drive. Requirements change and new features are being added all the time. Unfortunately, spreadsheets are cumbersome, hard to update, and easy to lose track of. Enter the test management system — in our case, PractiTest! PractiTest allows us to import our old test cases straight from Google Drive, break items out into separate steps that can be passed/failed individually (so we know exactly what part of a test failed), run reports that can be shared with our clients on all of our testing efforts, track everything we’ve done recently in handy charts, and create Jira bugs straight from our test screen. The last feature automatically includes the test steps and results in the bug report, so the devs know exactly how to reproduce it. No more cross-team confusion!

Marcy Nugent, DevOps Engineer

Instead of using a WordPress or Joomla system that does a thousand things halfway, Ponzu does the pure Content Management with exactly the functions needed for editors and contributors. The code comes with generators for quick developer iterations to easily format how the articles/content/posts/etc. are added, and Ops doesn’t have to manage a heavy server system with tons of individual components to update and manage. With two shell commands, a blog entry system can look like the below:

 

Share this
01 Apr 2018

Announcing Thrift Shop Streaming

Your Past is Our Future

Short on cash but long on inspiration for your media community? RealEyes Media is pleased to announce the next big thing for budget streaming: Thrift Shop Streaming as a Service!

How it Works

Using our proprietary VHS to 4K HLS transcoding system VHLS™, get ready to stream your weird library of 10¢secondhand VHS tapes to the world!

Insert our extra-fancy VHLS™ video player to your Geocities, MySpace, or Xenga page to wow hundreds of your friends, and watch those :poop: ripple through your comments. It even works on mobile, so your friends can scatter :poop: from anywhere!

The Revolutions Start Now

Not sold yet? Check out all these Features:

  • 4k Upconverting for Static Lines

  • Monetize your stream with retro ad insertion

  • Auto-rewind plugin included (hardware available wherever lesser goods are sold)

  • Auto-unspools the VHS periodically to maintain realism, and continuously delivers to the nearest Interstate median once completely unrolled *Note: This feature cannot be disabled
  • Batteries not included

Interested?

Contact us via fax at 1-888-VHS4YOU, and write the coupon code #aprilfools2018 in a purple sparkly gel pen to receive BIG discounts! Broken printers are standing by.

 

Share this
30 Jun 2017

Mobile Navigation Strategies

If you build it they will come…that is unless they can not find it. The navigation on your website or mobile application is the map your users have to guide them to all of the features and pages you have built. If you have poor navigation your users may not be able to find what they are looking for and it might as well not exist. In this post, we will go over a few good mobile navigation strategies, how to use them and common mistakes developers make when implementing their mobile menus.

The Side Bar Menu

Let’s start with the sidebar menu. The sidebar menu is a simple solution for navigation on a responsive website. The sidebar menu starts off as a top bar navigation, once the browser size reaches a specified width the navigation transforms into an icon that can be clicked to toggle a sliding menu. This menu is easy to install and customize.

Below is an example of the sidebar menu.
Sidebar Menu

 

Advantages

  • The sidebar menu allows the user to view a portion of the content on the page they have navigated to without closing the menu. This happens because part of the page is exposed when the menu is opened.
  • AngularJS Material SidebarIf the menu you are using has sub-menu items the sidebar menu is probably the best fit for your project. The sidebar menu allows for drop downs to be embedded in the menu. This is why the sidebar is the menu of choice for many UI framework websites like Angular Material that  have a large selection of menu and sub-menu items.
  • The sidebar menu is an easy transition from a full web menu, once the screen is too small for all of the menu items to fit the breakpoint can be set to transition the UI to just a menu icon.

Common Mistakes

  • Setting the breakpoint too late can ruin a users experience on your site. If you are using the sidebar for responsive web design make sure that your media queries are set to trigger the menu before your menu options run out of room and collapse to the next row. In the example below, the break point is set to small and the menu overflows out of the menu bar. To avoid this make sure you test at different screen sizes. If you add additional items to your menu be sure to go back and test again.

Sidebar with incorrect breakpoint

Sidebar with correct breakpoint

  • Camouflaging the menu icon is a common mistake designers make when using the sidebar. If your menu icon does not stand out or if it not in a common location the user may not see it. In the example below the menu icon is one of the last things your eye sees. Your eye is pulled to the left corner where the menu button normally is. The extra icons and dull color also contribute to the lack of visibility. Incorrect positioning and sidebar menu focusCorrect positioning and sidebar menu focus
    To avoid this, remember that in the hierarchy of your design the add button and the menu both need to be seen. You should move the menu to its traditional position where users will expect it. You can also make it a bit larger and brighter so it can be seen clearly within the rest of the design.

UI Frameworks with Sidebar Menus

 

Drop Down Menu

Next we will look at the dropdown menu. The dropdown menu is a very common solution for mobile menus. The transition to this design is similar to the sidebar. When the menu items no longer fit in the menu bar an icon replaces the text.This is one of the most commonly used mobile navigation choices because it is easy to create and mobile users have become accustom to this type of menu. You can see an example of the dropdown menu below.

Dropdown Menu
Advantages

  • The dropdown takes up less space than the sidebar menu so users can see more content while navigating. This is why the dropdown is good for smaller amounts of menu options.
  • The dropdown menu has more options for placement. It can come from the center of the page, or pop up from the bottom. The sidebar is limited to the left or the right.

Common Mistakes

  • Dropdown MenuCutting off the menu is a big mistake that can be made with a dropdown menu. Be sure to give your menu enough room to show all of the navigation options. Just like any other element in your design the dropdown needs proper spacing, if all of your other graphical elements are in a grid made sure your dropdown follows the same rules.

UI Frameworks with Dropdown Menus

Tabs Menu

Last, let’s take a look at the tabs menu. The tabs menu shows a few menu options with the currently selected option highlighted or underlined with an accent color. This menu option is good for small menus or for sub-menu options on a main menu page. It is not recommended to use this menu on mobile for your main menu if you have more than four options. This menu requires a minimum amount of space to view the menu options. This style of menu has become popular on applications where multiple sub-pages can be scrolled through on a main page in the application.

Tabs Menu

Advantages

  • The main advantage to using the tabs menu is its simplicity. Applications with just a few options do not need to waste space with large dropdown or sidebar menus when you use this option.
  • The tabs menu does not cover any of the content when you are navigating, so the user can see all of the pages content as soon as they arrive.
  • The most common use case for the tabs menu is to navigate through sub-pages or different types of content in a section of the application. This is used alongside with another menu option like the dropdown or sidebar. You can see examples of this when you look at popular applications like Yelp or Venmo.

Venmo and Yelp Tabs Menu Examples

Common Mistakes 

  • The most common mistake people make with this menu is putting in too many options. If you have too many options on mobile you risk having your menu get cut off.

UI Frameworks with Tabs Menus

Conclusion

There are a number of options to choose from when you are creating the navigation for your project. You need to keep in mind how many options your user will be choosing from, how important it is to keep the page content visible when navigating, and the screen sizes your users will likely be using. These considerations will allow you to choose the most effective navigation for your mobile application.

Share this
16 Jun 2017

Using PhoneGap Plugins to Create a Splash Screen Part Two: Using PhoneGap Plugins

PhoneGap Plugins Logo
Part one of this blog series, Using PhoneGap Plugins to Create a Splash Screen Part One: Creating a Splash Screen discusses how to design splash screens for mobile applications. In this part of the series you will learn how to use PhoneGap plugins to apply the screen you created. PhoneGap provides a series of core plugins that help developers take advantage of a mobile device’s native features such as the camera or ability to vibrate. There are three places you can look for pre built plugins. You can search npm, git repositories or PhoneGap’s plugin repository. In this post you will be using a plugin from PhoneGap’s base repository, the splash screen plugin.

Plugins need to be implemented differently for each platform so you need to be sure to read into how to how apply the one you have selected correctly for the device you are working on. In this example you will be installing the splash screen plugin on an android device.

Step 1) Importing your Plugin

You will import the plugin that you have chosen into your config.xml file. You need to include the plugin name, spec, and source. The spec is your plugin version, your plugin will work without this, but it is highly recommended that you include the version. The source for plugins from the PhoneGap core where the splash screen is located will be “pgb”. The import script for the splash screen will look like this once all of the parameters are added:

<plugin name="cordova-plugin-splashscreen" spec="~4.0.2" source=”pgb” />

Some plugins require you to add in a reference to the javascript files. This is not the case with most PhoneGap core plugins like the splash screen plugin. If you are required to reference the files you will not be adding them into your project when you upload it on PhoneGap Build. The files will be automatically injected by PhoneGap and adding them in advance will cause problems with your build. Read the documentation for your plugin if you are using a different plugin, as mentioned before each one is different.

Step 2) Adding Your Platforms

Once you have loaded in your splash screen plugin you will need to specify the platforms you are targeting. In this example you are using Android. To do this you will add the following code to your config.xml file.

 <platform name="android"></platform>

If you would like to add in other platforms the format is the same. There is no limit on the number of platforms you can use.

Step 3) Add Your Screens

The step is to add in your splash screen files. If you read part one of this post you will be using the png files you created. Nest them into your platform tags. You will have one default screen and a landscape and portrait screen for each pixel density.

    <platform name="android">
        <splash src="splash.png" />
        <splash src="res/screen/android/splash-port-ldpi.png" platform="android" density="port-ldpi" />
        <splash src="res/screen/android/splash-port-mdpi.png" platform="android" density="port-mdpi" />
        <splash src="res/screen/android/splash-port-hdpi.png" platform="android" density="port-hdpi" />
        <splash src="res/screen/android/splash-port-xhdpi.png" platform="android" density="port-xhdpi" />

        <splash src="res/screen/android/splash-land-ldpi.png" platform="android" density="land-ldpi" />
        <splash src="res/screen/android/splash-land-mdpi.png" platform="android" density="land-mdpi" />
        <splash src="res/screen/android/splash-land-hdpi.png" platform="android" density="land-hdpi"  />
        <splash src="res/screen/android/splash-land-xhdpi.png" platform="android" density="land-xhdpi"  />
    </platform>
Step 4) Customize Your Splash Screen with Preferences

Now it is time to customize your splash screen. The splash screen plugin gives you a few different preferences to work with. The following are a few examples that you can use.

SplashScreenDelay
The SplashScreenDelay lets you add a delay to the amount of time before the splash screen is hidden. This is set in milliseconds. It is useful when you want to expose users to your branding but your application has little or no loading time. This can also be set to 0 to force your screen to automatically hide.

 <preference name="SplashScreenDelay" value="3000" />

FadeSplashScreen and FadeSplashScreenDuration
FadeSplashScreen can be set to true to give your screen a fading effect as it transitions to the application. You can set how long this transition takes with fadeSplashScreenDuration, also set in milliseconds.

   <preference name="FadeSplashScreen" value="true"/>
   <preference name="FadeSplashScreenDuration" value="750"/>

ShowSplashScreenSpinner and SplashScreenSpinnerColor
Lastly you should add your spinner. You learned about the parts of a splash screen in the first part of this series. Now is when we add in our spinner. This is set with ShowSplashScreenSpinner. You can also change the color of your spinner to go along with your application by using SplashScreenSpinnerColor.

   <preference name="ShowSplashScreenSpinner" value="true"/>
   <preference name="SplashScreenSpinnerColor" value="#ffffff"/>

Step 5) Add the Splash Screen to your PhoneGap Project

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project. Once you have done this click on Rebuild all. Download the new version of the project to your android device. Open up the application on your phone. You will notice you are now being greeted by your new splash screen!

Feel free to download the example Android APK installer here: http://office.realeyes.com/reblog-downloads/reRealEstate-splashScreen.apk

Share this

© 2019 RealEyes Media, LLC. All rights reserved.