Portable gear for live video mixing and encoding

Carles Galan Encoding

There are many options for audio and video encoding for live streaming of events, webinars or lectures. In this post I will recommend a few portable solutions in the lower price range.

Before giving any specific recommendation, let me provide some guidelines:

Nowadays Full-HD video sources are widely available and provide a significantly better quality, even for low bit-rate streams, than older analog SD signals.

Webinars usually start with a looping recorded video, a countdown video or simply with a still image along with some (rights-free) music. Speakers also tend to bring along prerecorded videos and presentations that have to be included in the live webinar.

With these considerations in mind, I recommend two basic configurations to make up a good portable mixer/encoder for a few video sources and RTMP encoding.

Portable System 1

  • ASUS Laptop NJ750J
    • RAM 8-16MB,
    • SSD: 256GB+ HD: 750GB
    • NVIDIA GEOFORCE GTX 850M
    • 4 USB 3.0 in two different busses (very important)
  • 2-4 MAGEWEL XI100SDI   SDI-USB-3.0 capture cards
    • Either, 2 cards that work with 2 FullHD sources -one connected at each side (bus) of the computer-, or
    • 4 cards that work with 4 HD sources (720p) for instance.
  • DATAVIDEO DAC-70  is an all in one, very efficient up/down/cross converter
    • we use it to embed analog audio source to an SDI or HDMI video signal, or
    • to convert HDMI to SDI, or
    • to convert VGA to SDI or HDMI
  • VMIX HD video mixing software
  • Adobe Flash Media Live Encoder (free software) Even though VMIX can itself do the encoding, based on the AFMLE classes, we recommend using this encoding option, which will capture the live video and audio feed from by VMIX.

All this plus a few cables and converters will make up a reliable solution at a very good price.

My 3 most valuable suggestions for managing systems like this are:

  1. Carefully set-up your computer turning off any automatic update setting the system might come with.
  2. Use the computer only for this purpose
  3. Have a backup of every piece of the gear (computer, magewel and DAC70)

Portable System 2

VMIX, currently offers a packaged product very similar to this (excluding the laptop computer) (as seen on their website by the end of 2015).

 

Webhooks Developer Guide

Carles Galan API, Webhooks

Overview

Webhooks allow you to collect information about events as they happen in near real-time. Provide a URL, select when and where you want that URL to receive data about events on your list, and we’ll send it to you as the events take place.

For general reading on Webhooks, read the PBWiki Webhooks page.

To test our Webhooks before setting up scripts, the RequestBin tool is an excellent utility that helps you see data come across as various events happen in our system.

Configuring Webhooks

Webhooks are configured from your webcaStudio workspace. There are two possible levels, Workspace-level webhooks and Event-level webhooks.

Creating Workspace-level Webhooks

Account-level webhooks are a collection of events triggered when certain actions happen in your workspace.

  1. Log in to your workspace console
  2. Navigate to Settings
  3. Click Workspace on left side menu
  4. Click Webhooks
  5. Click Add new webhook button

Creating Event-level Webhooks

Event-level webhooks are triggers dispatched when some actions happen in certain webcaStudio’ event.

  1. Log in to your workspace console
  2. Create a new Event or Edit an existing one
  3. Go to Webhooks tab
  4. Click Add new webhook button

Mapping

Mapping feature allows you to configure how the data will arrive to your service. It specially useful when you want to use a generic service for different purposes.

Webhooks types

Webcastudio webhooks will send an object representing the entity in webcastudio which was affected by the action triggered.

These are the possible webhook types:

Event-type

Describes the Event entity.

PropertyTypeDescription
event_idNumberEvent ID
account_idNumberWorkspace ID
event_nameStringEvent title
event_descriptionStringEvent description
event_statusStringEvent status category. Possible values: “live_pending” (green color in console), “od_pending” (blue color), “od_publisehd” (orange color).
event_start_dateStringEvent starting date
event_finish_dateStringEvent finishing date
event_languagesArray of ObjectsEvent languages
  idNumberLanguage ID
  nameStringLanguage short code (e.g. ‘en’, ‘ca’)
  labelStringLanguage description

Session-type

Describes the Session entity. A Session represent a webcast session within an Event.

