Documentation

You might have read the title and started wondering where is HTML5 video recording. Maybe you are wondering if this is Adobe Flash or the Chrome alternative Flash or maybe wondering what mobile app is being discussed as there are more.

All of this is actually covered here, so let's dig in.

The HTML 5 and WebRTC recording can be seen as one and the same. The Adobe Flash and Chrome alternative Flash just the same. There are some aspects of it that we will mention however more about it in its own section.

WebRTC recording is now the default for Ziggeo. This means you do not need to set anything to use it. This allows you to record the videos through your browser and is generally a great starting point. If the WebRTC is not available for some reason that is fine, because our system has automatic fallbacks to different ways of recording and would then fall back to one of them.

For example Apple development team implemented WeBRTC in such a way in Safari that it only has WebRTC Streaming mode. Our recommended setup allows you to fallback to WebRTC Streaming in such case and otherwise use WebRTC instead.

So what is WebRTC? WebRTC is a browser provided API that allows you to record without any third party plugin. The great benefit of it is that the recording is made within your own codes. Not only does it look good, it also offers more customization and higher control.

Example of recorder with WebRTC:

  <ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="red"
    ziggeo-width="640"
    ziggeo-height="480">
  </ziggeorecorder>

This is a type of recording of its own, however it is built upon the browser recording API aka WebRTC. This is what you would also hear being called as live recording. This means that the videos are being uploaded as they are being recorded.

The great benefit to this approach is that the time it takes to upload the video is reduced to (in theory) recording time.

The downside of it however is that the quality (bitrate) of the video is not something you can choose. The currently available network speed is what will automatically set the quality of your video. While you could set the bitrate that same bitrate would only be used if the network allows it.

This is for example something you would see in live Skype or Slack calls with your team. At some point the videos might just become a wall of pixels returning back to the normal video right after.

This is due to the fact how the WebRTC Streaming (all streaming types of recording) work.

Example of how your app would need to be configured to use WebRTC Streaming:

  var ziggeo_app = new ZiggeoApi.V2.Application({
    token:"APPLICATION_TOKEN",
    webrtc_streaming: true
  });

All recorders will be set with the same options as you set the application. This means that using the above all of your recorders would utilize the WebRTC Streaming. So what if you want to use the WebRTC Streaming on a single recorder only?

For that you would use webrtcstreaming parameter.

Example of how your recorder should be set to use WebRTC Streaming:

  <ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="red"
    ziggeo-width="640"
    ziggeo-height="480"
    ziggeo-webrtcstreaming="true">
  </ziggeorecorder>

Adobe Flash has been around for a very long time. This would usually mean that it is quite stable way of recording and preferred. Unfortunately this is not the case. There are many reasons for this. For example same Adobe Flash versions will react differently on different systems. Sometimes even on the same system they can react in different ways.

The Flash is also easy to be installed however can easily end up not properly registered within the system. It might also require you additional, often non too highlighted steps in your browser to use it.

Next to this Chrome had its own alternative flash that would be turned on instead of Adobe Flash in some cases. While it was designed to offer more security it did cause more bugs.

This leads us to the next point. That is that Flash was reported left and right as insecure so was either not installed or was even blocked on many systems.

As such the Flash recording is not really recommended as the default, however is still a good fallback for older browsers. This means that you do not need to set up anything around it.

There are following parameters that you can use in your recorder when it comes to Flash: forceflash - To force the Flash to always be used flashincognitosupport - Incognito browser sessions will not by default allow Flash, and this parameter makes it possible noflash - To turn off Flash even as a fallback. We do not recommend it unless you have some reason why you would do so.

Example of recorder with disabled Flash:

  <ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="red"
    ziggeo-width="640"
    ziggeo-height="480"
    ziggeo-noflash="true">
  </ziggeorecorder>

Example of recorder where only Flash is used:

  <ziggeorecorder
    ziggeo-theme="cube"
    ziggeo-themecolor="red"
    ziggeo-width="640"
    ziggeo-height="480"
    ziggeo-forceflash="true"
    ziggeo-flashincognitosupport="true">
  </ziggeorecorder>

When you go to some website and want to record a video chance is that you saw your camera app being opened up to do the recording. This is the native camera app being used.

So far it was possible that you or someone else install their own custom camera app and use it instead of the original. This is about to be changed with the camera app being locked in by system instead.

The benefit of the native app is for the customer as they have more control over the recordings. The downside is however that you can not modify it to be part of your layout nor to listen to some parameters you might want to set.

So for example if you require 10 second videos to be sent your way, the camera app might allow 10 minutes of video instead.

This makes the camera app a good fallback if otherwise no video would be recorded, however also something you might want to avoid.

The way you would set if the native camera app would be used or not, would be with your app header like so:

  var ziggeo_app = new ZiggeoApi.V2.Application({
    token:"APPLICATION_TOKEN",
    webrtc_on_mobile: false
  });

The best way would be to avoid WebRTC Streaming unless it is needed (Safari) and use the WebRTC for your recordings. Your Ziggeo application can be initialized in such way that it also uses WebRTC on mobile devices if the mobile device and the browser are capable of the same.

The way this setup would look is as follows:

<link rel="stylesheet" href="https://assets.ziggeo.com/v2-stable/ziggeo.css" />
<script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
  var ziggeoApp = new ZiggeoApi.V2.Application({
    token:"APPLICATION_TOKEN",
    webrtc_streaming_if_necessary: true,
    webrtc_on_mobile: true
  });
</script>

That is it, you are done. Just replace the "APPLICATION_TOKEN" with your actual application token.

All you would do next is to set up the embeddings on your page to match what you want to happen.

Native apps can be created for iOS and for Android. While we look to make the two look and behave similar sometimes there are slight differences. The great thing about recordings with native apps is that you have the most control over how things happen.

The first step is to pick the mobile SDK that you would use to start the recording and then just using few simple codes to get started.

We recommend checking out our mobile SDKs page to find the one you prefer to use.