PropertyTypeDescription
session_idNumberEvent session ID
event_idNumberEvent ID
account_idNumberWorkspace ID
session_nameStringSession name
session_start_datetimeStringSession starting time (including date)
session_finish_datetimeStringSession finishing time (including date)
template_idNumberPlayer template ID
app_versionStringPlayer version
session_live_statusStringSession LIVE status. Possible values:

  • off: Session is offline
  • live_publishing: Session is ready to go live but Audience is not allowed to access yet
  • live_open: Session is live and Audience may access
session_od_statusArray of ObjectsArray of languages produced OD.

NOTE: If an event’ language does not appears in array it is because this language has not been produced OD yet.

  lang_idNumberLanguage ID
  nameStringLanguage short code
  statusStringPossible values:

  • pending: Language produced but not published
  • published: Language produced and published

Supported actions

Event-type triggers

When a Event entity suffers relevant changes an action will be triggered. These are the possible actions may trigger a webhook.

ws.event.create

Dispatched when an event is created. It only affects Workspace-level webhooks.

ws.event.update

Dispatched when an event sufferers alterations in its basic properties, such as description, dates, etc.

ws.event.access_modes_update

Dispatched when an user access mode has been added or removed from an event.

Session-type triggers

Actions triggered when a Session is created or updated.

ws.session.create

Dispatched when a session has been created.

ws.session.update

Dispatched when a session has been updated. For instance, session starting date has been modified.

ws.session.status_update

Dispatched when either live or On-demand status change. For example, when a session goes live.

Webcasting to tablets and phones

Frank Carmona Control-Room (Live Production), Encoding, HTTP Streaming, Mobile

webcaStudio HLS compatible webcasts

 

Summary

WebcaStudio can stream live and on-demand presentations to PC, MAC, and Linux and now also to HLS compatible devices.

HLS stands for Http Live Streaming, and is Apple’s proprietary version of a HTTP streaming protocol. HLS became a temporary de-facto standard whilst open initiatives for a standard HTTP protocol were still under development.  In future webcaStudio versions the video player will be compatible with different HTTP streaming protocols too.

HLS compatible devices are iPAD and some Android devices. In the case of the latter ones the functionality is not always optimal for live events whilst they normally work fine with on-demand contents.

In the case of iPhones the choice of the webcaStudio platform is to stream Audio and Slides.

 

Setting up your account for HLS

In order to enable HLS streaming in webcaStudio you have to contact Vancast and we will upgrade your account and webcast templates for this purpose.

 

Operating HLS compatible events

Once your account has been upgraded, you will notice several changes in the user interface:

  1. Event Management > Edit > Contents >   …. In this page you will find a new content item named “slideshowshtml5”. An explanation on how this works is decribed below in this document.
  2. When accessing the “ControlRoom” to manage a live event you will be asked whether you want your event to be compatible for iOS devices or not. In the case where you tick the checkbox you will be prompted to select two different bitrate qualities for your video and audio streams. Never use a higher bitrate than the one you will choose on the RTMP encoder later.
  3. On the main event management page you will find a new menu item called “transcoders”, where you can monitor your transcoders.

 

Managing Slides for HLS compatible devices

CASE 1: Using JPEG files for the slides

This case is compatible with HLS directly.

CASE 2: Using SWF converted powerpoints

In the case where you use powerpoints converted to SWF files using iSpring you must use the “slideshowshtml5” content item to upload a .jpg version of the slides suitable for HLS compatible devices.

The procedure is:

  1. Upload an SWF file to the “slideshows” content tab, then a new folder with the exact same name of the uploaded file will be automatically created in the equivalent location under the “slideshowshtml5” contents tab.

 

  1. Then, upload a jpg group of slides into that folder. This can be done using the “save as” option in powerpoint. Remember to tick the “Rename PowerPoint produced JPG “ check box in order to correctly organize the numbering of the slides. [powerpoint will create the files like slide1, slide2, … slide11, slide12. and you need them to be slide001, slide002…slide011, slide012…in order to work fine in webcaStudio]

 

Publishing your content in order to create an On-demand version

Two things must be considered:

1.- You must upload the video file in .mp4 format.

If, as an outcome of a live event, you have a .f4v recorded version of your video you must convert it to .mp4 format:

In order to convert your video to mp4 you can use ffmpeg software:

Find below two sample scripts using ffmpeg:

ffmpeg.exe -i input.f4v -c copy -moveflags faststart output.mp4

This script only performs transmuxing (no transcoding)

ffmpeg.exe -i input.f4v -b:v 400k -ss  00:10:50 -moveflags faststart output.mp4

This script forces transcoding the video to a bitrate of 400kbps and also cuts 10 minutes and 50 seconds from the input video

2.- When your live event was streamed in different languages simultaneously

In case you have an event in more than one language that used the left & right audio tracks of a single channel to stream those different languages live, you must convert your original video twice, one for each language. If you’re in this situation please request specific support from Vancast. We will teach you how to do this.

Google Analytics in webcaStudio

Carles Galan API, Stats Leave a Comment

This post covers the usage of Google Analytics with webcaStudio workspaces and events.

Requirements

  • Access to a webcaStudio workspace administration account as Super-Administrator user.

  • A Google Analytics account.

Step 1: Create a Google Analytics Account

In order to start tracking the audience of your webcaStudio’s events with Google Analytics you first need to create a new Google Analytics Account.

Sign in Google Analytics dashboard (https://www.google.com/analytics/) and go to Admin section, then deploy ACCOUNT combobox and click on “Create new account”.

step1

The important field in this page is Website URL. Its value has to be your webcaStudio domain name, for example, vancast.webcasting-studio.net. You also should pay attention on which protocol you choose. Since webcaStudio’s console gives secure URLS by default, choose https:// as Website URL protocol. But if you will deliver no-secure URL to your audience you have to select the option http://.

step2

Click on Get Tracking ID button and accept terms. You will end up on a page that shows your new Tracking ID. Copy it, you will need it later.

Step 2: Create a new Track-ID for your webcaStudio workspace

Once you have obtained a Tracking ID you need to associate it to your workspace.

Sign in your webcaStudio console and go to Settings. In the left menu deploy Workspace settings and open Google Analytics section.

Since your workspace may have more than one Track-ID configured, you can give it a name to identify the Track ID later.

Copy the Tracking ID obtained from Google Analytics Console and press Add. Additionally, you can set a Track ID as default. The default Track ID will be associated automatically to the new events.

step3

Step 3: Associate a Track-ID with an Event

Google Analytics will not track your audience until you associate one of your Track-ID with your event.
Open your Event’s preferences pressing Edit button. Go to Integration tab and deploy Google Analytics section. Select a Track-ID and click on Save button. If there was a default Track ID when you created your event it will have a Track ID associated already.

Now your Audience will be tracked by Google Analytics.

NOTE: Configuring Google Analytics does not disable the standard webcaStudio stats system.

Stop tracking with Google Analytics

If you don’t want Google Analytics track your audience any more you can disassociate a Track ID selecting ‘None’ option in the Integration tab.

How to configure a MailChimp campaing for a webcaStudio webinar

Carles Galan API, SSO Leave a Comment

This tutorial explains how to create a MailChimp campaign to invite your subscriber to assist to a webcaStudio webinar passing along webcaStudio all the subscribers data.

Requirements

  • We suppose you already have experience using both platforms MailChimp and webcaStudio.
  • A webcaStudio account with Super permissions.
  • A PSK created for your workspace

Step 1. Add a MailChimp API Key to your workspace.

First of all, you need to configure your workspace to be able to access your MailChimp data.

  1. Go to your MailChimp dasboard
  2. Click on Account > Extras > API keys
  3. Create a new Key
  4. Copy API Key value
  5. Got to your webcaStudio workspace
  6. Click on Settings > MailChimp API Keys
  7. Give it a name to remember which account is for
  8. Paste the API Key and press Add

You can create any Keys you need and even use several MailChimp accounts for the same webcaStudio workspace.

Step 2. Create a MailChimp List.

WebcaStudio will retrieve user information from a MailChimp list. User object in webcaStudio has 4 fields: Email, first name, last name and organization. Your MailChimp list must have at least this 4 fields (not necessary with these labels).

If you want to use an existing list go directly to step 4.

  1. Go to your MailChimp dashboard
  2. Click on Lists > Create List
  3. Fill list information
  4. Click on Settings > List fields
  5. Make sure your list has at least 4 fields. They usually are: Email, first name, last name, organization or company.
  6. Add or import subscribers

Step 3. Configure MailChimp for your event

  1. Access your event’s Edit page.
  2. Got to the Integration Tab
  3. Open the MailChimp panel
  4. Select one of your MailChimp Keys
  5. Complete the data mapping for the list you want to integrate with. For instance, if your list uses the label Company instead of Organization, replace the ORG tag by COMPANY.
  6. Save your changes

Step 3. Create a MailChimp campaign

  1. Open your MailChimp dashboard
  2. Click on Campaigns > Create Campaign
  3. Select a campaign type
  4. Select a list or segment
  5. Complete the campaign details
  6. Select an email template
  7. In Design view, drag and drop a button element
  8. Leave “Web address” option selected
  9. Place one of the URLs webcaStudio generated in MailChimp integration panel.

WebcaStudio will generate two types of URLs:

Event Program URL: This URL will drive your audience to the Event Program page.

Session URL: With Session URL users will access directly to a session.

All URLs will be replicated for each event’s language.

 

 

 

Skype participant mixed in your webcast encoded video: Problems you may face

Frank Carmona Control-Room (Live Production), Encoding Leave a Comment

My video quality isn’t great…

The advice in the table below can help you to get the best possible video quality. You can also visit Skype’s forum dedicated to video issues or view their Webcam not working on Skype?troubleshooting video.

ProblemResolution
Poor quality webcamWebcams come in many different qualities and prices. Buying a good webcam will benefit the person you are talking to, but if the person you are talking to has a low quality webcam you will still see a low quality image.A good webcam is a prerequisite for good quality video calls. Buy a webcam that’s guaranteed to work seamlessly with Skype from the Skype shop.
Slow or busy internet connectionYou or the person you are talking to may be experiencing problems with video due to a slow internet connection. You should both try closing applications that use the internet (especially those that might be playing music or video) and cancel any file downloads.Make sure that both you and the person you are talking to have theminimum bandwidth required to make a video call.
Weak wireless signalIf you are using a wireless internet connection, ensure that the network signal is strong. If it isn’t, it may be better to connect directly.
Computer running slowlyDo you or the person you are talking to have a lot of programs open? Try closing some of them and see if that makes a difference to your video.If you’re using a laptop, you may have problems with video calls when it’s in power saving mode. Change your computer to AC power or switch your computer to maximum performance.Make sure that both you and the person you are calling are using computers that have the minimum system requirements to run Skype.
Bad lightingIf the room you’re talking from is quite dark, you’re probably not sending great picture quality to the person you’re on a video call with. Try turning on more lights or opening the curtains. Also, try not to sit with your back to a sun-lit window or bright lamp. This will cause your face to be in shadow and result in a poor picture. For best results the light source should be shining on your face from behind the webcam.
Too many USB devices plugged inYou may not be sending great video because you’re using other USB devices. Try disconnecting them or try connecting your webcam to an alternative USB port. If your webcam is plugged into a USB hub, try plugging it into a USB port on your computer instead and see if that helps.
Relayed internet connectionMake sure your connection is not relayed. Skype is designed to work with any network configuration; however, in the case of a restrictive firewall between two connecting computers, the connection will be routed through a relay. In that case bandwidth will be limited by the relay and the quality of your video will be affected.
Firewall or virus scanner problemsYour firewall or virus scanner may be causing connection problems. Try disabling all local firewalls and virus scanners for the duration of the call.
Using an older version of SkypeMake sure that both you and the person you are calling are using thelatest version of Skype. If you’re not sure, it’s easy to find out what version of Skype you are using.
Restart neededIf you or the person you are talking to have updated your system, for example if you have installed or uninstalled any programs, you may need to restart your computer.

Embedding webcaStudio player in a web page

Frank Carmona API, SSO Leave a Comment

Introduccion

the tag <iframe>  </iframe> is perhaps one of the simplest and most compatible ways of integrating a player within your webpage.

This Post covers the integration for any of the access systems in webcaStudio

01_AccessModes

Open free and open free registered

Embeding the open free acces URL’s is the simplest way to do it as it requires no programing .

Altough you can embed the whole programe page, the recommended way is to embed the session URL’s.

To do this, click on the session links to get the session URL’s for any of these acccess systems.

02_OpenAcces_sessionURL

Depending on the player Template chosen for this session, dimensions may be different. Observe that dimensions are specified next to each session’s name. In above’s example dimensions are 1018px width and 670px height.

The iframe code is built as follows:


...

<iframe src=”http://dev.webcasting-studio.net/event/?t=MjQ4Zjg5MWQ3YjEzZDc0ODYzMTQ2MjQwZTNhYjcwOGI0YzJmMjI4Yg==&e=686&a=5&pt=878&p=1468” width=”1018” height=”670”>

Alternative text error.

</iframe>

...

In case you want to use the Open Access-Registration Required access mode, the iframe will show up the login page as well. Remember that the aspect of the different pages can be personalized within the “Program” tab

From this point ahead the event cycle live behavior is the same as when you use the URL’s directly within a browser; If the event is not live yet, a landing page with a disabled access button will appear. If the user waits with this page opened, the access button will enable itself automatically as soon as the producer gives the appropriate order either publish live or on-demand

When an event is opened in live or on-demand mode, any user trying to access the event will open it directly in the page where the event session is embedded

Single Sign On

In this case you can not use directly the session’s URL’s as webcaStudio receives user data and URL’s via POST and an iframe works as an embedded window within another, so the browser will use GET for this call.

In order to embed a session’s player using the SSO you must build a small piece of code, “middleware”, which essentially will gather the user info and together with a PSK “Pre-Shared-Key” and some other information make a unique encrypted call to webcaStudio platform. The player will build the same hash to check whether the call is valid or not.

03-SSO_iframe

A PHP middleware sample follows


<?php
// middleware.php
//obtain the unique PSK given by the Platform
$psk = "webcaStudio-PSK";
//gather the logged user information
$user = $_SESSION['session_key']['user'];
//Account_id can be obtained pressing the "info" button next to the explnation of the access sysem on the image above
$account_id = 9999;
//Gather the POST URL from the page above (Can also be obtained via API. See API documentation here)
$url = "https://vancast.webcasting-studio.net/event/?t=MzdiNmE5NDYwZTdlNTFlNjQxODNiNzQ1ZTliODJiMTZjOWZmOGNhYw==&e=901&a=7&pt=1139&p=1982";
$timestamp = time(); //Create a TimeStamp at the call time

//Generating the Hash (Token) fot he secure call
$token = hash_hmac('sha1', $user['email'].$account_id.$url.$timestamp,$psk);
?>
<html>
<head>
<title></title>
</head>
<body onload="submitPost()">
<form id="post-call" action="<?php echo $url ?>" method="post">
<input type="hidden" name="firstname" value="<?php echo $user['name'] ?>" />
<input type="hidden" name="secondname" value="<?php echo $user['lastname'] ?>" />
<input type="hidden" name="email" value="<?php echo $user['email'] ?>" />
<input type="hidden" name="organization" value="<?php echo $user[org] ?>" />
<input type="hidden" name="language" value="" />
<input type="hidden" name="account" value="<?php echo $account_id ?>" />
<input type="hidden" name="proxy" value="" />
<input type="hidden" name="ref_id" value="<?php echo $user['id'] ?>" />
<input type="hidden" name="time" value="<?php echo $timestamp ?>" />
<input type="hidden" name="hash" value="<?php echo $token ?>" />
</form>
<script>
//When the document is loaded we make the POST call
function submitPost(){
document.getElementById('post-call').submit();
}
</script>
</body>
</html>

 

Finaly, we specify the URL to the middleware program within the iframe:


...

<iframe src=”middleware.php” width=”1018” height=”670”>

Texto alternativo en caso de error.

</iframe>

...

User/Password Validation Lists

The system works the same way the OpenAcces- Registration Required works. All webcaStudio intermediate pages are iFramed as well.

 

Final Considerations

WARNING: Some browsers block XHR calls (Internet Explorer 9 and 10) This means that pages gathering registration information within the iFrame could be blocked

Implementation logic is to embed either an open access (which means an open URL) or, in case of private, lead generation or pay per view content, use SSO integrated with a platform that has previously gathered the user info. In any of these scenarios iFrames work in all browsers.

 

 

webcaStudio Compatible Mobile Devices

Frank Carmona Encoding, Mobile, V3.4

Applies to Version 3.4 and newer within Version3

End-user compatible devices

iOS 

  • iOs Version 3.0 and newer
  • Safari Browser

Android

  • Android Version 3.0 and newer
  • Chrome browser

 

Encoding or transcoding settings

iOS

recommended codecs and settings:

  • Video: H264   baseline  (in a MPEG-2 transport stream)
  •  Audio: AAC LC

Click here for a complete reference

Android

recommended codecs and settings:

  • Video: H264   baseline  (in a MPEG-2 transport stream)
  •  Audio: AAC LC

Click here for a complete reference