IntroductionWelcome| 00:04 | Hi, I am Lisa Larson-Kelley, a developer,
instructor and consultant specializing
| | 00:08 | in web video delivery.
| | 00:10 | I am the founder of LearnFromLisa.com
and an Adobe Community Professional.
| | 00:15 | Welcome to Flash Media Server 4.5!
| | 00:18 | In this course I'll get you
started with streaming to Adobe Flash.
| | 00:21 | I'll walk you through installing the
server and I'll introduce you to some
| | 00:25 | common terminology as well.
| | 00:27 | Finally, I'll show you how to stream
video to Apple iOS devices and stream that
| | 00:31 | same video to Android power devices,
and we will do all of this through both
| | 00:36 | conceptual explanations and practical
exercises, giving you everything you need
| | 00:40 | to get started using the exciting
features of Flash Media Server 4.5.
| | 00:44 | We've got a lot of ground to cover, so let's go.
| | Collapse this transcript |
| What you need to know| 00:00 | There are few details you should
be aware of before we get started.
| | 00:03 | We will be running FMS on Windows
7 in 64-bit mode in this course.
| | 00:08 | While this is supported by Adobe for
the development edition of FMS, there are
| | 00:11 | security issues that you should be
aware of and we will need to work around.
| | 00:15 | You need to be running as
administrator, which isn't normally recommended
| | 00:18 | by Microsoft, therefore, I recommend
that you only run as admin when you're
| | 00:22 | developing for FMS and switch back to your
standard permissions when you're finished.
| | 00:26 | If you're concerned about security
issues, you can use a hosted service that
| | 00:30 | specializes in FMS, such as Influxis.com
or Amazon Web Services and follow along
| | 00:36 | with the examples using your hosted server.
| | 00:38 | I also recommend using the latest
version of Flash Player 10.3 or later at
| | 00:42 | least, for the best
compatibility with the exercises.
| | 00:45 | And one important note, for most of
this course we will be testing our apps
| | 00:49 | on the same computer that's running FMS, so
you won't need to do any special configurations.
| | 00:53 | But when we get into the exercises
where we are testing streams on devices, we
| | 00:58 | will need to stream across the network,
rather than just on the computer running FMS.
| | 01:02 | There are three ways you can set this up.
| | 01:04 | You can run FMS on a Web
Server accessible over the Internet.
| | 01:08 | You can use a hosted FMS server, set
up on Amazon Web Services are Influxis,
| | 01:13 | or run FMS on a computer on your local
network, this is how we'll do it in this course.
| | 01:18 | And if you choose to do this, there are a
couple of things you'll need to do to set this up.
| | 01:22 | First you'll need to open up port 1935
on your router, and you'll need to know
| | 01:26 | the IP address of the computer running FMS.
| | 01:29 | This IP address will be part of the URL
that we will use to connect to FMS and
| | 01:33 | stream content as you'll see.
| | 01:35 | If you are just testing everything
locally, localhost will work for your address.
| | 01:39 | This will allow other computers and
devices on your network to connect to FMS.
| | 01:43 | If you have trouble with configuring
your router, I suggest you refer to your
| | 01:46 | router's documentation, as each
manufacturer handles settings differently.
| | 01:50 | My goal for this course is to provide
you with the basics of video delivery and
| | 01:54 | a quick way to get up and
running with Flash Media Server.
| | 01:56 | Unlike my other titles, we won't be
building a full-featured video player or
| | 02:00 | embedding video into a web page.
| | 02:02 | What you will get is a quick-start
guide to one of the most challenging tasks a
| | 02:06 | Web professional can
tackle streaming video online.
| | 02:09 | Let's get started by examining what you
can do with Flash Media Server and why
| | 02:12 | you'd want to use it.
| | Collapse this transcript |
| Using the exercise files| 00:01 | If you're a Premium Member of the lynda.
com Online Training Library or if you're
| | 00:05 | watching this tutorial on a DVD-ROM,
you have access to the Exercise Files used
| | 00:10 | throughout this title.
| | 00:11 | I've got mine here on the Desktop but
you can save yours wherever you like.
| | 00:14 | While this course does not have long
involved exercises, there are some assets
| | 00:19 | available for you to work with, so
you can follow along with the streaming
| | 00:22 | examples, along with the Webcam Broadcast Code.
| | 00:24 | These Exercise Files are
organized by Chapter and then by Movie.
| | 00:29 | We will be playing sample video
files using various delivery methods,
| | 00:33 | creating multi-bit rate playlists and
building a Live Broadcast Application
| | 00:37 | in Flash Professional.
| | 00:39 | In all cases the final files will be
provided to you with the exercise files,
| | 00:43 | so you can check your work, or you can
just use them right away if you want to
| | 00:46 | skip the creation steps.
| | 00:47 | If you are a monthly member or an
annual member of lynda.com, you don't have
| | 00:51 | access to the exercise files, but you can
follow along from scratch with your own assets.
| | 00:55 | Okay, let's get started!
| | Collapse this transcript |
|
|
1. Getting to Know Flash Media ServerWhat is Flash Media Server and why use it?| 00:00 | Flash Media Server is no longer
just a simple streaming server.
| | 00:04 | It now packages video files in
various formats on the fly, integrates
| | 00:08 | peer to peer and real time
communication and enables media delivery to desktops
| | 00:13 | or devices, even iOS, all of this and more is
possible with this powerful server software.
| | 00:19 | There are a lot of inherent benefits
to streaming video with FMS, rather than
| | 00:22 | simply serving it using Progressive Delivery.
| | 00:25 | You use less bandwidth, unlike
progressive delivery, streaming only transfers
| | 00:29 | the bits that are being watched.
| | 00:31 | Progressive requires you to buffer or
preload the video data to achieve smooth playback.
| | 00:35 | So you are sending a lot of
information that may never actually be watched.
| | 00:39 | Streaming is more secure, none of
the video data is cached on the client
| | 00:42 | computer when it's streamed
over RTMP, it is cached when using
| | 00:46 | Progressive Delivery.
| | 00:47 | This means the viewer has your video
on their hard drive, viewers can seek
| | 00:51 | freely unlike Progressive Delivery when
the video can only jump to a keyframe.
| | 00:55 | FMS creates keyframes on-the-fly, so viewers
can accurately seek to any point in a video.
| | 01:01 | Dynamic Streaming allows you to
detect the viewers' available bandwidth
| | 01:04 | and their processing power, and deliver
them the most optimized version of the stream.
| | 01:08 | I will show you how this
is done in upcoming lessons.
| | 01:11 | You can set up custom logging and
analytics with FMS, to track data such as
| | 01:15 | viewer interaction and quality of
service metrics, that's very difficult to do
| | 01:19 | with simple progressive delivery.
| | 01:21 | There are various stream protection
options available with FMS, from encrypted
| | 01:25 | RTMP to SWF verification, to Flash
Access File Encryption and even New
| | 01:30 | Protective Streaming.
| | 01:31 | Now we won't get into too much detail
about these features, but just know that
| | 01:36 | they are available to you in FMS, if
you really need to lock down your streams.
| | 01:40 | And finally, the big benefit to upgrading
to FMS 4.5 is new support for iOS streaming.
| | 01:46 | So now, for example, you can ingest
one live stream into FMS and deliver that
| | 01:51 | stream to Flash Player in the Browser,
AIR on the Desktop, Flash Player on
| | 01:54 | Android, and HLS streams to iOS
devices, such as the iPad and iPhone.
| | 02:01 | Now for the specifics, FMS runs on
Windows and Linux, and is now 64-bit only.
| | 02:07 | Versions prior to 4.5 will
also run on 32-bit systems.
| | 02:12 | There are four editions, Flash Media
Streaming Server, which is an optimized
| | 02:16 | build that lets you sufficiently stream
media files and live broadcasts, to both
| | 02:21 | Flash and iOS, and this has
a lower price point of $995.
| | 02:27 | Flash Media Interactive Server
is the full-featured build of FMS.
| | 02:31 | It not only gives you the features of
the streaming server, but also supports
| | 02:35 | enhanced content protection, multi-way
communication applications, server side
| | 02:39 | recording and other
enhanced features such as DVR.
| | 02:43 | Now in 4.5, you also get Multicast
and Peer-to-Peer features and this
| | 02:48 | allows applications such as video chat,
voice over IP, text chat, and multiplayer games.
| | 02:54 | Flash Media Enterprise
Server is the premium edition.
| | 02:57 | As its name implies, it's targeted to
larger companies, as you can see by the
| | 03:01 | price, and this has all the bells
and whistles, including Multicast and
| | 03:05 | Peer-to-Peer with higher limits.
| | 03:07 | Then there is the Flash Media
Development Server and this one has all the
| | 03:10 | functionality of the Enterprise Server,
but, limits you to 10 simultaneous RTMP
| | 03:16 | connections and 10 Peer-to-Peer connections.
| | 03:19 | It's notable however that the user
agreement does allow you to use the
| | 03:22 | development server for production,
and this will let you use it for
| | 03:26 | applications, such as kiosks, things
like that, or you would not generally need
| | 03:30 | a lot of connections, or you could
use it as an origin server, or you could
| | 03:34 | broadcast a single stream out to a
CDN or a Content Delivery Network for
| | 03:40 | delivery to a larger audience, and this
is the server we will be installing in
| | 03:43 | this course and it's a
free download from adobe.com.
| | 03:46 | Now in this course we will be
installing and testing streams locally, but when
| | 03:50 | you're ready to start streaming
publicly over the Internet, you'll need to run
| | 03:54 | FMS on a publicly accessible web
server, rather than set this up yourself,
| | 03:59 | another option is to choose a
hosting service that supports FMS.
| | 04:02 | Now Adobe has partnered with Amazon to
release Flash Media Server for Amazon
| | 04:07 | EC2, and this is a hosted version of
the Enterprise Server that lets you pay as
| | 04:13 | you go for the full enterprise features.
| | 04:15 | Does require a number of complex
configuration steps to get it set up, so while
| | 04:20 | it's a good solution for full-featured
scalable streaming, it does require a
| | 04:24 | bit of a commitment.
| | 04:25 | And as of right now, FMS 4
.5 is not yet available.
| | 04:30 | There are also other hosted
options if you just want to get up and
| | 04:33 | streaming quickly, and one that I
highly recommend for their service and
| | 04:37 | pricing is Influxis.com.
| | 04:39 | They offer Flash Media Interactive
Server and Flash Media Enterprise Server
| | 04:44 | hosting for an affordable monthly fee,
and there's no complicated configuration.
| | 04:48 | You just signup for an account, and
you can start streaming right away.
| | 04:51 | Now the main selling points of FMS
include, multiple video delivery methods,
| | 04:57 | live and on-demand streaming via
RTMP, HTTP dynamic streaming, which is
| | 05:03 | referred to as HDS.
| | 05:05 | HTTP live streaming, which is also
referred to as HLS, and if that's all just
| | 05:10 | acronym salad to you right now,
don't worry, we'll cover all the details.
| | 05:14 | Just in time packaging of streams,
this means you don't need to convert your
| | 05:18 | video files into the right format for each
delivery method, FMS will do this for you.
| | 05:23 | Integrated real time interactivity,
you can not only stream video and audio,
| | 05:27 | but also data with FMS.
| | 05:29 | This lets you create multiplayer games,
shared whiteboards, text chat and more,
| | 05:33 | right alongside your video.
| | 05:35 | Content protection, as I mentioned
earlier, there are many ways to protect your
| | 05:39 | content with FMS, and tracking and
logging, FMS gives you finite control over
| | 05:44 | audience measurement.
| | 05:46 | And that gives you a good overview of the
benefits of FMS and what editions are available.
| | 05:51 | Now let's look a bit closer
at the new features in FMS 4.5.
| | Collapse this transcript |
| What's new in Flash Media Server 4.5?| 00:01 | Next, let's look specifically at the
new features introduced in Flash Media
| | 00:05 | Server 4.5, HLS Streaming and Real
Time Video File Packaging among others.
| | 00:10 | The biggest new feature is the
ability to stream video to Apple devices
| | 00:14 | using HLS Streaming.
| | 00:16 | This is supported with both
on-demand and live streams.
| | 00:20 | Now this isn't flash on the iPhone.
| | 00:23 | What FMS actually does is converts a
video file or an RTMP stream into a format
| | 00:29 | that can be played on iOS.
| | 00:31 | That format is MPEG TS and it's
delivered via HTTP Live Streaming or HLS.
| | 00:39 | It also automatically extracts the audio
file which is required for App Store approval.
| | 00:44 | This is similar to Adobe's HTTP
Dynamic Streaming or HDS, but the file format
| | 00:50 | isn't exactly the same, so
they are not interchangeable.
| | 00:54 | Both are delivered over HTTP and both
break the video into small fragments that
| | 00:59 | are delivered to the media player
and reassembled in the correct order.
| | 01:03 | And both support adaptive streaming
where you can detect the user's bandwidth
| | 01:07 | and deliver an appropriate bit rate stream.
| | 01:09 | But HLS will only play nice with Apple
and that's in its native iOS player, in
| | 01:14 | Safari, or in the QuickTime player.
| | 01:16 | And HDS only works in Flash.
| | 01:19 | I'll cover this more in
depth in an upcoming chapter.
| | 01:22 | The next big new feature is also
related to HTTP delivery, real-time packaging
| | 01:28 | of existing files for HDS and HLS delivery.
| | 01:32 | In the previous version of FMS, when
you wanted to deliver a video using HDS,
| | 01:37 | you had to prepare each video file
in advance, by running it through the
| | 01:40 | f4fpackager after encoding.
| | 01:43 | And this was an extra step in your workflow.
| | 01:45 | Now in FMS 4.5, this extra step
is handled for you automatically.
| | 01:51 | When someone requests a video over
HDS, the f4fpackager will package that
| | 01:56 | existing MP4 file into the
correct format on the fly.
| | 02:00 | The same process will happen for
HLS delivery to iOS devices as well.
| | 02:05 | Packaging of the stream to an MPEG TS
format is handled for you on the fly, for
| | 02:10 | both live and on-demand streams.
| | 02:13 | This is a feature that really makes
FMS shine, allowing you to reach lots of
| | 02:17 | different devices without
extra steps in your workflow.
| | 02:20 | The next exciting new feature
is Protected HTTP Streaming.
| | 02:24 | This is a scaled down version of Adobe
Flash Access that's been integrated in with FMS.
| | 02:30 | You can use it to encrypt your video
files and play certain business rules, such
| | 02:34 | as setting a 24-hour window for video playback.
| | 02:38 | This is good for special
events and other premium content.
| | 02:41 | Another long-awaited feature is
support for SIP-enabled devices.
| | 02:46 | This will allow you to connect
people using Adobe Flash or AIR apps to
| | 02:51 | conference rooms, mobile phones, or
other SIP enabled communication services.
| | 02:56 | Now this was previously part of
Flash Media Gateway and has now been
| | 03:00 | integrated right in with FMS.
| | 03:03 | Now I won't be covering the specifics of
SIP or Protected HTTP Streaming in this
| | 03:08 | course, but advanced users will
find details in the FMS documentation.
| | 03:13 | The next feature is
important for enterprise customers.
| | 03:16 | You can now ingest a
source stream via multicast.
| | 03:19 | This is an important improvement in live
broadcast efficiency on closed networks.
| | 03:24 | And finally, FMS is now optimized
to run on 64-bit operating systems.
| | 03:29 | This lets FMS take advantage of the
speed of 64-bit architecture and improves
| | 03:33 | the overall performance of the server.
| | 03:35 | There is still a 32-bit
development server available, but it's not
| | 03:38 | recommended for production.
| | 03:40 | Now that we've talked about what's new
in FMS 4.5, let's move on to a higher
| | 03:44 | level look at how video is delivered
on the Flash platform, and get you up to
| | 03:48 | speed on all of these different
delivery methods that we have available in FMS.
| | Collapse this transcript |
|
|
2. Understanding the Delivery ProtocolsUnderstanding the Real-Time Messaging Protocol (RTMP)| 00:00 | Before we dive into installing the
server and streaming, I think it's important
| | 00:04 | to take a step back and understand the
ways that video can be delivered using
| | 00:08 | Flash Media Server, as all of the
acronyms can get pretty confusing.
| | 00:12 | In this chapter, I'll give you an
overview of each delivery method and how it
| | 00:16 | works on Flash Media Server.
| | 00:18 | The best place to start is with the
original Flash Streaming Protocol, RTMP.
| | 00:23 | RTMP stands for Real Time Messaging Protocol.
| | 00:27 | It's a TCP based protocol that Adobe
developed for streaming audio, video, and
| | 00:33 | data, between Flash Media
Server and Flash Player.
| | 00:36 | A two way connection is opened
between the two and this allows them to
| | 00:40 | communicate in real-time back and forth.
| | 00:42 | The data they exchange can be
prerecorded or live video and audio, or it
| | 00:47 | could even be data such as text chat or X and
Y coordinates of players in a multiplayer game.
| | 00:52 | RTMP is a great solution to stream media and
share data between clients who have Flash Player.
| | 00:58 | Here's a bird's eye view of how RTMP works.
| | 01:01 | First, the Flash Player SWF contacts
the FMS server and an RTMP connection is
| | 01:06 | opened between them.
| | 01:07 | Then the Flash Player
requests a specific video stream.
| | 01:11 | This could be a prerecorded stream,
which is stored on the FMS server itself or
| | 01:15 | a live stream that's being broadcast
either from another connected Flash SWF or
| | 01:20 | from a Flash Media Live Encoder.
| | 01:23 | Once FMS receives the request for the
stream, it's sent directly to the Flash
| | 01:27 | SWF over the RTMP connection.
| | 01:30 | The same stream can be sent out to
any number of clients who request it,
| | 01:33 | provided the FMS server and its network
have the bandwidth to deliver all of the
| | 01:37 | simultaneous streams.
| | 01:39 | Additional FMS servers can be chained
together to increase capacity and allow
| | 01:43 | for very large events.
| | 01:45 | Later in this course, we'll get our
hands on the VOD and live services on FMS
| | 01:50 | that let us quickly start streaming both live
and on-demand video over RTMP to Flash Player.
| | 01:56 | Next, let's look at HTTP
Dynamic Streaming or HDS.
| | Collapse this transcript |
| Understanding HTTP Dynamic Streaming (HDS)| 00:00 | HTTP Dynamic Streaming or HDS is a
relatively new delivery method added to Flash
| | 00:07 | Media Server and Flash Player.
| | 00:08 | It's Adobe's answer to Apple's Adaptive
Streaming and Microsoft's Smooth Streaming.
| | 00:14 | It allows you to deliver video and
audio over standard HTTP connections, rather
| | 00:19 | than Adobe's proprietary RTMP, and
it lets you adapt the stream to the
| | 00:24 | appropriate bit rate for
the client's connection speed.
| | 00:27 | To deliver video over HDS, it
must be formatted in a certain way.
| | 00:31 | The video file needs to be segmented
into smaller pieces called fragments.
| | 00:36 | These files will have the extension f4f;
| | 00:39 | a manifest file is also needed.
| | 00:41 | This is a file that contains basic
information about the video, the location of
| | 00:45 | each of the fragments, and what
order they should be streamed in.
| | 00:48 | Both the f4fs and the f4m manifest file
are created in a process called packaging.
| | 00:54 | A common question I hear about HDS is
if it's streaming over a standard HTTP
| | 00:59 | connection, why do I need a media server at all?
| | 01:01 | Well, that's a good question.
| | 01:02 | Technically, you don't.
| | 01:04 | But FMS has some valuable features that
make streaming video over HTTP more efficient.
| | 01:09 | And that now includes real-
time packaging of content.
| | 01:12 | You don't need to package your Flash
video files for HDS delivery in advance.
| | 01:16 | The same files and streams that you
use for RTMP can be packaged in real time
| | 01:21 | for delivery over HTTP.
| | 01:23 | Let's take a look at this workflow by
looking at how a live stream is captured,
| | 01:27 | packaged, and played back with HDS.
| | 01:29 | In this scenario, first a live stream
is captured in Flash Media Live Encoder
| | 01:34 | and then sent to the Live
Packager Service on FMS.
| | 01:38 | And this is a pre-built application
that now ships with all editions of FMS.
| | 01:42 | There the live stream is packaged
automatically in real time, creating the
| | 01:47 | fragments and the manifest file.
| | 01:48 | Then when someone wants to watch this
video stream, their video player SWF
| | 01:52 | requests the f4m manifest file.
| | 01:55 | FMS sends it to them.
| | 01:56 | Then based on the information in the
manifest, the SWF then starts asking for
| | 02:01 | f4f in video fragments and
then starts playing them.
| | 02:05 | On-demand streams are packaged and
accessed in the same way with fragments and
| | 02:08 | the manifest being created
and cached when requested.
| | 02:11 | Later in the course we'll set up both
an on-demand stream and a live stream to
| | 02:15 | deliver video over HDS to Flash Player, so
you can see this process in action. Okay.
| | 02:20 | So that gives you an overview of the basic
workflow for streaming over HDS to Flash Player.
| | 02:25 | Next, let's look at how FMS can now
deliver that same stream to Apple iOS using
| | 02:31 | HTTP Live Streaming.
| | Collapse this transcript |
| Understanding HTTP Live Streaming (HLS)| 00:00 | The most exciting new feature in Flash
Media Server 4.5 is clearly the ability
| | 00:05 | to stream your videos to iOS devices.
| | 00:08 | While you lose any of the custom real-
time interactivity you might have added to
| | 00:12 | your Flash-based application, you can
get your video to play everywhere without
| | 00:15 | doing any extra encoding or setting
up additional specialized servers.
| | 00:19 | As of the date of this recording and
I'm confident that this will be true far
| | 00:23 | into the future, Apple's iOS
devices do not support Flash.
| | 00:27 | To make sure that people on iPads,
iPhones, and iPods can view your live or
| | 00:31 | on-demand streams, you need to
deliver them in a native format.
| | 00:35 | And that format is called
HTTP Live Streaming or HLS.
| | 00:39 | Now this can be confusing because the
word live is in the name, but it also
| | 00:43 | supports on-demand streams.
| | 00:45 | So you can just kind of think of live as
real-time conversion, so the video file
| | 00:49 | or stream is being converted live in
real-time to the HLS format by FMS when
| | 00:55 | it's requested by the client.
| | 00:57 | This packaging happens using the same
workflow we saw in HDS in the previous
| | 01:01 | lesson, only the file
formats are different for HLS.
| | 01:05 | Let's look at a diagram so you
can see this process at a glance.
| | 01:08 | In this scenario, again, we're
capturing a live stream in Flash Media Live
| | 01:12 | Encoder and this can be the same
instance of FMLE and the same stream that we're
| | 01:16 | using for our Flash stream.
| | 01:18 | And as this stream is sent to the Live
Packager Service, FMS packages it for
| | 01:23 | both HDS and HLS as needed.
| | 01:26 | For HLS, an MPEG TS stream is packaged,
consisting of TS files and an m3u8 manifest.
| | 01:35 | Apple calls this file a
playlist and Adobe calls it a manifest.
| | 01:39 | Then when someone on an iOS device wants
to watch this video stream, their video
| | 01:43 | player application will
request the m3u8 playlist.
| | 01:47 | FMS sends them the m3u8 file.
| | 01:50 | Then based on the information in the
playlist, the video player then starts
| | 01:54 | asking for TS video
fragments and starts playing them.
| | 01:58 | HLS streams can be played in the native
video player on iOS or can be embedded
| | 02:03 | in a Web page using the HTML5 video tag.
| | 02:06 | For more information, the fantastic
course called HTML5 Video and Audio in Depth
| | 02:11 | that explains the ins and outs of
delivering video natively in the browser.
| | 02:15 | And later in the course, we'll get some
hands-on experience with HLS streaming
| | 02:18 | live and on-demand to iOS devices.
| | 02:21 | This gives you an overview of how you
can repurpose your streams for delivery to
| | 02:25 | iOS devices using HLS on FMS.
| | 02:29 | Next, we'll look at one more
delivery method supported on FMS,
| | 02:32 | Multicast Streaming.
| | Collapse this transcript |
| Understanding multicast and peer-to-peer streaming| 00:00 | In addition to HDS, HLS, and RTMP, there
is one more acronym you need to know, RTMFP.
| | 00:07 | RTMFP or Real Time Messaging Flow
Protocol is the technology that makes
| | 00:12 | peer-to-peer communication and
multicast streaming possible.
| | 00:16 | First, we'll take a look at peer-to-
peer networking on the Flash platform, and
| | 00:20 | then I'll show you how it can be used in
the enterprise to lower bandwidth usage
| | 00:23 | with multicast streaming.
| | 00:25 | RTMFP allows clients to connect
directly to one another to exchange
| | 00:29 | video, audio, or data.
| | 00:31 | This direct communication minimizes
the load on the server and lowers your
| | 00:35 | bandwidth costs, because the
server is only used to make the initial
| | 00:38 | introductions between peers.
| | 00:40 | As powerful as peer-to-peer
applications can be, it's a more advanced topic, so
| | 00:45 | we won't be building a peer-to-peer
application in this up and running course.
| | 00:48 | You should know how it works
though, so here's a simple scenario.
| | 00:52 | First, a person who wants to share
video or data will connect to the
| | 00:55 | introduction service on FMS.
| | 00:58 | FMS then stores their network address
and adds them to a specific peer group.
| | 01:02 | As other people connect to the
introduction service, they're added into the peer
| | 01:06 | group and their network addresses are
provided to other members of the group.
| | 01:10 | FMS then steps out of the way and
lets the clients communicate directly.
| | 01:14 | The FMS server and network don't have
to serve the video files or handle the
| | 01:18 | network traffic after
the introductions are made.
| | 01:20 | RTMFP also powers Adobe's
Multicast Fusion technology.
| | 01:25 | Multicast is a way to deliver video to
massive audiences within an organization
| | 01:29 | while keeping the load
on the network manageable.
| | 01:32 | Imagine an all-hands meeting
being broadcast to a large company.
| | 01:35 | Their internal network would
quickly come crashing down if thousands or
| | 01:39 | hundreds of thousands of people were
to tune into the broadcast all at once,
| | 01:43 | because with traditional streaming,
the video data would have to be streamed
| | 01:47 | directly to each one of them.
| | 01:49 | Multicast Fusion solves this problem
using peer-to-peer connections along with
| | 01:53 | special multicast-enabled network hardware.
| | 01:56 | Peer-to-peer connections are used to
deliver to those outside of the network
| | 02:00 | and multicast-enabled hardware is used to
efficiently stream to people at their desks.
| | 02:04 | This approach is best for large
organizations broadcasting both internally and
| | 02:09 | externally and is a huge step forward for
delivering media to large audiences in Flash.
| | 02:13 | When Multicast Fusion was first
introduced in 2010, Adobe used it successfully
| | 02:18 | broadcast their MAX Conference to a
massive worldwide audience, as well as
| | 02:23 | internally to Adobe employees.
| | 02:25 | Now let's look at how it would have
worked for the scenario I just mentioned
| | 02:28 | where some clients are on the internal
network and some are tuning in over the Internet.
| | 02:32 | First, the publisher broadcasts the live
stream to FMS using Flash Media Live Encoder.
| | 02:37 | Then this multicast stream is
sent through the network to a
| | 02:40 | multicast-enabled router.
| | 02:43 | When clients want to watch
the stream, they connect to FMS.
| | 02:46 | FMS then makes peer introductions.
| | 02:49 | Once the introductions are made,
clients are connected together either over a
| | 02:52 | multicast or peer-to-peer over RTMFP
and they share the video stream data
| | 02:58 | directly among the group.
| | 02:59 | As you can see in this case, there's
very little traffic flowing through the
| | 03:02 | router or the FMS server.
| | 03:04 | Most of the load is shared among the peers.
| | 03:06 | Hopefully, these examples demonstrate
clearly how multicast and peer-to-peer
| | 03:10 | networking can significantly
reduce the demand for server bandwidth.
| | 03:13 | This can open up a new range of
possibilities for video chat and other
| | 03:16 | real-time media applications that may
have previously been impractical, because
| | 03:21 | of bandwidth costs.
| | Collapse this transcript |
| Choosing a delivery protocol| 00:00 | Now that you've gotten a crash course
on the delivery methods available with
| | 00:03 | Flash Media Server, you may be
wondering how to choose which one to use.
| | 00:07 | In this lesson, I'll give you the
best use cases for each and make some
| | 00:10 | recommendations to help make the decision easy.
| | 00:13 | Let's start with RTMP.
| | 00:15 | There are lots of advanced features
available with this tried and true delivery
| | 00:18 | protocol that you can't get with the others.
| | 00:20 | With RTMP, you can stream live from a
webcam directly in the browser, record
| | 00:25 | video streams on the server;
| | 00:27 | create richer applications that use
server-side ActionScript, use the various
| | 00:32 | logging and administration features
built into FMS, combine video streaming with
| | 00:37 | real-time communication in the same application.
| | 00:40 | And it also features inherent content
protection using encrypted streaming and
| | 00:45 | Flash Access, so it can be much more secure.
| | 00:48 | And it has inherent content protection,
encrypted streaming, and Flash Access
| | 00:52 | support, so it can be very secure.
| | 00:55 | There are also a couple of
reasons you may not want to use RTMP.
| | 00:58 | Sometimes RTMP traffic is
blocked by the server administrator.
| | 01:02 | Flash isn't supported on iOS, so your
custom applications won't run there.
| | 01:07 | So RTMP is great for most
streaming needs and for creating real-time
| | 01:11 | communication applications such as
chat rooms and multiplayer games.
| | 01:16 | Next, we'll look at HTTP
Dynamic Streaming or HDS.
| | 01:20 | HDS is a very efficient delivery
method for both live and on-demand streams.
| | 01:25 | It's great for high-definition video
and video to devices, where you'll need to
| | 01:29 | switch to lower quality streams.
| | 01:31 | Since it streams over standard HTTP
connections, you can avoid the traffic
| | 01:35 | blocks you might get with RTMP.
| | 01:37 | You can serve the streams from a
standard HTTP server, so you may be able to
| | 01:42 | save some money on server costs, since
HTTP servers are much more common and
| | 01:47 | easier to maintain than media servers.
| | 01:49 | Protected HDS is now available in FMS 4.5,
allowing you to encrypt your video files.
| | 01:55 | It's like a Flash Access light, giving
you content protection without the need
| | 01:59 | for a Flash Access License Server.
| | 02:01 | One potential drawback to HDS is that
you need a special video player to parse
| | 02:06 | the manifests and piece together the fragments.
| | 02:09 | Open Source Media Framework and
Strobe Media Player, both open source and
| | 02:13 | free, support this logic.
| | 02:15 | So you can use those as a starting point.
| | 02:18 | And HDS is not supported in
older versions of Flash Player.
| | 02:21 | Then there is HTTP Live Streaming.
| | 02:25 | HLS is not supported in Flash, only on iOS
devices and Safari and QuickTime on the Mac.
| | 02:31 | It has the same benefits as HDS;
| | 02:34 | it supports high-quality, live, and
on-demand streaming and is hosted and
| | 02:38 | delivered over standard HTTP connections.
| | 02:41 | To stream live and on-demand video to
iOS devices, you'll want to use HLS and
| | 02:46 | FMS can package HLS
streams alongside HDS streams.
| | 02:51 | So it's not an either/or situation,
you can use both side by side.
| | 02:55 | Protected HLS is now available in
FMS 4.5, allowing you to add the same
| | 03:00 | protection you have on your HDS streams.
| | 03:03 | The one downside is that
HLS is a video-only solution.
| | 03:07 | To add the interactivity you could get
with a Flash application, you'll need to
| | 03:10 | build a custom iOS app. Next is Multicast.
| | 03:14 | Multicast is a very
specialized delivery solution.
| | 03:17 | It's the obvious one for enterprise,
especially those with networks enabled
| | 03:22 | with multicast support.
| | 03:24 | It can also be useful for multiplayer
gaming as well as video streaming, because
| | 03:29 | it provides very low latency.
| | 03:31 | Other good uses include inter-office
videoconferencing, companywide broadcasts,
| | 03:36 | even Real-Time Financial or News Tickers.
| | 03:39 | And finally, there is RTMFP,
Adobe's peer-to-peer protocol.
| | 03:44 | RTMFP has similar use cases to RTMP.
| | 03:48 | Both RTMP and RTMFP deliver live and on-
demand video, audio, and data streams.
| | 03:55 | They both provide low,
latency real-time communication.
| | 03:58 | You can use either one to power
applications such as videoconferencing, text
| | 04:02 | chat, live broadcasts,
multiplayer games, and even live support.
| | 04:07 | RTMFP however is a natural choice for
real-time communication in streaming when
| | 04:12 | you need massive scale.
| | 04:14 | It eliminates the need for huge
server farms and network infrastructures to
| | 04:18 | share large amounts of data.
| | 04:20 | RTMFP applications can be quite
complicated to develop though, and the developer
| | 04:24 | community around it is currently pretty small.
| | 04:27 | So the learning curve in getting
an RTMFP app going can be steep.
| | 04:31 | So hopefully that gave you some
guidance in choosing the right delivery method.
| | 04:36 | Next, let's review some key terms and
concepts that you'll likely run into when
| | 04:39 | publishing video with Flash Media Server.
| | Collapse this transcript |
|
|
3. Learning the Terminology of Streaming MediaWhat is a codec?| 00:00 | What is a Codec?
| | 00:02 | Codec is short for Coder/Decoder and
refers to the process of taking raw
| | 00:07 | data and compressing it.
| | 00:08 | The formula the encoder uses to
compress the data is referred to as the Codec.
| | 00:13 | For example, Flash uses H.264, VP6 and
Sorenson Spark for video, an AAC, Speex
| | 00:21 | and MP3 and also Nellymoser for audio.
| | 00:24 | AAC audio does require an extra
license when used for live streams and we'll
| | 00:28 | discuss that later when we
set up our live video example.
| | 00:31 | Now different Codec's compress the
data in different ways, so video file
| | 00:35 | compressed using H.264 may have a
smaller file size than a VP6 video, but the
| | 00:41 | image quality might be about the same there
can be other differences in Codecs as well.
| | 00:45 | For example, VP6 supports an alpha
channel for video transparency, where H.264
| | 00:51 | does not, but you can take advantage of
hardware acceleration with H.264, not so with VP6.
| | 00:58 | Since HDS and HLS streaming only work
with videos that use H.264 for video
| | 01:04 | and AAC for audio, that's what we'll
use for all of the video examples in
| | 01:08 | this course.
| | Collapse this transcript |
| Understanding delivery methods| 00:00 | With a wide variety of delivery
methods available on FMS, it's easy to get
| | 00:04 | confused by all the
protocols and streaming methods.
| | 00:07 | Let's take a moment to
define some of these key terms.
| | 00:09 | First, what is a Delivery Protocol?
| | 00:12 | In this course, I refer to
delivery protocols a lot.
| | 00:15 | The technical definition of a
protocol is a set of computer rules that
| | 00:19 | provide uniform specifications, so
that computer hardware and operating
| | 00:23 | systems can communicate.
| | 00:25 | In our usage for video streaming, a
delivery protocol refers to the route video
| | 00:30 | data takes to get to you and the
rules that need to follow to get there.
| | 00:34 | For example, HTTP dynamic streaming
videos are sent over HTTP, and they must
| | 00:41 | be broken into fragments before sending,
then you put them back together for playback.
| | 00:46 | FMS supports RTMP, RTMFP
and standard HTTP protocols.
| | 00:53 | The technical details of these protocols were
discussed in depth in Chapter 2 of this course.
| | 00:58 | Once a delivery protocol is
established, then there are various methods of
| | 01:03 | sending that video data over that connection.
| | 01:06 | Let's look at two of those methods,
Progressive Delivery and Streaming.
| | 01:10 | Progressive Delivery or Progressive
Download is the most basic form of video delivery.
| | 01:15 | The file is served from a standard Web
server through an HTTP request, just like
| | 01:20 | a normal web page or any
other downloadable document.
| | 01:23 | This is the method that sites like
YouTube and Vimeo use for serving their videos.
| | 01:27 | When the video is played using
progressive deliver, the entire video file first
| | 01:32 | begins to download to the viewer's
hard drive and then playback starts.
| | 01:37 | The video will begin to play when
enough of it has downloaded to the
| | 01:40 | viewer's hard drive;
| | 01:41 | this amount is referred to as a buffer.
| | 01:43 | Progressive Delivery although delivered
over the same protocol as HTTP streaming
| | 01:48 | methods, is not as efficient.
| | 01:51 | Streaming delivery consumes less
bandwidth than progressive delivery, because
| | 01:55 | only the portion of the video
that's watched is actually delivered.
| | 01:58 | There are two other downsides to
progressive download that make it less
| | 02:02 | attractive than streaming, it's not
possible to seek to points in the video that
| | 02:06 | haven't been downloaded, and
you can see this here on Vimeo.
| | 02:11 | When I click on this video and start to
play it, I will click forward ahead of
| | 02:15 | the buffer and try to jump to that
point and it won't let me do that.
| | 02:21 | (music playing)
| | 02:30 | And the video data is cached on the
user's computer and could be retrieved;
| | 02:34 | now this is not good for
copyright and sensitive content.
| | 02:38 | So, moving on to streaming, streaming
Delivery is a concept that sometime is misunderstood.
| | 02:43 | The technical definition of streaming
is data being transmitted in a continuous
| | 02:48 | flow while earlier parts are being accessed.
| | 02:51 | Now there are two approaches to streaming,
RTMP is considered to be true streaming.
| | 02:56 | There is an open connection between
the server and the client and then data
| | 03:01 | flows continuously between the two, the
bits are discarded after they're viewed.
| | 03:06 | Then there's HTTP streaming where
video data is requested in small fragments
| | 03:11 | from the server and then put back
together into a stream by the client when
| | 03:14 | it's received, and it plays like a true
stream, and can even support live video
| | 03:19 | with a bit of a delay.
| | 03:21 | One key difference is what happens to
those bits, instead of being discarded
| | 03:25 | as with RTMP streaming, they are cached on the
client, so HTTP streaming isn't as secure as RTMP.
| | 03:33 | There are two formats that support HDTV
Streaming with Flash Media Server, HDS
| | 03:38 | for playback in flash and
HLS for playback on iOS.
| | Collapse this transcript |
| What is a server-side application?| 00:01 | Generally when we refer to Server-Side
Applications we're referring to code that
| | 00:05 | runs on a server rather than in the browser.
| | 00:08 | For our purposes a Server-Side
application is an application that runs on
| | 00:12 | Flash Media Server.
| | 00:13 | Server-Side applications are
ActionsScript communication files and have
| | 00:17 | the extension .asc.
| | 00:19 | The server application is written in
Server-Side ActionScript, which is like
| | 00:24 | ActionScript 1.0, but it runs on
the server, rather than on a client.
| | 00:28 | You can use server-side code for
logging, to control access to applications,
| | 00:33 | perform certain operations when users
connect or disconnect, create playlists or
| | 00:39 | even connect to external data sources.
| | 00:42 | FMS installs with four pre-built Server-
Side applications also called Services
| | 00:47 | and they're here in applications
inside of the Flash Media Server folder, and
| | 00:52 | they are live, live packager, multicast and vod.
| | 00:58 | Each service enables a
different type of streaming;
| | 01:01 | you can create your own custom Server-
Side applications with every edition of
| | 01:04 | FMS, except the streaming server.
| | Collapse this transcript |
|
|
4. Installing Flash Media Development ServerWhat platforms are supported?| 00:00 | In this lesson I'll talk about what
Operating Systems Flash Media Server
| | 00:03 | officially supports.
| | 00:05 | Flash Media Server 4.5 is the first
release of FMS that is strictly 64-bit
| | 00:09 | compatible, previous versions would
run on 64-bit, but in 32-bit mode.
| | 00:14 | Now you must have a 64-bit operating system.
| | 00:16 | The one exception to this is the
development server, it is still offered in a
| | 00:20 | 32-bit version, but Adobe does not
recommend using in production, only for local
| | 00:25 | development, since it's not as
robust as the 64-bit version.
| | 00:28 | The efficiently supported
platforms are listed here.
| | 00:31 | For the demos in this course, I'll be
running Windows 7 Professional 64-bit,
| | 00:35 | and as you'll see during installation,
there are some security issues you'll
| | 00:38 | need to work around.
| | 00:39 | Other than a couple of extra steps to
handle those issues, installation of FMS
| | 00:43 | is really pretty simple.
| | 00:44 | So provided you are on a compatible
operating system, let's go ahead and
| | 00:47 | install FMS.
| | Collapse this transcript |
| Installing Flash Media Server 4.5| 00:00 | In this lesson I'll walk you through the
process of installing Flash Media Server 4.5.
| | 00:05 | We'll install the free
development edition of the server.
| | 00:08 | So first you'll need to download the
installer from adobe.com, you can follow
| | 00:13 | this link and it will take you to the
FMS homepage, you'll then be prompted
| | 00:17 | to enter an Adobe ID.
| | 00:19 | If you don't have one, you can make an
account, and then you can download the
| | 00:23 | free development edition.
| | 00:24 | I have already done this, and
it is in my Downloads folder.
| | 00:28 | Now before you begin installation, be
sure to uninstall any previous versions of
| | 00:34 | FMS that you may have installed, you
want to back up your applications folder if
| | 00:39 | you have any custom applications there,
and also your settings folder, if you
| | 00:43 | made any changes there.
| | 00:44 | Then you can uninstall FMS by following
the instructions in the FMS documentation.
| | 00:49 | Now before we start this FMS installer,
because Windows 7 has some crazy strong
| | 00:55 | security settings, we need to be logged
in as an administrator, or the installer
| | 01:00 | will be blocked from running, it may
not appear to be blocked, but it won't
| | 01:03 | actually install all the elements that we need.
| | 01:05 | Now in my early testing of FMS 4.5,
this was not documented, so I lost a good
| | 01:10 | solid day trying to figure this out, so
hopefully this will save you some time.
| | 01:13 | Then you may think that you're running
as an administrator right now, but in
| | 01:17 | fact, admin access is turned
off by default in Windows 7.
| | 01:22 | So we'll need to run some code on the
command line to be able to run our FMS
| | 01:26 | installer as an administrator.
| | 01:28 | So this is pretty straightforward to do.
| | 01:29 | First thing we do is go to our Windows
menu and start typing commands in the
| | 01:35 | search bar down here and
here's the Command Prompt.
| | 01:38 | Now before we click on it, you want
to make sure you right-click on it and
| | 01:42 | choose Run as administrator, and yes,
we do want to let the following program
| | 01:49 | make changes and here we are on the
command line, and we just need to add a few
| | 01:53 | simple commands here.
| | 01:54 | So we want to type in net user
administrator and then space forward slash
| | 02:03 | active colon yes, so we're activating
the administrator and that command is
| | 02:09 | completed successfully, and there's one more
thing we need to do which is put in the password.
| | 02:14 | So net user administrator, and then
we can type in a password here, and I'm
| | 02:24 | using the password that is currently
being used for my account on this computer,
| | 02:28 | and that command has been completed
successfully, and we now have the permission
| | 02:32 | set that we need to install Flash Media Server.
| | 02:36 | So we can close the command line and we
want to make sure that we quit any other
| | 02:39 | open programs before we begin our
installation, so I still have PowerPoint open
| | 02:44 | here, and we'll close that.
| | 02:46 | We don't just double-click on this,
we also want to run the installer as an
| | 02:50 | administrator, so we'll right-click on
it and choose Run as administrator, and
| | 02:56 | we see the FMS splash screen briefly,
and we did close all other applications,
| | 03:01 | just reminding us to do that.
| | 03:03 | We click Next and now we're being
prompted to agree to the terms, which I will
| | 03:08 | do, Accept the agreement, click Next, and
here we're being asked for our serial number.
| | 03:15 | Since we're installing the development
server, we won't need one, we can just
| | 03:18 | leave this field blank and click Next,
and this screen confirms that we do not
| | 03:23 | have a serial number, so we're just
installing the development edition.
| | 03:26 | So we can click Next, and here we can choose
where to install the FMS files on our computer.
| | 03:33 | The default location on Windows is in
the Adobe folder inside of the Program
| | 03:37 | Files folder, and I recommend just
leaving it at the default, so we'll go
| | 03:41 | ahead and say Next.
| | 03:42 | Now I did previously have a version
of 4.5 on this computer that I had
| | 03:46 | uninstalled and apparently when you
uninstall FMS, it leaves the empty folders
| | 03:51 | behind, so we can just say Yes, we
do want to overwrite those contents.
| | 03:55 | Now we're being asked whether we want
to install an Apache server along with
| | 03:59 | FMS. You will want to do this if you
plan to use HTTP Dynamic Streaming, HTTP
| | 04:06 | Live Streaming, or if you want to
use the default web pages to test your
| | 04:10 | installation, which will be
doing throughout this course.
| | 04:13 | So we'll go ahead and say Yes, by
leaving Apache checked and clicking Next.
| | 04:18 | Here you can decide if you want a
shortcut in the Start menu or if you'd like it
| | 04:21 | to appear elsewhere, you can make
your choice and then click Next.
| | 04:24 | I am just going to leave the default, and
here is where you really need to pay attention.
| | 04:29 | Here you need to enter administrator,
username and password, and you'll need
| | 04:33 | this for logging in into the administration
console, which we will do later in the course.
| | 04:37 | So choose the usernames and
password here and write it down.
| | 04:42 | I will just use admin and
choose a password, and click Next.
| | 04:48 | Finally, you need to specify what
ports you want FMS to use, unless you have
| | 04:52 | a very specific reason for doing so
and you are a server administrator, I
| | 04:57 | recommend using the default ports of
1935.80 for the server and 1111 for the
| | 05:03 | Administration Server, so we'll click Next,
and here we are presented with a summary screen.
| | 05:09 | Everything looks to be in order, so we
can go ahead and start the installation
| | 05:13 | by clicking Install.
| | 05:14 | Now the installation takes a few minutes.
| | 05:17 | Okay, here we have a few more choices;
| | 05:20 | we can launch the start screen, which
I'm going to uncheck for the moment, so
| | 05:23 | we're going to do that
manually in the next lesson.
| | 05:26 | You want to start FMS 4.5 right now,
Yes, we do want to do that, and finally,
| | 05:31 | ask if we want to start FMS when our
computer starts, and I recommend saying Yes
| | 05:36 | to this, so you have FMS launched at
Startup, because you can always turn it off
| | 05:40 | later and it doesn't use up very much
computing power to run in the background
| | 05:43 | when you're not using it.
| | 05:44 | So we'll leave those two
items checked and click Finish.
| | 05:49 | Now FMS is installed, but as I mentioned,
because of the tight security features
| | 05:54 | of Windows 7, there's one last thing
that we're going to want to do to make sure
| | 05:58 | that FMS will run properly
every time we restart our computer.
| | 06:01 | So we'll go ahead and navigate to
where FMS was installed, and that is on our
| | 06:07 | computer, in Program Files,
Adobe Flash Media Server 4.5.
| | 06:13 | Now we want to scroll down to the
actual application files here, and there are
| | 06:20 | four of them, FMSAdmin,
FMSCore, FMSEdge and FMSMaster.
| | 06:27 | These four we want to have always run
as administrator, so we'll have to choose
| | 06:32 | each one individually and change
a setting here under Properties.
| | 06:37 |
| | 06:37 | Under Compatibility, we want to always
run this program as an administrator.
| | 06:41 | Now this is checked for us right now,
but we just want to double check that each
| | 06:47 | one of these is indeed set to run as
administrator every time it starts up.
| | 06:51 | So we'll say OK, this one is as well,
and I think all four will be, and if you
| | 07:08 | do not have this checked, then when
you do restart your computer, FMS and the
| | 07:14 | Apache server that are installed along
with it may not run correctly, so we are
| | 07:18 | all set with these files, and we
are all set with our installation.
| | 07:21 | Now that was pretty easy and now that we
do have FMS installed, we are ready to
| | 07:26 | move onto the next lesson, where we'll
test our installation to make sure it's
| | 07:30 | ready to start streaming.
| | Collapse this transcript |
| Testing your installation| 00:01 | Okay, so we have now installed
FMS and we're ready to test it out.
| | 00:05 | In this lesson I'll introduce you to
your new best friend, the Flash Media
| | 00:09 | Server start screen and we'll verify
that FMS is successfully installed and
| | 00:14 | running, by testing RTMP and HTTP
streams, as well as a Live Webcam Capture.
| | 00:21 | Now that we have FMS installed.
| | 00:22 | How do we know that it's actually working?
| | 00:24 | Well, it used to be that we had to go
into Flash, write a simple application
| | 00:29 | that opened up an RTMP connection, and then
try to play a video, and that was a big pain.
| | 00:34 | So thankfully, Adobe has created a
preconfigured web page called the Flash Media
| | 00:39 | Server Start Page, and this page allows
you to instantly know if FMS is running,
| | 00:45 | and it let's you test a variety of
different streams and protocols, including
| | 00:49 | grabbing a Webcam and testing that out.
| | 00:51 | It really is a simple, but invaluable tool.
| | 00:54 | Now you will need the most recent
version of Flash Player and at the time of
| | 00:59 | this recording that's 10.3.
| | 01:01 | So this start page is located here
inside of the webroot folder, in our Flash
| | 01:06 | Media Server install folder.
| | 01:08 | So I'll open up webroot,
and it's actually index.
| | 01:12 | So this means this is our
default page for our Apache Web Server.
| | 01:16 | We can launch it a couple of different
ways, one, I could just double-click on
| | 01:20 | it, or you can go down to your browser
here and I have Internet Explorer, and
| | 01:25 | you can type in localhost http://
localhost, and it will launch this page.
| | 01:38 | So here if the video plays for you, you are
in business, FMS is installed and running.
| | 01:43 | If you get an error message, there is a
problem with your installation, or FMS
| | 01:48 | is simply not running.
| | 01:49 | So you can try relaunching FMS manually,
and then reloading this page, and I'll
| | 01:54 | show you how to do that.
| | 01:55 | You just go down to your window
and navigate to FMS, under All
| | 02:00 | Programs>Adobe>Flash Media Server and here
we can manually start and stop the server.
| | 02:06 | So if you started up, you go back to
this page and reload it, and you still
| | 02:10 | don't have video, you're going to
want to refer to the FMS documentation
| | 02:14 | for additional help.
| | 02:16 | So the start screen lets you test
various protocols and sources, from HTTP
| | 02:21 | Dynamic Streaming to RTMP Dynamic
Streaming, and even HLS, which won't work of
| | 02:27 | course in this browser, but
it will work on Apple devices.
| | 02:31 | We'll get deeper into that in
upcoming lessons, so for the purposes of this
| | 02:35 | lesson, it's safe to assume that HLS
is working, since the other methods are.
| | 02:39 | So we'll take a look at these, starting
with the RTMP, which is what we just saw.
| | 02:42 | We watched a single bit-rate of that.
| | 02:45 | Let's look at the Single
Bit-rate of HTTP streaming.
| | 02:53 | That one is indeed working as well and
you'll see we have these nice new graphs
| | 02:57 | that they've added which let us know
the Current Frame Rate and the Buffer Size
| | 03:02 | and these can be really handy for
troubleshooting and refining your encoding.
| | 03:05 | So let's switch over now to the Interactive
tab and here we're going to access my webcam.
| | 03:12 | And it's asking me first for my
permission, which I will give, I'll say, Allow,
| | 03:17 | and here we are, and we can see that I
can immediately Publish this if I like,
| | 03:22 | and Play it back right here in
the start screen, it's very simple.
| | 03:26 | So let's go ahead and do that and you'll
see what we're doing here, this is kind
| | 03:30 | of cryptic probably at this point, but
we're using the live service to do this,
| | 03:34 | and I will be demonstrating this later on.
| | 03:38 | So, we'll Publish that,
and then we can Play it back.
| | 03:44 | And there it is, and there is a bit of a
delay, not much, and we are streaming a
| | 03:49 | live video from webcam right here, ready to go.
| | 03:54 | So now that we know FMS is running
properly, it's time to dive into working with
| | 03:58 | streams and applications.
| | Collapse this transcript |
|
|
5. Streaming On-Demand Video with RTMPWhat is the VOD service?| 00:00 | FMS ships with an application called the
VOD service, which you can use to start
| | 00:05 | streaming video files right away
without any server-side code or configuration.
| | 00:09 | This is the service that the FMS start
page uses to play that very first sample
| | 00:13 | video we saw when we
tested our FMS installation.
| | 00:16 | The VOD service is a pre-built application
that lets you stream video files over RTMP.
| | 00:21 | FMS applications are stored in the Flash
Media Server folder under appropriately
| | 00:26 | enough applications.
| | 00:27 | Since you'll be needing to access
this folder a lot, you might want to take
| | 00:32 | a moment to create a shortcut for it on
your desktop or in the favorites in Windows.
| | 00:35 | Now once we're here in the
applications folder, you'll see the VOD service.
| | 00:39 | The directory structure of this
application is slightly different from other
| | 00:43 | applications, as you'll see later when we
build our own custom application from scratch.
| | 00:46 | So inside of VOD folder here you see we
have a folder called media, and this is
| | 00:51 | where you put the video
files that you want to stream.
| | 00:53 | Inside here are some sample videos
that we use to test our installation back
| | 00:58 | on the FMS start page.
| | 00:59 | So here is a diagram of
how the VOD service works.
| | 01:03 | First, you put the videos into the
media folder, when a SWF file such as, Flash
| | 01:08 | Media playback requests that video, it
first opens up in RTMP connection, to
| | 01:12 | the FMS server, then once connected, it
requests the specific video file from the VOD service.
| | 01:19 | FMS then streams that video over RTMP
to the client SWF and the video plays.
| | 01:23 | Now just to get the hang of how VOD service
works, let's copy our own video here for testing.
| | 01:31 | In the supplied Exercise Files for
this lesson, you'll find explore02.f4v.
| | 01:36 | Let's copy that over to the
applications>vod>media folder.
| | 01:41 | So inside of 05_01, here it is, and
I'll right-click and Copy that, and then
| | 01:47 | over here in the vod>
media folder, I will paste it.
| | 01:51 | Now remember, we are inside of
the program files folder, so we need
| | 01:54 | administrator access to copy things here.
| | 01:56 | So I'll go ahead and hit Continue, and
of course, you can use your own video
| | 02:01 | here instead of our sample, just make
sure that it's in a Flash compatible
| | 02:05 | format, such as, FLV or F4V.
| | 02:06 | Now that you've seen how the VOD service
works and copied the video to the right
| | 02:11 | place, we're all set up to stream a video.
| | 02:14 | All we need now is a video player application.
| | 02:17 | Luckily for us, Adobe has
packaged a sample video player with FMS.
| | 02:20 | Next, we'll use it to play the video,
we just put in this vod>media directory.
| | Collapse this transcript |
| Streaming an on-demand video via RTMP in a sample player| 00:00 | Now that we've placed our video into our
vod>media directory, we're ready to play it.
| | 00:05 | FMS ships with a sample video player
we can use for testing, saving us a lot
| | 00:09 | of time and effort.
| | 00:10 | This video player is actually a
version of Strobe Media Playback, a free
| | 00:14 | open-source video player
that was built by Adobe.
| | 00:17 | Let's go ahead and stream
our video using that player.
| | 00:19 | So you can find it here inside
of the Flash Media Server folder
| | 00:23 | samples>videoPlayer.
| | 00:26 | And we can just double-click on video
player and it opens it in our browser.
| | 00:29 | It will play the sample video.
| | 00:30 | We'll pause that, and now we can scroll down
to enter our own URL that we'd like to stream.
| | 00:38 | So in this case we do want to use the
RTMP protocol and it is also localhost,
| | 00:43 | because everything is running here
locally, vod service, and mp4, but we need to
| | 00:49 | put this before any F4V videos,
FLVs don't need this, explore02.f4v.
| | 00:58 | Now we can click Play Stream.
| | 01:01 | (video playing)
| | 01:10 | And it's that simple.
| | 01:11 | Now as I said we're working on a
locally running Flash Media Server, so this
| | 01:15 | stream and the video player
itself are not accessible over the web.
| | 01:19 | This is fine for learning FMS, but when
you're ready to stream videos out to the
| | 01:22 | world, FMS will need to be on the web-
accessible network, and your video player
| | 01:27 | application needs to be on a web server.
| | 01:28 | In that case, you'd enter the domain
name, or IP address of the server that's
| | 01:33 | running FMS, instead of localhost,
and that might look something like this.
| | 01:37 | Here fms.learnfromlisa.com is where
FMS is running, and we're using vod and
| | 01:43 | pointing to our video.
| | 01:45 | For more information about publishing
video and creating video players for web
| | 01:49 | video delivery, you can refer to my
other lynda.com course, Publishing Video on
| | 01:53 | the Flash Platform, where I cover this in-depth.
| | 01:56 | As you can see, streaming on-demand
video with FMS is pretty easy to do
| | 01:59 | right out of the gate.
| | 02:00 | Next, let's look at how to configure
a multi-bitrate RTMP stream one that's
| | 02:04 | optimized to the viewers connection speed.
| | Collapse this transcript |
| Publishing multi-bitrate on-demand streams via RTMP| 00:00 | No matter how much you plan and optimize,
you can't guarantee that your videos
| | 00:03 | is going to stream flawlessly to every viewer.
| | 00:06 | Their Internet connection speeds
fluctuate and they often multitask stealing
| | 00:10 | bandwidth away from your stream.
| | 00:12 | One way to alleviate this problem is by
using Dynamic Streaming, also referred
| | 00:16 | to as Adaptive Streaming.
| | 00:18 | Dynamic Streaming detects changes in
viewers' bandwidth and switches among
| | 00:22 | streams of different bitrates giving them the
highest quality they can handle at that moment.
| | 00:28 | Flash supports both RTMP
and HTTP dynamic streaming.
| | 00:33 | In this exercise, I'll show you
how to set up RTMP dynamic streaming
| | 00:37 | for on-demand content.
| | 00:40 | The first step is to create a list of
available video bitrates in a format
| | 00:44 | that our video player
application can understand.
| | 00:46 | In almost all of the exercises in this
course, we are using a player based on
| | 00:50 | the Open Source Media Framework or OSMF.
| | 00:53 | OSMF provides all the logic for
reading our lists of bitrates.
| | 00:57 | Detecting in the bandwidth of the player
and deciding which video they will get.
| | 01:01 | It listens constantly for changes in
connection speed and can switch back and
| | 01:05 | forth seamlessly between bitrates when needed.
| | 01:08 | If you build a player from scratch
rather than using an OSMF-based player,
| | 01:11 | you'll have to handle
all of this logic yourself.
| | 01:14 | The list of bitrates that we pass in
for dynamic streaming is saved in an f4m
| | 01:19 | file, special XML file format.
| | 01:22 | So let's start by opening up our explore-
rtmp.f4m file included in this lesson's
| | 01:28 | exercise folder and we'll
take a look at how it structured.
| | 01:31 | Now I'm going to open this up in
Dreamweaver, but you can use any text editor.
| | 01:35 | First, we're specifying the document
format, Adobe calls these multi-bitrate
| | 01:40 | playlists manifests, but I try to refer
to them as playlists, to avoid getting
| | 01:45 | them confused with the manifest files used in
packaging HTTP streams, which is a different thing.
| | 01:51 | Next, we tell the player
that this is Dynamic Streaming.
| | 01:54 | We set a baseURL for each of the
streams and then tell the player what Type of
| | 01:59 | file this is, if it's live or recorded.
| | 02:02 | Finally, we enter the
URLs of each bitrate video.
| | 02:06 | Note that if these are f4v files,
we'll need to add MP4 before the file name.
| | 02:10 | We then tell the player what the
bitrate is for each file and this is why I
| | 02:15 | always recommend tagging the
bitrate onto your file names.
| | 02:18 | Even though it might seem like a bit
of a hassle sometimes, it's certainly
| | 02:21 | better than having to analyze a video
later, trying to find out its bitrate.
| | 02:25 | So this is our dynamic streaming playlist.
| | 02:28 | Now we can put it into the webroot of
our FMS server, so let's do that now.
| | 02:35 | Here in our exercise files I will Copy
it, and then we'll navigate to the right
| | 02:39 | place, Flash Media Server>webroot,
and it needs to go into the vod folder.
| | 02:47 | Here I will Paste it, and we'll continue to
allow this copy here into the program files.
| | 02:55 | And the next thing we need to do is
upload our video files to the right place
| | 03:00 | and I have three of them here, the
ones that we just had in our list, 500
| | 03:03 | kilobits, 1000 kilobits, and 1500 kilobits.
| | 03:06 | So we'll go up two levels here to
applications, because this is RTMP streaming,
| | 03:12 | we want to put it right into the vod
folder, inside of our applications.
| | 03:17 | And I will select all three of these,
Copy them, and we want them to go into media.
| | 03:24 | So I'll open this folder up, and Paste them in.
| | 03:27 | Okay, so our video files are in place
and our multi-bitrate playlist is in
| | 03:36 | place, now we go to our sample player.
| | 03:40 | Go back up to samples>videoplayer and
double-click on our videoplayer, which
| | 03:47 | will launch it in a browser.
| | 03:48 | Pause that default video, and now
scrolling down here we can now enter the
| | 03:54 | URL for our playlist.
| | 03:56 | This is http, because it's being
served from the webroot, localhost, because
| | 04:02 | it's local, and vod,
because it's in the vod folder.
| | 04:06 | and then finally the file name. f4m.
| | 04:10 | Okay now, we can go ahead and play the stream.
| | 04:13 | we'll just click on Play Stream.
| | 04:14 | (Tom Mueller: Welcome to this week's episode
of Explore California. I'm your host,)
| | 04:19 |
(Tom Mueller, and this week we're
going to take you on a tour of--)
| | 04:23 | Now when I noted that playlist, the
player detected my bandwidth, decided which
| | 04:27 | video it would be best for me
and started playing that one.
| | 04:30 | And because everything is running
locally here, I'm sure that this is the
| | 04:33 | highest bitrate video.
| | 04:35 | So you've now played a single on-
demand stream and configured multi-bitrate
| | 04:39 | RTMP dynamic streaming.
| | 04:41 | Next, let's set up a
broadcast and test out live streaming.
| | Collapse this transcript |
|
|
6. Streaming Live Video with RTMPWhat is the live service?| 00:00 | Next, we look at the Live Service,
which you can use to start streaming live
| | 00:04 | from a webcam right away without
any server-side code or configuration.
| | 00:08 | This is the service that the FMS start
page uses, to broadcast and Play Live
| | 00:12 | Stream under that interactive tab there.
| | 00:14 | Like the VOD Service, the Live Service is a
pre-build application that ships with FMS.
| | 00:20 | And it supports standard RTMP streaming.
| | 00:22 | So the structure of the live
application directory on FMS is slightly different
| | 00:27 | than with a custom application.
| | 00:28 | Let's take a quick look at that.
| | 00:32 | So inside of Flash Media Server,
applications, live, now you see here there's no
| | 00:37 | need for a streams or a media directory
since the stream is created dynamically
| | 00:41 | when you start to capture.
| | 00:42 | Unless you specify otherwise, that
stream is not stored on FMS it just passes
| | 00:47 | through to connected viewers.
| | 00:48 | And if you're familiar with other video
delivery platforms, you may have heard
| | 00:52 | this called a Publishing Point.
| | 00:53 | So lets take a look at a diagram of how
the Live Service actually works on FMS.
| | 01:00 | First, the broadcaster has an encoding
workstation setup that's getting video
| | 01:04 | data from a Webcam or a capture card,
and is running encoding software such as
| | 01:08 | Flash Media Live Encoder.
| | 01:10 | In the software, they connect the FMS
over in RTMP connection, and then begin
| | 01:14 | sending a Live Stream to the Live Service.
| | 01:17 | Then when a viewer opens up a video
player application in Flash Player and
| | 01:21 | requests that stream from the Live
Service, the stream begins to play.
| | 01:25 | So that's a high-level
view of Live Streaming on FMS.
| | 01:28 | That workflow being understood, we
are now ready to start broadcasting and
| | 01:32 | playing a Live Stream.
| | Collapse this transcript |
| Streaming a live video from your webcam| 00:00 | In this lesson, we will broadcast a
Live Stream from a webcam over FMS using
| | 00:05 | Flash Media Live Encoder.
| | 00:07 | For this exercise, you should have
Flash Media Live Encoder 3.2 or later,
| | 00:11 | installed, and have a webcam or other
video input connected to your computer.
| | 00:16 | Flash Media Live Encoder is a free
download available from Adobe.com, and there
| | 00:20 | are both Mac and PC versions available.
| | 00:23 | This software will capture the video
image from a connected device such as a
| | 00:27 | webcam, video camera or other
hardware, such as the capture card.
| | 00:31 | It then takes that video and encodes it
into a Flash compatible format and sends
| | 00:35 | that stream to FMS, where it's
broadcasted to the viewers.
| | 00:38 | So let's get started.
| | 00:39 | I will go ahead and open
up Flash Media Live Encoder.
| | 00:41 | Then you will see that it automatically detects
any connected video sources and audio sources.
| | 00:51 | And when you launch Flash Media Live
Encoder, you'll probably see some previews
| | 00:55 | up here of your webcam, I like to
turn those off, because they are kind of
| | 00:58 | distracting, but just to see now I am here.
| | 00:59 | So I will turn that off and we can
configure various settings here, our bitrate,
| | 01:08 | our Format, Frame Rate and so on, and
you notice that we are using VP6 and MP3,
| | 01:12 | because we will be broadcasting an FLV file.
| | 01:14 | And you can also configure up to three
different files with different bitrates
| | 01:18 | and sizes and encode them all simultaneously.
| | 01:22 | This allows you to use RTMP Dynamic Streaming
| | 01:24 | to be sure the viewer gets the
appropriate bitrate stream for their
| | 01:27 | available bandwidth.
| | 01:28 | And we will be doing this in an upcoming lesson.
| | 01:30 | And I do address all of these
encoding settings in more depth in my course,
| | 01:34 | Publishing Video on the Flash Platform.
| | 01:36 | But for the purposes of this exercise,
we will just stick with the default
| | 01:39 | encoding settings now.
| | 01:40 | So over here on the right, we tell
the encoder where to send our stream.
| | 01:45 | We want to send it to FMS running
locally, and we will use the Live Service.
| | 01:49 | So here we will enter the RTMP address,
localhost/live and we will give our
| | 01:55 | stream the name, livestream.
| | 01:57 | You can also save the stream to a
file here on your local machine.
| | 02:00 | This is good for archiving and backups, but
be sure you don't fill up your hard drive.
| | 02:04 | You can set limits to file size and
duration, which will definitely help
| | 02:08 | avoid that problem.
| | 02:09 | And finally, you will see this little check
box down on the lower right, DVR Auto Record.
| | 02:13 | That allows viewers to pause
and rewind the Live Stream.
| | 02:17 | And that is a more advanced feature,
so we will leave that unchecked.
| | 02:19 | The first thing we want to do is connect
FMS to be sure that we have the correct
| | 02:24 | URL and that FMS is running.
| | 02:25 | So we will click Connect, and
we can see down here that we are
| | 02:31 | successfully connected.
| | 02:32 | So we are now ready to start our stream.
| | 02:35 | I will go ahead and click Start, and
we immediately get some feedback here in
| | 02:40 | the log, then are video and
audio encoding has started.
| | 02:44 | So I am now broadcasting my webcam to the Live
Service on FMS, running on my local computer.
| | 02:49 | So now how do I view the stream?
| | 02:51 | Well, we just need a Video Player application.
| | 02:53 | And in the next lesson, we will switch
over to our trusty sample Flash Video
| | 02:57 | Player and view our broadcast.
| | Collapse this transcript |
| Testing your live RTMP stream in a sample player| 00:00 | Now that we have a Live Stream being
encoded in Flash Media Live Encoder and
| | 00:03 | being broadcast by FMS, we can
view it in a Video Player Application.
| | 00:08 | In this lesson, we will turn again to
our Sample Video Player that ships with
| | 00:11 | FMS for testing, and then we'll
switch to broadcasting in F4V, so you can
| | 00:17 | understand how the URL is
handled differently from an FLV.
| | 00:20 | So let's go ahead and navigate to our
Sample Player, so we will minimize our
| | 00:25 | Encoder, and in the Flash Media Server 4.5
folder, under samples, there is our
| | 00:31 | videoplayer, we will open that up and
we can double-click the videoplayer to
| | 00:35 | launch, and we will pause that default video.
| | 00:40 | And now we can just enter the URL of
our Live Stream, so rtmp://localhost and
| | 00:50 | it's using a live service and
our stream name is livestream.
| | 00:54 | And you can click Live here, it
doesn't seem to really make a difference, but
| | 01:00 | it always feels good to click Live,
and I am going to go ahead and Play this
| | 01:04 | Stream now, and you'll notice there a
couple seconds delay, so I won't keep it
| | 01:07 | on the screen for too long here.
| | 01:17 | Now we can go back into our Encoder,
and we want to make a change to our video
| | 01:24 | format, just to show you how it's done here.
| | 01:27 | So I will Stop our encoding, and we
are going to encode an F4V this time.
| | 01:32 | So we need the H.264 codec
for video and AAC for audio.
| | 01:39 | And one note about audio codecs in
version of Flash Media Live Encoder after 3.2
| | 01:45 | on the PC, AAC may not be an option for you.
| | 01:48 | It will need to be purchased from
main concept as an add-on, due to
| | 01:52 | licensing restrictions
| | 01:54 | If you do your encoding on a Mac
however, you may have AAC available as
| | 01:57 | it's part of QuickTime.
| | 02:00 | Now in order for us to successfully play
this H.264 video, we need to tag mp4 at
| | 02:06 | the beginning of our stream.
| | 02:08 | And this let's FMS know what type of
stream is coming in and that's all we need
| | 02:11 | to do, now we can click Start and we
will see that we are indeed successfully
| | 02:17 | encoding video and audio, and we
can switch back to our Videoplayer.
| | 02:28 | And we will enter the URL to
this video, it's very similar,
| | 02:31 | rtmp://localhost/live service, but this
time we tag mp4 at the beginning of our
| | 02:39 | file name, so it's mp4:livestream, and
again, I will test this out real quick.
| | 02:56 | So that was an H.264 video.
| | 02:58 | So it was a little higher quality than the VP6.
| | 02:59 | So you have now successfully setup
and tested a Live Stream using the
| | 03:04 | Live Service on FMS.
| | 03:06 | As you can see, it works nicely with
Flash Media Live Encoder and is fairly
| | 03:09 | straight forward to set up.
| | 03:11 | When you're ready to broadcast to the
world, you would embed a videoplayer
| | 03:14 | SWF, such as Flash Media Playback into your
web page and use that to play your Live Stream.
| | 03:19 | I covered this in more depth in my other
course, Publishing Video at the Flash Platform.
| | 03:24 | Next, let's see how we can
provide smoother playback by using RTMP
| | 03:28 | Dynamic Streaming.
| | Collapse this transcript |
| Publishing multi-bitrate live streams via RTMP| 00:00 | Earlier in the course, we configured RTMP
Dynamic Streaming for on-demand content.
| | 00:05 | This allowed us to deliver multiple-
bitrate streams and have our Flash Video
| | 00:09 | Player detect the viewers bandwidth and
then give them the best stream that they
| | 00:13 | can play at that moment.
| | 00:15 | Now we are going to do the
same thing for a Live Stream.
| | 00:17 | First, we will need to make a quick
change in our encoding settings in FMLE.
| | 00:21 | So back here in the Encoder,
over here we can choose to
| | 00:26 | encode multiple-bitrates.
| | 00:28 | Let's encode 200, 500 and 800.
| | 00:30 | So using the dropdown menu here we can
choose 200, and then we check this box
| | 00:39 | and we will do 500 and finally, 800.
| | 00:44 | You can also mix Output sizes as well
but, I want to keep them all consistent.
| | 00:48 | You will need to have enough bandwidth
to send out all three of these streams
| | 00:52 | at once to FMS and that's definitely an
important consideration, especially, if
| | 00:57 | you're broadcasting on location and don't
have a fast reliable Internet connection.
| | 01:01 | And we need to do one other thing
here that isn't well documented.
| | 01:04 | Each of these three streams
needs to have a unique name.
| | 01:08 | And can have FMLE create these names for
us when we start to broadcast by adding
| | 01:13 | a special character after the file name.
| | 01:15 | So we just add % i, i for integer.
| | 01:20 | And this will create three unique stream names,
livestream1, livestream2, and livestream3.
| | 01:25 | And let's remember that as we go to
configure our playlist, so why we are still
| | 01:30 | here we will go ahead and
click Start and start broadcasting.
| | 01:33 | And now let's take a
quick look at that playlist.
| | 01:37 | In this lessons Exercise
Files, we have rtmp-live.f4m.
| | 01:44 | Go ahead and double-click that
and it will open up in Dreamweaver.
| | 01:47 | You can use any text editor.
| | 01:49 | This is a very simple file, and again,
we have our manifest file type and our ID
| | 01:55 | and our baseURL this time is pointing
to the live service, instead of VOD.
| | 02:00 | We are still using MP4 files and we are
streaming 3 bitrates, 200, 500, and 800.
| | 02:07 | And those file names that are being
created by FMLE, automatically are
| | 02:11 | livestream1, livestream2, and livestream3.
| | 02:14 | Now we are ready to give this a test,
so we will go ahead and close this.
| | 02:18 | And we can copy this file
and paste it into our webroot.
| | 02:25 | To keep our webroot orderly,
let's paste it into the VOD folder.
| | 02:28 | I will right-click and paste so I
paste it in here and now we are ready to
| | 02:34 | go over to our Sample Video Player and test it.
| | 02:36 | So we will go up a couple of levels
to samples>videoPlayer and launch it.
| | 02:46 | Now we just need to enter the
URL of that playlist, and it's
| | 02:51 | http://localhost/vod, and it was rtmp-
live.f4m, these are Live Stream, so we
| | 03:05 | will check Live and Play the Stream.
| | 03:08 | And you should see me again with a
little bit of a delay, so I won't keep it
| | 03:11 | open for too long, let's try it.
| | 03:23 | There was some latency there as you
could see, but it is now an RTMP Dynamic
| | 03:27 | Stream, which will allow our player to
switch bitrates as needed, to keep the
| | 03:31 | stream running smoothly.
| | 03:32 | So you are now familiar with the
various methods of RTMP Streaming,
| | 03:35 | both on-demand and Live.
| | 03:38 | Next, we will get our hands on one
of the newer Flash video technologies,
| | 03:41 | HTTP Dynamic Streaming.
| | Collapse this transcript |
|
|
7. Streaming On-Demand Video with HDSPreparing video files for HDS delivery| 00:00 | In this lesson I get you started
streaming on-demand video over standard HTTP
| | 00:04 | connections with FMS.
| | 00:07 | This is referred to as HTTP
Dynamic Streaming or more concisely, HDS.
| | 00:13 | As I'd mentioned in the introduction to
HDS earlier in the course, FMS has some
| | 00:17 | valuable features that make streaming
video over HTTP more efficient and that
| | 00:21 | now includes real-time packaging of content.
| | 00:24 | Before FMS4.5, you had to preprocess
your on-demand video files, running them
| | 00:30 | through a command line utility that
broke them into fragments and created
| | 00:33 | associated manifest files.
| | 00:35 | And then you upload those
files to FMS for streaming.
| | 00:38 | You can still do it this way but now,
FMS4.5 supports real-time packaging
| | 00:43 | for those fragments.
| | 00:44 | This all happens on the server and you
don't need to add anything to your workflow.
| | 00:48 | There are a couple of requirements
for the video files themselves to be
| | 00:52 | compatible with HDS packaging.
| | 00:54 | They need to use H.264 for the video
codec and AAC for the audio codec and they
| | 01:00 | need to be saved as f4v files.
| | 01:02 | All you need to do is place these f4v
files in the webroot vod directory, in FMS.
| | 01:09 | So FMS ships with these sample files here,
but we're going to place our own video;
| | 01:13 | explore02.f4v here to test.
| | 01:18 | And we'll navigate to our Exercise
Files for this particular lesson, 07_01 and
| | 01:24 | the video file we'll use is explore02,
so we will copy this and go back to our
| | 01:31 | vod folder and paste it.
| | 01:36 | And we do want to confirm copy.
| | 01:38 | Now this is the same video file that
we used earlier in the RTMP example.
| | 01:43 | But it now needs to be here in
the webroot for HTTP Streaming.
| | 01:47 | I did use the same video file so you
could see how the same assets can be used
| | 01:51 | for both RTMP and HTTP Streaming.
| | 01:54 | Okay, so now that our video is ready
for real-time packaging, for playback to
| | 01:58 | Flash Player, let's give it a test.
| | Collapse this transcript |
| Streaming on-demand video via HDS in a sample player| 00:00 | Now that we have our prerecorded video
file from the right place in FMS, we can
| | 00:04 | stream it in Flash Player in a browser.
| | 00:07 | Now we'll use our sample videoPlayer
inside of Flash Media Server Samples
| | 00:13 | videoPlayer, we'll pause the default
video and scroll down to our URL field.
| | 00:24 | And now we just want to enter
the URL of our manifest file here.
| | 00:27 | So its http:localhost, instead of just
VOD we need to specify that we want the
| | 00:35 | packaged version of the stream.
| | 00:37 | So it's hds-vod, and then the file name,
.f4v, and then tag down to the end of
| | 00:47 | this as f4m, to specify that we
want the manifest file for the stream.
| | 00:52 | So we'll go ahead and click Play Stream.
| | 00:54 | (Tom Mueller: Welcome to this week's episode
of Explore California. I'm your host,)
| | 01:00 |
(Tom Mueller, and this week we're
going to take you on a--)
| | 01:03 | So what's happening when we pass this
manifest in, our videoPlayer is grabbing
| | 01:07 | all the information about our stream
from that manifest, and then it begins to
| | 01:12 | request the video fragments it needs
to start playing the on-demand stream.
| | 01:15 | Now remember, unlike RTMP streaming
HTS requires a lot of extra logic in the
| | 01:21 | videoPlayer to interpret or parse the
manifest, and then to properly play the
| | 01:25 | fragments strung together.
| | 01:27 | OSMF based players, such as Flash Media
Playback or Strobe, which is what's used
| | 01:32 | here, have that extra functionality built in.
| | 01:34 | So you've now successfully set up an on-
demand stream using HTS to Flash Player.
| | 01:40 | This will allow you to stream to
Android powered devices, Flash Player and to
| | 01:43 | AIR over standard HTTP connections.
| | 01:46 | For iOS, there are a couple of tweaks
and a different playback method which I'll
| | 01:50 | cover later in the course.
| | Collapse this transcript |
| Publishing multi-bitrate on-demand streams via HDS| 00:00 | HTTP Dynamic Streaming or HDS is an
efficient way to get on-demand video to a
| | 00:05 | wide audience, including mobile
devices that run Flash Player, while still
| | 00:09 | ensuring that they get the right
bitrate stream for their connection speed.
| | 00:13 | This can be especially useful for
devices as they're often on unreliable
| | 00:16 | Internet connections.
| | 00:18 | In this chapter, we'll create a multi-
bitrate playlist to take advantage of
| | 00:22 | this useful feature.
| | 00:23 | The file format for HDS multi-bitrate
playlists is different from the format
| | 00:28 | that we used for RTMP.
| | 00:29 | Because of this, Adobe has included a tool
that helps you create these manifest files.
| | 00:34 | This tool is called the
Set Level Manifest Generator.
| | 00:38 | It has a cryptic name, but what it does
is create multi-bitrate playlists in a
| | 00:43 | new format referred to as a Set Level Manifest.
| | 00:46 | In the past if you had content encoded
at various bitrate that you wanted to
| | 00:50 | use for dynamic streaming, you
would create a single manifest file that
| | 00:54 | contained all of the data needed for playback of
each of the streams and this was a lot of data.
| | 00:59 | Now with new Set Level Manifest support,
you can separate that stream manifest
| | 01:03 | data from the playlist itself.
| | 01:05 | Set Level Manifest contains only the URLs
that point to the manifest for each video stream.
| | 01:11 | This way the Set Level Manifest
can be hosted in one place and the
| | 01:14 | individual stream manifest can be
hosted somewhere else, such as a CDN or
| | 01:18 | other remote server.
| | 01:20 | So let's go ahead and create a Set Level
Manifest using the tool that Adobe has provided.
| | 01:24 | We'll find it in the Flash Media Server folder.
| | 01:27 | Adobe>Flash Media Server, inside of
tools, and it's in the folder called
| | 01:33 | f4mconfig and then inside of that is
configurator, and we want to open up the
| | 01:39 | HTML document, and we'll just double-
click on it and it'll open in our browser.
| | 01:43 | Using this tool, you can add streams to
a multi-bitrate playlist and then save
| | 01:47 | it out in the proper format for HDS streaming.
| | 01:50 | You can then play that file in an
OSMF based videoPlayer and you'll have a
| | 01:54 | video that uses dynamic streaming to
deliver an optimized video bitrate over
| | 01:59 | standard HTTP connections.
| | 02:01 | You can also choose the m3u8 tab to
configure multi-bitrate playlists for
| | 02:06 | streaming to Apple iOS devices.
| | 02:08 | Let's see how this tool works for f4m.
| | 02:11 | First, we will enter our stream names
one at a time into the Stream URI field
| | 02:15 | along with their bitrate.
| | 02:19 | So our streams will be stored on
local host of course, and they're actually
| | 02:23 | going to be in the webroot vod folder,
but because they're being packaged in
| | 02:27 | real-time for HDS delivery, we refer
to the hds-vod folder, and then the file
| | 02:34 | name, explore02_, and our first bitrate
is 500kbps.f4v, and then we tag on f4m
| | 02:45 | at the end, so that it grabs
the manifest for that file.
| | 02:49 | I am going to copy that, because I
want to repeat it three times, and the
| | 02:53 | bitrate is 500, so we can
add that one to our playlist.
| | 02:57 | Okay, now we'll change the bitrate
for this file to 1000, add that to the
| | 03:03 | playlist, and our final stream will be
1500, and add that one to the playlist.
| | 03:12 | Okay, we can now save this manifest,
and we'll call it explore-hds.f4m, and I
| | 03:23 | am saving it here in my Exercise Files
folder along with our videos, and I've
| | 03:27 | included a final version of this manifest
file, so that you can compare it with yours.
| | 03:33 | So we'll go ahead and Save that
there and now we are done with this tool,
| | 03:36 | so we'll close this.
| | 03:37 | And we go to our Exercise Files, and
inside this lesson, here we have are f4m
| | 03:44 |
| | 03:45 | file and our three videos.
| | 03:47 | So we'll select them all,
all four items, Copy them.
| | 03:51 | These are all going to the
same place, the vod folder.
| | 03:55 | So let's navigate there inside of
Flash Media Server>webroot>vod, and we can
| | 04:01 | Paste them here and confirm.
| | 04:05 | We are now ready to play this
HDS file in our sample videoPlayer.
| | 04:11 | So let's navigate to that inside of
Flash Media Server>samples>videoPlayer and
| | 04:22 | we just want to point to that
new file that we just created on
| | 04:27 | localhost/hds-vod/explore-hds.f4m,
and that completes our address.
| | 04:39 | Then go over here, click Play
Stream, and this should play perfectly.
| | 04:44 | (Tom Mueller: Welcome to this week's episode
of Explore California. I'm your host,)
| | 04:49 |
(Tom Mueller, and this week--)
| | 04:51 | So our player is detecting my
bandwidth and choosing the right bitrate stream
| | 04:55 | for my connection speed, which is
pretty fast, since everything is running
| | 04:58 | locally here and it converts that on-the-
fly into an HDS stream, and then starts
| | 05:03 | sending me the fragments and playing the video.
| | 05:06 | So you are now familiar with the process
of setting up multi-bitrate streams for
| | 05:09 | delivery of on-demand over HDS.
| | Collapse this transcript |
|
|
8. Streaming Live Video with HDSSetting up Flash Media Live Encoder for HDS broadcast| 00:00 | Now that we've gotten a look at the
simple steps involved in delivering
| | 00:03 | on-demand video over HDS, we'll move on
to Live Streaming, and you'll be happy
| | 00:07 | and maybe even a little surprised to
hear that the workflow is even easier.
| | 00:12 | Let's go ahead and Stream Live from Flash
Media Live Encoder to a client SWF over HDS.
| | 00:17 | In previous releases of FMS, Live HDS
Streaming was handled on-the-fly as it is
| | 00:23 | today, but with FMS 4.5 that same
stream can now automatically be packaged for
| | 00:29 | delivery to Flash in HDS and
iOS in HTTP Live Streaming.
| | 00:34 | Like in our Live RTMP exercise, we'll be
using Flash Media Live Encoder or FMLE.
| | 00:40 | Now before we open up FMLE,
we'll need to make one change to its
| | 00:44 | configuration file.
| | 00:45 | Now this configuration folder is inside
of Program Files, so we'll need to open
| | 00:50 | up our Text Editor or in my case
Dreamweaver as administrator to be able to edit it.
| | 00:55 | We'll confirm.
| | 00:57 | Now we'll open up this configuration
file and it can be found inside of Program
| | 01:03 | Files (x86) and it's in here instead
of Program Files where FMS is, because
| | 01:10 | Flash Media Live Encoder is a 32-bit program.
| | 01:12 | So down inside of that folder inside of
Adobe>Flash Media Live Encoder>Conf, and
| | 01:19 | inside of that and we find our config file.
| | 01:21 | We'll open that up, and if we scroll
down to streamsynchronization, we'll see
| | 01:28 | that right now it's set to false,
and yours probably is as well.
| | 01:32 | This is the default.
| | 01:33 | We'll set it to true.
| | 01:35 | Now this sets the encoder to use
absolute time, which is required for proper
| | 01:38 | stream synchronization when we're
delivering media file fragments over HTTP.
| | 01:43 | Now I did talk to an Adobe engineer
about this, and he said there was no reason
| | 01:47 | that he was aware of to turn
synchronization off for RTMP Streaming.
| | 01:52 | This makes me think that it
should just always be set to true.
| | 01:55 | So they may make that change in the
future, but it's always good to double check.
| | 01:59 | So now that we have it set to true,
we can Save and we can close out of
| | 02:04 | Dreamweaver altogether, and open up FMLE.
| | 02:10 | Let's double check some encoding
settings here and make sure that our stream is
| | 02:13 | compatible with HDS Streaming.
| | 02:15 | In the Encoding Options panel, we want to
choose the Preset High Bandwidth>800 kbps H.264.
| | 02:23 | Now we'll tweak a couple of
things in the H.264 settings just for
| | 02:27 | better compatibility.
| | 02:28 | We'll choose Baseline 3.0 and we need to
have a Keyframe Frequency of 4 seconds.
| | 02:36 | So we'll also need to change our Audio
Format to AAC to be compatible with H.264
| | 02:44 | and HDS Streaming, and if it's not
available for you, as I mentioned before,
| | 02:48 | you'll have to purchase the main concept add-in.
| | 02:51 | So now we're ready to connect to FMS,
even though our published stream will be
| | 02:56 | received over HTTP, this original Live
Encoded Stream is sent to FMS over RTMP.
| | 03:02 | So we'll start out with RTMP, and of
course, we are sending it to localhost
| | 03:06 | and instead of Live, as we did with RTMP delivery,
we will send it to the Live Packager Service.
| | 03:12 | The Live Packager Service is the
FMS Service that performs as its name
| | 03:16 | indicates, Live Stream Packaging.
| | 03:18 | It will receive or ingest the Live
Stream from FMLE, package it into f4f
| | 03:23 | fragments and create an f4m manifest on the fly.
| | 03:27 | And finally, we'll enter the name of
our Live Stream, and we will call it
| | 03:31 | exactly that Live Stream, but we
also have to pass in some additional
| | 03:35 | information about the event that we
want to associate this Live Stream with.
| | 03:39 | I am going to use the default event that
ships with the Live Packager called Live Event.
| | 03:44 | An event consists of a directory inside of
the Live Packager application folder on FMS.
| | 03:50 | Inside are two XML files where you
configure information about the event.
| | 03:54 | In most cases you can just use this
default event like we are doing here.
| | 03:57 | So we are now ready to start encoding
the stream, and we do that by clicking
| | 04:02 | Start, and we are now successfully
encoding video and audio, and we are
| | 04:08 | sending this Live Stream to the Live
Packager Service on FMS where it's being
| | 04:12 | processed for HTTP delivery.
| | 04:14 | In the next lesson we'll view that
stream in a videoPlayer in our browser.
| | Collapse this transcript |
| Testing a live HDS stream in a sample player| 00:00 | Now that we have a Live Stream
Broadcasting to the Live Packager Service on
| | 00:04 | FMS, we can view that stream in Flash
Player in a browser, and we'll do this
| | 00:09 | exactly the same way that we've been testing
our other streams in the sample videoPlayer.
| | 00:13 | I'll open it up in a browser and
scroll down to enter our Stream URL.
| | 00:26 | I am going to enter the URL of our
manifest file, and this file is created for
| | 00:30 | us by the Live Packager Service.
| | 00:31 | It's on localhost of course, hds-live.
| | 00:36 |
| | 00:45 | So it's hds-live/livepkgr/_definst, and
this is the default instance of our Live
| | 00:51 | Packager, and we want to specify our
liveevent, ends our event and then finally
| | 00:57 | our stream name, livestream.f4m
| | 01:04 | We can specify that it's Live by
checking that box, and then click Play Stream.
| | 01:09 | A few second delay as the
Live Stream needs to be packaged.
| | 01:14 | And we can specify that it's live by
checking that box and then click Play Stream.
| | 01:21 | So there was a few seconds delay.
| | 01:22 | There is the Live Stream needed to be
packaged before it's delivered to our
| | 01:25 | player over HTTP and that was Live Streaming.
| | 01:29 | The exciting part is that the same
stream can be viewed on Android and
| | 01:33 | repackaged for delivery to iPad, iPod
and iTouch with only a few minor tweaks.
| | 01:38 | So you've now successfully broadcasted
a Live Stream over HTTP to Flash Player.
| | 01:43 | This will allow you to stream to
Android Powered devices, Flash Player and AIR
| | 01:48 | over standard HTTP connections.
| | 01:50 | Now you're ready to explore in my
opinion the really fun part of FMS,
| | 01:55 | real-time communication.
| | Collapse this transcript |
|
|
9. Understanding Custom Server-Side ApplicationsIntroducing server-side applications| 00:00 | So far in this course we've talked a
lot about streaming video with Flash Media
| | 00:04 | Server, but let's not forget that FMS
has many other powerful uses beyond simple
| | 00:09 | streaming, such as real-time
communication for video and voice conferencing,
| | 00:13 | sharing data and multiplayer gaming,
just to name a few and server-side code
| | 00:17 | lets you get the most of those features.
| | 00:19 | Server-side code can be a
confusing concept at first.
| | 00:22 | So let's take a look at how it
differs from the client-side ActionScript
| | 00:26 | that you are used to.
| | 00:27 | Then talk about some common
things you might do on the server-side that
| | 00:30 | you can't or wouldn't want to do on the client.
| | 00:32 | So the bulk of what's possible in a
Flash application is done in standard
| | 00:37 | client-side ActionScript.
| | 00:39 | This includes a variety of tasks such
as requesting and displaying external
| | 00:43 | data, calculating and storing game scores,
game logic, video playback logic, and so on.
| | 00:50 | Today most of this code is
written in ActionScript 3.
| | 00:53 | Then there is server-side ActionScript,
and server-side ActionScript functions
| | 00:57 | are more limited than client-side,
but can end up being more secure and
| | 01:02 | efficient for some tasks, and you can
do things on the server that wouldn't be
| | 01:06 | possible in client-side code, like
advanced authentication, creating detailed
| | 01:10 | activity logs and linking application
instances together on the server for
| | 01:14 | chat-room lobbies, and so on.
| | 01:16 | Server-side ActionScript is very
similar to JavaScript 1.5, so if you're
| | 01:21 | familiar with JavaScript, you've got a
headstart, and it's almost ActionScript
| | 01:25 | 1.0, but with limited classes and the
addition of some FMS specific classes.
| | 01:30 | It's also case-sensitive, where true as1 is not.
| | 01:34 | Server-side ActionScript files have
the .asc extension and that stands for
| | 01:39 | ActionScript Communication file, and
they can be edited in the Flash Actions
| | 01:43 | panel or in any text editor.
| | 01:46 | The ASC files are stored inside of the
Application folder on FMS, and we'll get
| | 01:50 | a good look at exactly where,
in our upcoming exercise.
| | 01:54 | Instead of executing code in the
Flash Player in a browser, server-side
| | 01:58 | ActionSript runs on Flash Media Server itself.
| | 02:01 | It's also important to note that custom
server-side ActionScript can't be used
| | 02:04 | on Flash Media Streaming Server.
| | 02:07 | You can only execute custom server-side
code on Flash Media Development Server,
| | 02:11 | the Interactive Server or the Enterprise Server.
| | 02:14 | As I mentioned, you might consider
using server-side code to improve efficiency
| | 02:18 | of your application.
| | 02:19 | Say you have to feed weather
information to all connected clients.
| | 02:22 | Rather than have each client call out
to the weather server individually, you
| | 02:26 | could make a single call on the server-
side and then pass all that weather data
| | 02:30 | back out to all connected clients.
| | 02:32 | This is much more efficient than making
multiple individual calls to a service,
| | 02:37 | especially if the service is slow or
isn't ready to handle a lot of simultaneous
| | 02:40 | connections, your apps' performance will suffer.
| | 02:43 | Another good use of server-side logic
that comes to mind would be for storing
| | 02:47 | high scores or even scores of all
connected players in a multiplayer game.
| | 02:52 | Calculating and storing this information
on the server-side would be more secure
| | 02:55 | than doing it on the client-side, as
the data could potentially be manipulated.
| | 02:59 | So now that you have a high level view
of what server-side ActionScript is and
| | 03:04 | how it differs from client-side code,
let's look at some of the classes
| | 03:07 | available, focusing on those that
will get you up and running with your own
| | 03:10 | custom applications in FMS.
| | Collapse this transcript |
| What can you do with server-side code?| 00:00 | I mentioned in the previous lesson
that Server-Side ActionScript is like
| | 00:03 | JavaScript, and similar to ActionScript 1.0.
| | 00:07 | It of course doesn't have the
full functionality of either.
| | 00:10 | To help you wrap your head around
the kinds of things you can do in
| | 00:12 | server-side code, I think it's
helpful to look at the basic FMS specific
| | 00:16 | classes that are available.
| | 00:18 | Since this course is aimed to get you
up and running quickly, this complete
| | 00:21 | list gives you a quick overview of what's
available and you can see that there are many.
| | 00:25 | But I will focus on a couple of them
here that you would be most likely to use,
| | 00:29 | Application and Client.
| | 00:31 | We'll be working with these two
classes in this chapter's exercise.
| | 00:35 | Many of these other classes give you
control over data sharing and storage,
| | 00:39 | including ByteArrays, SharedObjects,
peer-to-peer communication, SOAPcalls, and
| | 00:45 | XML Sockets and Streams.
| | 00:47 | Then you have stream controls available
with NetStream, ProxyStream, and Stream.
| | 00:52 | You can even use NetConnection to
chain servers together for scalability and
| | 00:56 | enhanced communication.
| | 00:57 | If you plan to build a complex application
on FMS, these classes will be your friends.
| | 01:02 | I suggest diving into the Flash
Media Server Developer's Guide and the
| | 01:06 | Server-Side ActionScript
reference to get a deeper understanding of
| | 01:09 | Server-Side ActionScript.
| | 01:11 | So let's now take a closer look at
the Application and Client classes, two
| | 01:15 | classes that are the foundation of
any server-side application on FMS.
| | 01:19 | Starting with the Application class,
each FMS application has a single
| | 01:24 | application object which lasts until the
application instance is unloaded from the server.
| | 01:29 | With this class, you can accept or
reject connection attempts, or even create
| | 01:34 | functions that are triggered
when an application starts or stops.
| | 01:37 | The most important elements of the
Application class are the event handlers.
| | 01:41 | They help create the structure and
flow of the server-side application.
| | 01:45 | You can use these events to trigger
functions such as playing server-side
| | 01:49 | streams, writing data to a file,
tracing debug info, and so on.
| | 01:54 | Next is the Client class.
| | 01:56 | The Client class gives you a way to
handle each user or client that connects to
| | 02:00 | a specific FMS application instance.
| | 02:03 | When the client connects to the
application, FMS automatically creates a client
| | 02:07 | object and destroys it when they leave.
| | 02:09 | You can use the Client class to do
things like set read-write permissions;
| | 02:14 | set bandwidth limits, and get
information about the client, such as their IP
| | 02:18 | address and referring URL.
| | 02:20 | You can even use the Client class to
trigger client-side functions remotely,
| | 02:24 | connecting the client-side and
server-side application logic together.
| | 02:27 | So as you can see, server-side
code can be very useful helping your
| | 02:31 | applications accomplish things that wouldn't
otherwise be possible or wouldn't perform as well.
| | 02:36 | In the next chapter, we'll create a
simple custom server-side application, so
| | 02:39 | you can see the structure firsthand.
| | 02:41 | First though, I'm going to
introduce you to the Flash Media Server
| | 02:44 | Administration Console, an invaluable
tool for FMS application development.
| | Collapse this transcript |
| Using the Administration Console| 00:00 | Since we can have both client-side and
server-side code in a Flash Media Server
| | 00:04 | application and RTMP connections and
streams can be finicky, having a tool that
| | 00:09 | gives you insight into what's
happening on the server is invaluable.
| | 00:13 | The tool that ships with FMS for
this purpose is the Flash Media Server
| | 00:17 | Administration Console or the Admin
Console as what we'll refer to it from now on.
| | 00:22 | The Admin Console is a SWF
file that runs in Flash Player.
| | 00:25 | It allows you to maintain the server,
monitor applications, manage users,
| | 00:30 | and debug applications.
| | 00:31 | There are a couple of ways to
quickly access the Admin Console.
| | 00:34 | The first would be to go to the
Start menu, navigate to your FMS install
| | 00:39 | directory, then Adobe>Flash Media Server 4
.5, and then here's a direct link to it.
| | 00:47 | Or we can open it up directly in the browser.
| | 00:49 | We'll open our browser here and go to our
homepage for FMS which is located at localhost.
| | 00:58 | This is our Start Screen, scroll down
and pause that video, and then we can link
| | 01:05 | directly to the Admin Console here.
| | 01:06 | We'll just click on this and
it'll open in a new window.
| | 01:09 | In the server address box we'll type
localhost and I have it here stored.
| | 01:13 | And then we put in that username and
password that you created when you installed FMS.
| | 01:19 | So I named my username is
admin, enter my Password.
| | 01:25 | Now if you are running across the
network or on a hosted version of FMS,
| | 01:29 | you'll want to type the server's name,
or IP address in the server address bar
| | 01:33 | instead of localhost.
| | 01:34 | So then we'll log in and after
successfully connecting, you'll see a list of
| | 01:39 | currently running application instances.
| | 01:42 | Right now, you can see that
the vod application is running.
| | 01:45 | This is because we opened up the
FMS start page and it started to play
| | 01:48 | an on-demand video.
| | 01:49 | So let's look at what kind of
information we have here so you're familiar
| | 01:52 | with the interface.
| | 01:53 | As a developer, you'll be using
this View Applications tab a lot.
| | 01:57 | From here you can see the live log
and this is where any server-side trace
| | 02:01 | messages will appear as you'll see
in our sample app in the next chapter.
| | 02:05 | You can also see what Clients are
connected, Shared Objects and their values.
| | 02:10 | Now Shared Objects are used
to share data in real-time
| | 02:13 | communication applications.
| | 02:15 | You can see what streams are
currently running and you can access real-time
| | 02:20 | performance data here in this running graph.
| | 02:23 | It tells you things like how many
clients are connected and for how long, their
| | 02:27 | bandwidth consumption and overall CPU
and memory usage being consumed by FMS.
| | 02:32 | So as you can see, the Admin Console
can give you valuable insight into what's
| | 02:36 | happening under the covers in FMS.
| | 02:39 | We'll use it in the next chapter when
we dive into writing our own custom video
| | 02:42 | broadcasting application.
| | Collapse this transcript |
|
|
10. Building a Video Broadcast ApplicationWriting the server-side application| 00:00 | I've been looking forward to this
chapter to introduce you to my favorite
| | 00:03 | feature in FMS, real-time communication.
| | 00:06 | The idea that you could share video,
audio, and data between connected
| | 00:10 | SWF clients across the globe in real
-time right in the Flash Player has
| | 00:13 | always intrigued me.
| | 00:15 | Back when I got started, FMS was
called Flash Communication Server.
| | 00:19 | And while the basic server-side aspects
haven't changed much since then, there's
| | 00:23 | still no technology or platform
today that makes this kind of real-time
| | 00:27 | communication so accessible.
| | 00:29 | In this chapter, we'll create a custom
Flash Application that broadcasts your
| | 00:33 | webcam from one client to another.
| | 00:35 | We'll create a custom server-side
application on FMS, and then I'll walk you
| | 00:40 | through the client-side code you'll
use to capture and broadcast your webcam
| | 00:44 | live, using RTMP Streaming.
| | 00:46 | So let's dive into a sample broadcasting
applications and see how easy it is to get started.
| | 00:51 | So the first thing we need to do when
creating a new custom application in FMS,
| | 00:56 | is to add a folder for it in
our Applications directory.
| | 01:00 | So here I am inside of Program Files,
Flash Media Server, and here's our
| | 01:04 | application folder, I'll open that up,
and simply right-click, choose New,
| | 01:10 | create a new folder, and we'll give it the
name of our application, which is lyndacast.
| | 01:15 | Now our Server-Side ActionScript
file will go inside of this folder.
| | 01:19 | And I do recommend keeping your
app name simple and all lowercase.
| | 01:24 | Next, we want to create this ASC file.
| | 01:27 | Since we'll be creating our client-side
application in Flash Professional, I'll
| | 01:31 | open that up and create a new ASC file.
| | 01:34 | You could of course write this simple
file in a text editor if you prefer.
| | 01:38 | So let's go ahead and open up Flash
Professional and the quickest way to get
| | 01:42 | that is to go to our Search bar down
here and to start typing Flash, here it is.
| | 01:47 | I recommend that you run Flash as
Administrator, and this way you can save files
| | 01:51 | directly into your applications folder.
| | 01:54 | Because it's inside of Program Files,
Windows 7 really gets kind of upset with
| | 01:58 | you when you try to alter things in there.
| | 02:00 | So running as Administrator can help
alleviate some of those roadblocks.
| | 02:06 | So I have provided the ASC file for you
all finished and ready to go, and we're
| | 02:11 | going to take a look at that.
| | 02:12 | But when you're ready to create your own
ASC files, I wanted to show you quickly
| | 02:16 | how you can do that here
in Flash. Choose File>New.
| | 02:21 | Normally when you're creating a new
FLA, you just choose ActionScript 3.0.
| | 02:25 | But in this case, we just need a
communications file, which is very simple.
| | 02:29 | It doesn't a timeline or anything.
| | 02:30 | It's just an interface
where you can type in code.
| | 02:33 | So we'll choose ActionScript
Communication File and say OK and you can see, you
| | 02:38 | can just type code here and save the file.
| | 02:40 | But I do have one written
for you in the Exercise Files.
| | 02:44 | So let's open that up.
| | 02:46 | So we'll navigate to our Exercise Files>
Chapter 10, and here is our main.asc file.
| | 02:53 | You can see it is a Flash ASC File,
so I'll open that up and this is
| | 02:57 | Server-Side ActionScript.
| | 02:59 | Now all server-side
applications are named main.asc.
| | 03:03 | Or if that gets too confusing for you
to manage, if you've got multiple apps
| | 03:06 | that you're working with at once, you
can give it the name of the application.
| | 03:10 | In our case, that would be lyndacast.asc
| | 03:13 | But for now we'll just keep it at main.asc
| | 03:15 | So the first thing you want to do in
Server-Side ActionScript is to create the
| | 03:19 | structure of the application.
| | 03:21 | And as I mentioned earlier, the
structure of the server-side application is
| | 03:24 | based on event listeners.
| | 03:26 | And here we set up a very basic
structure that listens for onAppStart,
| | 03:30 | onConnect, and onDisconnect.
| | 03:35 | Then inside each of those listeners
we'll add some traces that give us some
| | 03:39 | feedback about what's happening as
the clients connect and disconnect.
| | 03:43 | So when the application starts, we'll
use the trace command to print out a
| | 03:46 | message in the admin console that
lets us know a new instance of the
| | 03:50 | application has been created.
| | 03:52 | Now remember, when you put in traces in
Server-Side ActionScript, that doesn't
| | 03:55 | appear when you launch the SWF.
| | 03:57 | You don't see those traces anywhere.
| | 03:59 | The only place that you'll see
them is in the admin console.
| | 04:02 | And then when clients connect, we read
in the client name that they pass in, and
| | 04:07 | then print that out to the console.
| | 04:09 | We'll also want to go ahead and accept
that client connection, or they won't
| | 04:12 | actually be allowed in.
| | 04:14 | Finally, we'll print a
message that they've been accepted.
| | 04:17 | And then when a client disconnects from the
application, we'll print that message out.
| | 04:21 | Okay, so now we want to actually save
this main.asc in our application folder.
| | 04:27 | So we should be able to, since we're
running as Administrator, Save As and then
| | 04:32 | navigate to our applications folder.
| | 04:35 | And I do recommend if you're working
with FMS a lot that you put a shortcut
| | 04:39 | to that folder here.
| | 04:40 | I just didn't want to confuse you by doing that.
| | 04:44 | So we'll navigate to Adobe>Flash
Media Server 4.5>applications>lyndacast.
| | 04:51 | Then we can save that file
and we have now created a custom
| | 04:57 | server-side application.
| | 04:58 | Next, we'll open up the broadcaster and
the viewer client applications in Flash
| | 05:04 | Professional and I'll walk you
through their code, so you can see how the
| | 05:07 | client-side interacts with the server-side code.
| | Collapse this transcript |
| Broadcasting a live webcam stream| 00:00 | In the interest of getting you started
quickly with custom FMS applications,
| | 00:04 | I've provided two Flash source files in
the Exercise Files included with this course.
| | 00:09 | These source files have all of the
code in place for sending and receiving a
| | 00:13 | Live Stream in Flash
Player using Flash Media Server.
| | 00:16 | In this lesson I'll walk you through
the application that sends the Live Stream
| | 00:20 | called lyndacast_broadcast.fla.
| | 00:23 | If you are a lynda.com member you'll
find this file in the Exercise Files
| | 00:27 | included with the course.
| | 00:28 | If not you can follow along with the
video and re-create the file as I explain
| | 00:32 | the code and the various elements.
| | 00:34 | So we'll start by opening up our
lyndacast_broadcast in the Exercise Files and
| | 00:41 | we want the Flash document.
| | 00:42 | So we'll double-click that, it opens in Flash.
| | 00:46 | Now here I've created an interface that
includes a couple of crucial elements.
| | 00:51 | A dynamic text field and we'll use
this to get some feedback about our RTMP
| | 00:56 | connection as we try to connect to FMS.
| | 00:59 | And I've given it an instance name of
statusText so we can address it in ActionScript.
| | 01:05 | And the other element is a generic video
object and this is where you'll be able
| | 01:09 | to see yourself as you broadcast your webcam.
| | 01:11 | I have it here inside of a symbol
because I wanted to add a gray background and
| | 01:16 | this is really just an aesthetic choice,
it provides a placeholder while Flash
| | 01:19 | is connecting to your web cam.
| | 01:21 | So if you drill down in here, you'll see
here is our video object and I've given
| | 01:26 | that an instance name myVid
and below that is our box.
| | 01:30 | So going back up to our main level,
another thing that I did do with the video
| | 01:37 | object is I flipped it so it was a mirror image.
| | 01:39 | Now it's pretty easy to do.
| | 01:41 | You just select it and choose
Modify>Transform>Flip Horizontal.
| | 01:45 | So I've given this symbol the name
videoOut so we can address it in ActionScript.
| | 01:51 | And now moving onto the ActionScript
code you can see on the timeline that I've
| | 01:56 | created a separate layer called actions,
and that's where all of our actions are.
| | 02:00 | Having that selected I can
choose the Actions shortcut here.
| | 02:04 | You can also go to Window>Actions and
it will pop-out and when we open up this
| | 02:09 | Actions panel we can see the code that
connects to FMS, captures the local web
| | 02:13 | cam and stream it to our
custom lyndacast application.
| | 02:17 | Let's walk through it so you
understand how all of this is done.
| | 02:20 | With FMS all tasks need to be
executed in a specific sequence.
| | 02:25 | For example, it's important that the net
connection between the Flash client and
| | 02:29 | FMS be established before
trying to send any data or streams.
| | 02:33 | So the first thing we do is
establish that net connection.
| | 02:37 | Now in this case we could connect to
local host because we are running this on
| | 02:41 | the same machine that is running FMS, or
if you want to connect over the network
| | 02:46 | we can supply the IP address.
| | 02:48 | If you're using a hosting service such
as Amazon, or Influxis they'll provide
| | 02:53 | you with the correct connection address.
| | 02:55 | In addition to the FMS address, we are
adding another piece of optional data, the
| | 03:01 | name of the client, in
this case the broadcaster.
| | 03:05 | You can pass in any information here
that you like and it'll be available
| | 03:08 | in server-side code.
| | 03:10 | So next we need to add some functions
that handle data and errors that may
| | 03:14 | get sent back to us when streaming video.
Then we want to listen for net status events.
| | 03:20 | These are events that provide
information about both the net connection to FMS
| | 03:25 | and the net streams that we play.
| | 03:27 | We can listen for specific
codes and react accordingly.
| | 03:31 | In this case we listen for
a success or a fail message.
| | 03:35 | If it fails we just trace out the
message into the status text field and if
| | 03:39 | it's successful we trigger the
setupBroadcast function which will start our broadcast.
| | 03:44 | Skipping down to the setupBroadcast
function you can see that this is where the
| | 03:48 | real action is happening.
| | 03:50 | First, we are instantiating a camera
object and connecting it to the outgoing
| | 03:54 | net stream then we do the same thing
with the microphone and finally we attach
| | 04:00 | the local cam to the generic video
object called videoOut.myVid, and then we
| | 04:06 | publish the stream on the outgoing net stream.
| | 04:08 | We give it a stream name of broadcast
and specify that it's live and that is it.
| | 04:14 | When this application runs it will
connect to FMS and send our web cam stream to
| | 04:19 | the lyndacast application and we will
test this in a few minutes but first we
| | 04:23 | need to create the viewer application
which will allow clients to connect to
| | 04:28 | lyndacast and view our broadcast stream.
| | 04:30 | In the next lesson we'll look at
lyndacast_view and see how that's done.
| | Collapse this transcript |
| Viewing the live webcam stream| 00:01 | Now that we've created a custom FMS
server-side application and captured and
| | 00:05 | broadcast our web cam the last step is to
view that web cam stream in a Flash client.
| | 00:10 | I've created this client application
for you and in this lesson we'll go
| | 00:13 | through it and look at the elements and the
code needed to connect to FMS and view that stream.
| | 00:19 | So we'll go into our Exercise Files and
open up the Flash document and here it is.
| | 00:26 | Now the code for viewing a stream is
almost identical to that of broadcasting.
| | 00:30 | We still need to connect to the same
instance of our lyndacast application and
| | 00:34 | once connected request the
stream that we called broadcast.
| | 00:37 | Now the elements on the stage in the
Viewer application here are about the same
| | 00:41 | as those in the broadcast
app except I did switch sides.
| | 00:44 | So it's a little easier to tell that one
is the Viewer and one is the Broadcaster.
| | 00:47 | Here is our dynamic text field.
| | 00:49 | It still will trace out our status
message and here the video object is
| | 00:54 | slightly different.
| | 00:55 | I've called it videoIn instead of
videoOut just for clarity and if we drill down
| | 00:59 | into it, you can see that I add in an
image on a layer below the video object.
| | 01:05 | This is totally optional but a nice
trick to show alternative content if a Live
| | 01:10 | Stream isn't being broadcast.
| | 01:12 | If there is a Live Stream it will fill in
the video object and cover up this image.
| | 01:17 | This kind of a hack but it works nicely.
| | 01:19 | I've also added another little
optional feature that plays an alternate video
| | 01:23 | when the broadcast ends and
you'll see how that's done in a moment.
| | 01:27 | So that's it for the elements here on the stage.
| | 01:30 | Let's go ahead and dive into the
ActionScript and see how the video stream is requested.
| | 01:34 | So we'll go back up to our top layer, choose
our actions layer and open up the Actions panel.
| | 01:41 | So as I said most of this code is the
same as in the broadcast applications.
| | 01:46 | The only difference in the
NetConnection is that we've changed our client name
| | 01:50 | to the Viewer from the Broadcaster.
| | 01:52 | The error handlers are all the same
and the NetStatus handler is the same.
| | 01:58 | We are just calling our
NetStream in_ns instead of out_ns.
| | 02:02 | Again, this is just for clarity.
| | 02:03 | So we know we are bringing data in on
the NetStream here in the Viewer and
| | 02:07 | pushing it out in the Broadcaster.
| | 02:12 | And down here we are adding an
additional custom function that listens for the
| | 02:16 | stream status event
NetStream_Play_Unpublish_Notify
| | 02:20 | This notice will be sent to us if we
are watching a stream and the publisher
| | 02:23 | stops sending video and when that
happens we are telling Flash to start playing
| | 02:28 | a file called offline.f4v
| | 02:29 | I'll show you where that file goes in a moment.
| | 02:32 | The additional numbers that are being
passed in tell FMS what type of stream we
| | 02:37 | are requesting and how
long we'd like it to play.
| | 02:40 | The 0 tells FMS that it is a
prerecorded video and -1 tells it to play the
| | 02:45 | entire duration of the file.
| | 02:47 | You can refer to the FMS documentation to find
out all the other different codes you can use.
| | 02:52 | And that's all we need to play the
stream with a couple of extra features.
| | 02:56 | When we compile this SWF and test it
we'll connect to FMS and play the Live
| | 03:01 | Stream from the lyndacast application.
| | 03:03 | There is one more detail we need to
handle before testing placing that
| | 03:06 | offline.f4v video file in the right
place on FMS so it will be available to
| | 03:11 | stream when our Live Stream stops broadcasting.
| | 03:14 | So this video needs to go into a very
specific place for it to be available to
| | 03:18 | the lyndacast application.
| | 03:19 | So let's close Flash for a moment and go
over to our applications folder in FMS.
| | 03:26 | So we'll go down into lyndacast and here we
need to create a new folder called streams.
| | 03:36 | Then inside of that we need to create
an additional folder for the instance
| | 03:41 | of the application.
| | 03:42 | Now we didn't specify an instance
name with our connection string when we
| | 03:46 | connected to lynda cast.
| | 03:48 | So in that case definst is always used
and we'll create a folder with that name.
| | 03:53 | It's _definst_ that's the default instance.
| | 04:01 | Now instances of applications can be
kind of handy especially if you have a
| | 04:05 | chat room or an application like that
where you want to have distinct private
| | 04:09 | versions of that application like a
chat room where members who join that
| | 04:13 | specific instance can speak with
each other but data is not shared from
| | 04:18 | instance to instance.
| | 04:20 | So inside of definst we can place
our video and I've provided this
| | 04:25 | offline.f4v here for you.
| | 04:27 | So you can Copy that, Paste it here
inside of definst folder in lyndacast and
| | 04:36 | yes I do want to copy it here.
| | 04:39 | So with that video file in place we
are now ready to test our Live Video
| | 04:43 | Broadcast application in the next lesson.
| | Collapse this transcript |
| Testing the video broadcast application| 00:00 | Now that we have the elements of our
Live Video Broadcast application in place,
| | 00:04 | we are ready to test our custom application.
| | 00:07 | We'll compile both the lyndacast_
broadcast.swf and the lyndacast_view.swf and
| | 00:12 | watch the Live Stream play locally.
| | 00:14 | When the broadcaster stops sending the
stream, the default offline video will play.
| | 00:18 | So let's start out with the View application.
| | 00:21 | So we'll open up lyndacast_
view.fla in Flash Professional.
| | 00:24 | Now, I have provided both the View,
and the Broadcast files in this
| | 00:30 | lesson's Exercise Files.
| | 00:32 | So now to compile this, we'll go up
to Control>Test Movie>Test, and this
| | 00:41 | will create the SWF file, and test the
application here in the stand-alone Flash Player.
| | 00:46 | I am getting a NetConnection.Connect.
Success message, and hopefully you do too.
| | 00:51 | If you get a NetConnection.Connect.
Failed message instead, double check that
| | 00:56 | your NetConnection URL is correct.
| | 00:58 | In this example I am running
everything on the same computer as FMS.
| | 01:02 | So my URL is an IP address.
| | 01:04 | It could also be localhost.
| | 01:06 | Yours may need to be an IP address
or the address given to you by your
| | 01:10 | FMS hosting provider.
| | 01:11 | Now, as expected, we see the default
offline image here since the broadcaster
| | 01:16 | isn't yet broadcasting.
| | 01:17 | So we'll leave this viewer open, so
that you can see how it switches it right
| | 01:21 | over to the Live Stream automatically
when the broadcaster starts streaming.
| | 01:25 | So we'll slide it over here to the
side and now we'll go ahead and open up
| | 01:30 | lyndacast_broadcast in Flash and
we'll compile and run this SWF by going to
| | 01:40 | Control>Test Movie>Test.
| | 01:46 | For the net status code Net.Connection.
Connect.Success is received, and we are
| | 01:50 | immediately prompted to allow Flash
to access our web cam and microphone.
| | 01:56 | I will say allow and now you see my
web cam is captured here, and we are now
| | 02:02 | broadcasting a stream to the
lyndacast application on FMS.
| | 02:07 | If we switch over to the Viewer, we
can see our Live Stream playing here.
| | 02:10 | So we know that we are now
broadcasting live from one Flash client to another
| | 02:15 | Flash client, and you'll see there's a
very slight delay here, and that's to be
| | 02:19 | expected with Live Streaming.
| | 02:22 | So let's test one last
feature of this application.
| | 02:25 | When I stop broadcasting by closing
lyndacast_broadcast app, the unpublished
| | 02:31 | notify message is sent to the client,
starts to play the offline F4V file.
| | 02:36 | Now, these SWFs would normally be
running on two different computers, and all of
| | 02:41 | this is running locally here.
| | 02:43 | So if you're running FMS on a
publicly accessible web server, anyone in the
| | 02:47 | world could broadcast and
view your streams. Pretty cool.
| | 02:51 | So walking through the structure and
code of this Live Broadcast application
| | 02:54 | should have gotten you familiar
with how custom apps are built on FMS.
| | 02:59 | I hope you use this basic example to
build upon and really dive into FMS
| | 03:03 | application development.
| | Collapse this transcript |
|
|
11. Streaming On Demand with HLS and RTMPUnderstanding on-demand streaming| 00:01 | Now we will really dive into one of
the most exciting parts of FMS4.5 and
| | 00:05 | possibly the reason you're
looking to get started with it;
| | 00:07 | Streaming To Devices.
| | 00:09 | Delivering video to devices using
Flash Media Server is actually surprisingly
| | 00:13 | easy, because the packaging
process is handled for you.
| | 00:16 | You don't need to encode into multiple formats.
| | 00:19 | But trying to figure out the correct
URLs and folders for your on-demand video
| | 00:22 | files can be confusing.
| | 00:24 | In this chapter, I'll walk you
through the process of setting this up and
| | 00:28 | testing, and give you some tips
on formatting your source video.
| | 00:32 | Then we'll move on to Live Streaming to
devices, and wrap up by building a Video
| | 00:36 | Player that will deliver the right
video stream to the right device.
| | 00:39 | Let's begin with a quick overview of the
technology behind video playback on devices.
| | 00:45 | Adobe recommends using HTTP streaming
technology for streaming to devices.
| | 00:50 | Earlier in this course, I covered HTTP
streaming in more depth, but here's a quick review.
| | 00:56 | In HTTP streaming, the video content is
broken into small fragments, which can
| | 01:01 | be delivered quickly even on low
bandwidth connections, and then, I reassembled
| | 01:06 | instantaneously for smooth playback.
| | 01:08 | Both Flash, and iOS use a form of HTTP
streaming, but of course, the formats are
| | 01:13 | slightly different, making them incompatible.
| | 01:15 | As you will see though, this isn't as
much of a problem as it used to be now
| | 01:19 | that we have on-demand packaging.
| | 01:21 | Now, let's look at the way on-demand
packaging works for prerecorded video files.
| | 01:26 | First, you place your video file into
the webroot/vod folder inside of the Flash
| | 01:33 | Media Server folder.
| | 01:34 | This source video must be H.264
video with AAC audio, saved as an F4V.
| | 01:40 | I will give you a few more encoding
suggestions for this file in a moment.
| | 01:44 | Then when you want to play that
video on iOS, you would request it using
| | 01:48 | a special URL path.
| | 01:50 | It looks like this
| | 01:52 | This initiates the packaging process
and FMS automatically converts your source
| | 01:57 | F4V into an M3U8 stream for
HTTP Live Streaming delivery.
| | 02:03 | Referred to as HLS, this is
the format supported on iOS.
| | 02:08 | When you want to play that same video
in Flash Player on a computer or on an
| | 02:12 | Android device, you would
use a slightly different URL.
| | 02:15 | It looks like this.
| | 02:17 | This prompts FMS to package the source
F4V for HTTP Dynamic Streaming or HDS
| | 02:24 | which is playable in flash.
| | 02:25 | Devices running Android 2.1
or later support Flash Player.
| | 02:30 | Now technically, Android devices also
support Apple's HLS format, but as of
| | 02:35 | today, that support tends to be buggy with
inconsistencies in HTML5, and native support.
| | 02:40 | In future Android updates, they'll
likely have this sorted out, but for now, I
| | 02:44 | recommend using Flash Player
and HDS for Streaming on Android.
| | 02:48 | Now, packaging does what its name implies.
| | 02:50 | It simply repackages the existing video and
audio bits into a different box so to speak.
| | 02:55 | It doesn't transcode or
change the actual video data.
| | 02:59 | So you need to have a source video
that's encoded with settings that are
| | 03:02 | playable on your target device.
| | 03:04 | Mobile devices have lower processing
power than desktop computers, and often
| | 03:08 | connect to the Internet
over slow wireless networks.
| | 03:11 | Because of this, it can be difficult to
get high quality video to play smoothly,
| | 03:15 | as I'm sure you've experienced firsthand.
| | 03:18 | I've provided you with source videos
with the Exercise Files for this course
| | 03:22 | that are optimized for the
devices I will be demonstrating.
| | 03:25 | When you're ready to encode your
own videos, there are some general
| | 03:27 | guidelines you should follow.
| | 03:29 | These are outlined clearly in
Adobe's Simple Mobile Video Encoding
| | 03:32 | Recommendations, or more advanced
encoders will find the Video Encoding Cookbook
| | 03:38 | and its Mobile Addendum very helpful.
| | 03:41 | Here are the recommended settings for
your videos for delivery over 3G networks.
| | 03:47 | You want to use the H.264 codec for
video, and target Level 3.1, or you can use
| | 03:54 | 3.0 if you want to target older iOS devices.
| | 03:58 | Use the Baseline Profile and the
recommended bit rate is 800kb per second for
| | 04:04 | video and up to 64kb per second for audio.
| | 04:07 | Then the actual Dimensions of the
video should be 640x480, or for
| | 04:13 | widescreen, 640x360.
| | 04:17 | Now that you have the lay of the land,
let's dive right into trying out the
| | 04:21 | on-demand packaging features of FMS.
| | 04:23 | We will view a sample video on
an iPad and on an Android device.
| | Collapse this transcript |
| Testing an on-demand HLS stream on iOS| 00:01 | Now that you're familiar with the on-
demand packaging feature of FMS, we are
| | 00:04 | ready to take it for a test drive.
| | 00:06 | We will copy a sample video file to the
correct location on the server and then
| | 00:10 | view that HLS video stream on an iPad.
| | 00:12 | So the first thing we need to do is
grab our sample video file and we can find
| | 00:17 | it in our Exercise Files for this
lesson, and here it is, explore.f4v
| | 00:23 | So I will right-click on that, copy it,
and then navigate to my webroot/vod
| | 00:30 | folder inside of FMS.
| | 00:34 | That is in my Program Files>
Adobe>Flash Media Server, webroot.
| | 00:41 | And once here, I can right-click and
paste. Now webroot is the Apache web server
| | 00:46 | folder, so anything in here is going to
be accessible over HTTP on our network.
| | 00:51 | The Just-in-time Packager is going
to look here in the vod folder for the
| | 00:55 | content, and then it will package
it appropriately for our device.
| | 00:58 | So let's put that to the test.
| | 01:00 | I will switch over now to my iPad.
| | 01:02 | So to play this video in the native
player here on iOS, we will use Safari, and
| | 01:08 | we just need to request the following URL;
| | 01:12 | http:// and then the IP address where
our FMS server is running, and in our case
| | 01:19 | here, it's 10.1.111.126.
| | 01:29 | (Yours will of course be different)-
| | 01:30 | /hls-vod/explore.f4v.m3u8.
| | 01:48 | Notice that I've just added the
extension m3u8 to my f4v file name.
| | 01:53 | This is requesting just-in-time
packaging for this f4v file, so I can play
| | 01:58 | it here on my iPad, and FMS performs this
just-in-time packaging for us automatically.
| | 02:04 | Here is my video playing on the iPad without
any additional workflow, or setup on our part.
| | 02:09 | We just uploaded our F4v file to the
right place in the Apache webroot folder on
| | 02:14 | FMS, and we are streaming.
| | 02:17 | Now, for your reference, here are the
Encoding Settings used for the Explore video.
| | 02:21 | H.264 video codec, using Main profile
and a Level of 3.0, and that's for the
| | 02:28 | best compatibility, AAC audio
codec, a Bitrate of 1Mb per second.
| | 02:34 | Now, Adobe does recommend 800, so I did
step that up slightly for quality, and a
| | 02:40 | frame rate of 24 frames per second.
| | 02:42 | I used a Keyframe interval of 4 seconds
or 96 frames in between each keyframe,
| | 02:48 | and saved it as an F4V file.
| | 02:50 | Now, this same file will also play
in Flash as we'll see in a moment.
| | 02:54 | Remember, when you use your own
video files here, they need to be encoded
| | 02:58 | with settings that are supported in both
Flash and the iOS devices you wish to target.
| | 03:03 | For information about those settings, you can
refer back to the first lesson in this chapter.
| | 03:07 | So you have now successfully streamed to
iOS using the new HLS streaming feature
| | 03:11 | in Flash Media Server 4.5.
| | 03:14 | Next, let's view that same
video using HDS on Android.
| | Collapse this transcript |
| Testing an on-demand HDS stream on Android| 00:01 | We just saw how simple it was to stream
to an iOS device using the just-in-time
| | 00:05 | packaging features of FMS 4.5.
| | 00:08 | Now let's try it on the Android.
| | 00:10 | I have a Nexus S phone here, but you
can use any Android power device that
| | 00:14 | supports Flash Player 10.1 or later.
| | 00:16 | So we'll need to load our stream into a
video player application running in Flash Player.
| | 00:21 | Adobe provides an easy-to-
configure sample player with FMS.
| | 00:25 | It's in the samples folder in the Flash
Media Server 4.5 folder, so let's find that now.
| | 00:31 | So we'll go to Local Disk>Program Files
>Adobe>Flash Media Server, and here in
| | 00:39 | the samples folder, we will find videoPlayer.
| | 00:42 | So we can just right-click on this and
copy it, go back, and we want to paste
| | 00:47 | it into webroot so that we can access it
through over our local network as a Web page.
| | 00:52 | So we'll need to paste that here in our
webroot folder so that we can access it
| | 00:57 | through a Web browser and use the video player.
| | 01:00 | And later I'll show you how to create a
universal video player that plays both
| | 01:04 | Flash and iOS depending on the device.
| | 01:07 | If you want to know more about building
video players for Flash, take a look at
| | 01:11 | my other lynda.com course, Publishing
Video with the Flash Platform, and I get
| | 01:14 | into actually building
custom players in that course.
| | 01:18 | So we want to test on-
demand video on our Android now.
| | 01:22 | So now that we have our video player
here in our webroot we can go to our
| | 01:26 | Android device and now we'll enter my
IP address, yours will be different.
| | 01:32 | http://10.1.111.126/
videoplayer/videoplayer.html.
| | 01:32 | Here you'll see the Flash Media
Playback configuration interface.
| | 01:52 | You can configure it and test
the player right here on this page.
| | 01:56 | First, we'll paste in the URL of
our video down here in the stream URL.
| | 02:01 | Now as you can see, we're using the
same video URL that we did for our iOS
| | 02:05 | device but with a couple of changes.
| | 02:07 | We're targeting hds-vod instead of
hls-vod and we're tagging on the .f4m
| | 02:14 | extension to our file name, requesting
the manifest file that FMS creates for us
| | 02:19 | during the just-in-time packaging process.
| | 02:21 | So we're now ready to play our stream,
so we'll scroll down here and touch
| | 02:26 | the PLAY STREAM button.
| | 02:29 | We can even go full screen and our video plays.
| | 02:34 | (video playing)
| | 02:34 | So you've now successfully streamed to
Android using HTTP Dynamic Streaming on
| | 02:42 | Flash Media Server 4.5.
| | 02:43 | Next, let's broadcast a live
stream across iOS and Android.
| | Collapse this transcript |
|
|
12. Streaming Live Video to Devices with HLSStreaming live video to devices| 00:01 | In the past, we could only stream live
video to Flash using Adobe's RTMP streaming.
| | 00:06 | While, RTMP does work on
devices that support Flash.
| | 00:10 | Anyone on an Apple device won't
be able to watch your live stream.
| | 00:13 | You'd have to encode a special stream
just for them using additional server
| | 00:17 | and encoding software.
| | 00:19 | Now Flash Media Server 4.5 solves this
problem by taking a single live stream
| | 00:23 | and packaging it in real-
time for HLS and HDS delivery.
| | 00:28 | Let's take a look at how this is done.
| | 00:30 | The workflow for real-time packaging of a
live stream is slightly different from on-demand.
| | 00:34 | There's no file to upload
as there is with on-demand.
| | 00:37 | The live packager service on FMS
accepts your incoming live stream and converts
| | 00:42 | it to both HLS and HDS
format as requested by a client.
| | 00:47 | As you can imagine, this does add a few
seconds of latency while the stream is
| | 00:50 | being boxed up into the new format.
| | 00:53 | Just like on-demand playback, you would
request the live stream using a special URL path.
| | 00:58 | The URL for live streams is a bit
more complex than with on-demand.
| | 01:02 | For iOS it would look like this, and
for Flash on a computer or Android device,
| | 01:07 | it would look like this.
| | 01:09 | Let's pull apart this URL so you can
understand what's happening in this request.
| | 01:13 | Just as on-demand, requested hls-
vod and hds-vod, here we're requesting
| | 01:20 | hls-live and hds-live.
| | 01:24 | Then we're invoking a live packager
service which performs the packaging into
| | 01:28 | the format we specified.
| | 01:29 | Next, we'll tell FMS which
live event we want to access.
| | 01:33 | Events are an extra element
required in live streaming over HTTP.
| | 01:38 | You can set up custom events
that have specific settings and
| | 01:41 | associated metadata.
| | 01:42 | And this information is
stored in an event.xml file on FMS.
| | 01:47 | In most cases, you can use the pre-
built default event called liveevent and we
| | 01:51 | will be using this default
event in our upcoming exercise.
| | 01:55 | And finally, we ask for the live
video stream, and in this case, it's
| | 01:59 | simply called livestream.
| | 02:00 | We tag on the appropriate file extension,
either m3u8 for iOS, or f4m for Flash.
| | 02:07 | When this URL is requested by a client,
the Live Packager is called into action.
| | 02:12 | It creates a folder inside of the Live
Packager application folder with the name
| | 02:16 | of the stream or streams.
| | 02:18 | And then inside that folder it creates
the various fragments and manifest files
| | 02:22 | it will need to stream the live video.
| | 02:24 | Adobe has specific
recommendations for encoding live video.
| | 02:28 | We'll be using those settings in our
exercise, but if you want to tweak your
| | 02:31 | encoding for specific devices, I
recommend reading the simple mobile video
| | 02:36 | recommendations article that I mentioned
earlier in the course, or more advanced
| | 02:40 | encoders can refer to the Video
Encoding Cookbook and its Mobile Addendum.
| | 02:45 | You've now had a peek at what's
happening behind the scenes when you package
| | 02:48 | live video on FMS and have some
guidance about encoding for devices.
| | 02:52 | Next, let's set up our encoding
software and start our broadcast.
| | Collapse this transcript |
| Setting up Flash Media Live Encoder for HLS streaming| 00:01 | Now that we've gotten a look at the
simple steps involved in delivering
| | 00:04 | on-demand video to devices,
we'll move on to live streaming.
| | 00:07 | To capture and broadcast a stream,
we'll use Flash Media Live Encoder and send
| | 00:11 | our stream to Flash Media Server 4.5
where it will be packaged automatically
| | 00:16 | in real time for playback on iOS and
Android devices and even in Web browsers as well.
| | 00:22 | Flash Media Live Encoder or FMLE
is a free download from Adobe.com.
| | 00:27 | And you can get it from adobe.com/go/fmle
| | 00:33 |
| | 00:34 | For our purposes, we can use FMLE 3.2 or later.
| | 00:39 | And before we open up FMLE, we
need to make one change to its
| | 00:42 | configuration file.
| | 00:43 | And because FMLE lives in Program
Files, we can't just edit directly.
| | 00:49 | We need to have the special
privileges to have access to edit those files.
| | 00:53 | So we're going to do this in Dreamweaver.
| | 00:55 | But to actually edit the file in
Program Files, we're going to have to run
| | 01:00 | Dreamweaver as an Administrator.
| | 01:05 | Now an alternative to this would be to
actually copy our file to the Desktop,
| | 01:10 | change it there, and then copy it back.
| | 01:12 | But this is just another way to do it.
| | 01:13 | So I will navigate to our configuration
file, I like to go to File>Open, and we
| | 01:20 | already have it here but as you can
see, it's inside of Program Files (x86)
| | 01:26 | because Flash Media Live
Encoder is a 32-bit program.
| | 01:29 | That's where you will find it, in the
Adobe folder, Flash Media Live Encoder,
| | 01:34 | and then Conf folder.
| | 01:37 | And here's a file called config, we
want to open that up. It's an XML file.
| | 01:42 | We just want to scroll
down to streamsynchronization.
| | 01:46 | Now it's probably set to false for you
as it is here, so we'll change it to true.
| | 01:51 | And this sets the encoder to use
absolute time, which is required for proper
| | 01:55 | stream synchronization when
delivering media file fragments over HTTP.
| | 02:00 | Now I did speak with an Adobe
engineer about this and he said there was
| | 02:03 | no reason that he was aware of to turn
this off if you're going to do RTMP streaming.
| | 02:08 | This makes me think that it should be
set to true by default, so they may make
| | 02:11 | that change in the future versions of FMLE.
| | 02:14 | But for now we just want to go in here
and make sure that it is set to true.
| | 02:17 | Okay, we'll go ahead and save this
file and we can close out of Dreamweaver.
| | 02:24 | Now we are ready to open up FMLE.
| | 02:27 | I'm going to Programs>Adobe, and there it is.
| | 02:35 | And sometimes if FMLE doesn't like
some of the settings you have that are not
| | 02:38 | compatible, you'll see this Profile
Validation dialog, and it's okay, just click
| | 02:43 | Ok because we're going
to make some changes here.
| | 02:45 | So when you open up FMLE, you may see
a video here and that's because your
| | 02:50 | preview is automatically set to be on.
| | 02:52 | I like to keep them off because
they're a little bit distracting to me.
| | 02:54 | So let's go ahead and make some
changes here to make sure that our video is
| | 02:59 | going to be compatible with HTTP
streaming and will play nicely on our iPad as
| | 03:04 | well as our Android device.
| | 03:06 | So in this Encoding Options panel
here, we want to choose the preset High
| | 03:11 | Bandwidth (800 Kilobits per second) - H.264.
| | 03:14 | Now we want to tweak these settings a
little bit, so right next to H.264 Format,
| | 03:21 | we will click on this wrench and this
opens up the Advanced Encoder Settings.
| | 03:27 | Now under Profile, we want to choose
Baseline and the Level we'll set to 3.0
| | 03:32 | and this is going to give us the greatest
compatibility across the widest range of devices.
| | 03:36 | And next we need to change the
Keyframe Frequency to 4 and this is what Adobe
| | 03:42 | recommends for the best HTTP
streaming and we can say OK.
| | 03:47 | Now you'll see that our Audio Format is set to
MP3 and we need that to be AAC to be compatible.
| | 03:55 | So this may be a bit of a problem for you.
| | 03:57 | There are two ways to get
AAC to be available for you.
| | 04:01 | One is to be encoding on a Mac where
FMLE can grab the QuickTime version of AAC
| | 04:08 | and use it here, or if you're on a PC
like I am here, you're going to have to
| | 04:12 | purchase the MainConcept AAC plug-
in for Flash Media Live Encoder.
| | 04:17 | And that's available on the MainConcept web
site and it's running about $180 I believe.
| | 04:23 | Okay, as long as we have the video and audio
all set up, we are ready to set up our FMS URL.
| | 04:30 | So even though our published stream
will be received over HTTP, the original
| | 04:35 | live encoded stream will
be sent to FMS over RTMP.
| | 04:38 | So we're going to leave that here rtmp://
| | 04:42 | and then we type in our IP address,
and again this will be different for me
| | 04:47 | than it is for you.
| | 04:47 | You'll be using your IP.
| | 04:50 | Mine is 10.1.111.126 and a forward slash.
| | 04:57 | And then we want to send our stream
to the Live Packager, so it's livepkgr.
| | 05:05 | Now the Live Packager service is the
FMS service that performs, as its name
| | 05:09 | indicates, live stream packaging.
| | 05:12 | It will receive or ingest the live
stream from FMLE, package it into fragments,
| | 05:17 | and then create a manifest on the
fly that's available for playback.
| | 05:21 | So next we'll enter the name of the
stream and we'll leave it at livestream here.
| | 05:25 | But the Live Packager needs to know what
event we want to associate the stream with.
| | 05:30 | We're going to use the default event
that ships with the Live Packager and that
| | 05:34 | is called Live Event.
| | 05:35 | An event consists of a directory inside of
the Live Packager application folder on FMS.
| | 05:41 | Inside are two XML files where you
configure information about the event.
| | 05:46 | In most cases you can use the default
event like we're doing in this exercise.
| | 05:49 | So to actually tell FMS what Live Event
we want to use, after the stream name,
| | 05:55 | we put a question mark and we're
going to pass it in as a variable.
| | 05:59 | So the variable we want to pass
in is adbe-live-event=liveevent.
| | 06:01 | So we want to uncheck Save to File as that
can fill up your hard drive pretty quickly.
| | 06:17 | It's actually saving an FLV of
the stream that you're broadcasting.
| | 06:22 | We don't need to do that.
| | 06:24 | And the last thing we want to do is
check our Bit Rate and Output Size.
| | 06:27 | Right now, it's set to 650 and that's
a good kilobit per second bit rate for
| | 06:31 | mobile, that's acceptable.
| | 06:33 | But the Output Size isn't quite right, so
we're going to say 640x480, and that's
| | 06:37 | going to be compatible with the most devices.
| | 06:39 | Okay, and now we are ready to stream,
so we'll go down to the Start button
| | 06:44 | and we'll press that.
| | 06:46 | As you can see, our video encoding has
started and our audio encoding has started.
| | 06:50 | So we're now sending a live stream to
the Live Packager service on FMS where
| | 06:55 | it's being processed for HTTP
delivery to Flash and to iOS.
| | 07:00 | Next, we'll view this live stream on
an iPad and then on an Android device.
| | Collapse this transcript |
| Testing a live HLS broadcast on iOS| 00:01 | Now that we have a live stream being
encoded in a compatible format in a FMLE
| | 00:05 | and being packaged Just in Time by FMS 4.5,
it's ready to be played in and iOS device.
| | 00:12 | So I switch over now to my iPad.
| | 00:14 | To play this video in the native player here
on iOS I need to request the following URL.
| | 00:20 | And again, my IP address, yours may be different
| | 00:23 | http://10.1.111.126/hls-live/livepkgr
_definst_/liveevent/lifestream.m3u8.
| | 00:48 | Notice that I've just added the
extension .m3u8 to my very long f4vf file name.
| | 00:54 | This is requesting Just in
Time incoding for this f4v file.
| | 00:57 | So I can play it here on my iPad.
| | 01:00 | And here is my video playing right here
on the iPad, right from FMS with our any
| | 01:05 | additional configuration
or encoding on our part.
| | 01:08 | So it's pretty cool.
| | 01:08 | So you are now successfully
broadcasting a live stream over http to iOS.
| | 01:17 | Let's now view that same
stream on Android in Flash player.
| | Collapse this transcript |
| Testing a live HDS broadcast on Android| 00:01 | So we now have a live stream being
encoded in FMLE and being broadcast
| | 00:05 | and packaged by FMS.
| | 00:07 | And we've been able to view it on an iPad.
| | 00:09 | Now let's view that same
stream on an Android device.
| | 00:13 | Just as we did with on-demand streams
we'll use the sample video player that
| | 00:17 | ships with FMS to play the stream.
| | 00:19 | So to use this player we'll open a
browser and navigate to http:// enter your IP
| | 00:29 | address, ours is 10.1.111.126/
videoplayer/videoplayer.html
| | 00:44 | Now that that video player loads we can
scroll down and enter the following URL
| | 00:49 | into the STREAM URL field.
| | 00:50 | http://10.1.111.126/hds-live/_
definst_/liveevent/livestream.f4m.
| | 01:09 | Now our OSMF based video player
application here will read the manifest file,
| | 01:26 | get all the information it needs and
then start playing the live stream.
| | 01:30 | It will have a few seconds delay as the
live stream needs to be packaged before
| | 01:34 | it's delivered to our player over http and
we're accessing this over wireless as well.
| | 01:39 | Here is our live stream playing on
Android and the same stream can also play on
| | 01:43 | desktops as long as they
are running Flash Player 10...
| | 01:47 | So we've we've now successfully broadcast a
live stream over http to an Android device.
| | 01:52 | In the next chapter I am going to
show you how to make sure that anyone on
| | 01:56 | virtually any device can view your content.
| | 01:58 | We'll wrap up the course by
developing a universal video player using
| | 02:02 | Flash, JavaScript and HTML5 that will
provide the right video format to the right device.
| | 02:08 | Let's dive in.
| | Collapse this transcript |
|
|
13. Delivering Video Across Platforms with JavaScriptCreating a universal player code| 00:00 | In this lesson we'll create embed code
that's versatile enough to ensure that
| | 00:04 | our video plays on the widest range of devices.
| | 00:06 | Using the open source SWFObject embed
code along with some HTML5 we'll create a
| | 00:12 | player that first tries to play the
video in Flash player, then falls back to
| | 00:16 | HLS delivery for iOS.
| | 00:19 | And for on-demand content we can
continue falling back to an Ogg version and
| | 00:23 | then finally if that's not
supporting either we'll try WebM.
| | 00:27 | So the first thing we'll need to do is to
download the SWFObject library from Google Code.
| | 00:32 | And you can get at code.google.com/p/swfobject
| | 00:36 | Now for your convenience I have included
SWFObject in the Exercise Files for the
| | 00:48 | course so you can keep right on with the lesson.
| | 00:51 | But SWFOobject if you've never used it
is a very handy JavaScript library that
| | 00:55 | allows you to efficiently embed
Flash swf files into your web page.
| | 01:00 | It allows you to set a minimum
required version of the Flash player and also
| | 01:04 | lets you provide alternative content
that the visitor will see if they don't
| | 01:07 | have flash installed and we are
going to use this for our video player.
| | 01:10 | I highly recommend that you use with
SWFObject whenever you need to embed
| | 01:13 | Flash into a web page.
| | 01:16 | So the first thing we need to do because
SWFObject is JavaScript code we need to
| | 01:21 | put that into the web root of Flash
Media Server, so that code will actually
| | 01:24 | execute when we load it in the web browser.
| | 01:27 | So I will navigate to my web root,
Program Files>Adobe>Flash Media
| | 01:32 | Server>webroot and as you can see I
have copied these three Exercise File
| | 01:39 | folders already, so you want to do that now.
| | 01:41 | We'll be working here, so I'll close
out my Exercise Files and here in the
| | 01:48 | webroot we can open up the Exercise
Files for this particular lesson.
| | 01:53 | And in here you'll see index.html
| | 01:57 | We want to open this in
Dreamweaver or in your favorite text editor.
| | 02:01 | We are just going to make a few changes here.
| | 02:03 | So we want to be in code view and we
are going to use this as I said as our
| | 02:07 | template to build our universal video player.
| | 02:10 | So we'll go ahead and save this as uni.html
| | 02:15 | Save As and as you can see here also I
have a final version of this in case you
| | 02:24 | made a typo, or yours doesn't work you
can always refer to that as a reference.
| | 02:29 | So we'll save that here.
| | 02:30 | So the first thing we'll do just so we
are all on the same page here is change
| | 02:35 | the title of our page, so we know what
it does and we'll change it to SWFObject
| | 02:38 | 2 Flash with fallback to HTML5.
| | 02:45 | The next thing we want to do is make
sure that the people who visit have
| | 02:49 | version 10.1 of Flash, because that's the
earliest version that supports http dynamic streaming.
| | 02:55 | So if the client is using an earlier
version they'll be prompted to update to
| | 02:59 | the latest version of the player.
| | 03:00 | So the next area that we want to pay
attention to is this div here, this is
| | 03:04 | alternative content.
| | 03:06 | So if someone doesn't have Flash
installed this is what will be displayed to them.
| | 03:11 | The first thing we'll do is
change the title here instead of
| | 03:12 | alternative content.
| | 03:13 | We'll call that fallback
to HTML5 or iOS devices.
| | 03:20 | So this is where we will
put our HTML5 video player.
| | 03:25 | So we'll replace this get Flash player
code here and this HTML5 video player
| | 03:30 | will play our video for
people who don't have Flash.
| | 03:34 | So because the browser will keep
trying to play video tags until it finds a
| | 03:38 | format it can handle we can even add
additional video tags here for other
| | 03:42 | formats such as Ogg and WebM and we will
do that in the next lesson as well when
| | 03:46 | we set up the on-demand streams.
| | 03:48 | It's important to note that right
now you can't use Ogg and WebM for live
| | 03:52 | streams through Flash Media Server.
| | 03:53 | So let's go ahead and add
HTML5 video player code.
| | 03:57 | so we want our video tags we'll start at
Video and we want that video player
| | 04:02 | to have some controls and we'll
set width to be 640 and height 360.
| | 04:09 | Now that's a good size for devices.
| | 04:20 | And then we close the video tag.
| | 04:26 | So this will create a video player on
the page in browsers that support it.
| | 04:30 | We can add some code beneath this that
will be shown to those who don't have
| | 04:34 | Flash or don't have a modern
browser that supports the video tag.
| | 04:37 | So let's do that now.
| | 04:40 | We do up here, Your browser does
not support Flash Player 10.1 or the
| | 04:53 | HTML5 video element.
| | 04:55 | So now let's go ahead and save that
file and we've created the basic code for
| | 05:06 | our universal video player.
| | 05:08 | Right now, this page will load the
test swf that comes with SWFObject but
| | 05:11 | won't do much else.
| | 05:13 | Next we'll add links to our on-demand streams,
including those exotic Ogg and WebM formats.
| | 05:18 | We'll then move on to publishing a
live stream using the same universal
| | 05:22 | video player code.
| | Collapse this transcript |
| Publishing an on-demand stream with a universal player code| 00:01 | Now that we have our Universal Video
Player Code setup we can configure it to
| | 00:04 | play a pre-recorded video.
| | 00:06 | This the same video we used earlier
in the course, but this time we are
| | 00:09 | embedding it into a web page and
providing fallback to HTML 5 Delivery and Flash
| | 00:14 | isn't available on the client.
| | 00:15 | So to set this up, we will just use
the template that we started in the last
| | 00:19 | exercise and add a few URLs to our videos.
| | 00:22 | So with Uni.html open in your HTML
Editor and this is also included in this
| | 00:28 | lesson's exercise files.
| | 00:29 | Go ahead and save this file as uni_
vod.html and that's going to be a more
| | 00:35 | descriptive name and we are moving
up to our folder for this lesson.
| | 00:41 | And we are going to call it uni_vod.html.
| | 00:50 | And we had another version in
there, so I will just overwrite that.
| | 00:53 | We don't want to update things in
this case, but you will see how that can
| | 00:55 | be handy in a moment.
| | 00:56 | So we will click No.
| | 00:57 | So let's add the easy links first, HTML 5 links.
| | 01:02 | So scrolling down to our
video tag which is here,
| | 01:06 | we are going to add some things in
between the opening and closing tags here.
| | 01:08 | And what the browser will do, is go
through each of those items until it finds
| | 01:12 | something it can play and if it can't
play any of them, it will show this text,
| | 01:17 | provided its in between the
video open and close tags.
| | 01:19 | So let's cut that and we will paste it in here.
| | 01:22 | You know above it, we will put
in a couple of other video files.
| | 01:26 | So we will say source and then src=
explorer.ogv and this is our og file and the
| | 01:37 | next one is source src=
explorer.webm and close that.
| | 01:50 | The most important one that we
want to try first is our IOS stream.
| | 01:53 | Right, so we will put that first.
| | 01:55 | So I will say source src= and we
will put the full path to this one
| | 02:03 | http://10.1.111.126 is my IP address
hls-vod/explore.f4v.m3u8 and we will
| | 02:10 | close that tag.
| | 02:29 | Now one note about creating ogv and
webm videos, I use a free utility called
| | 02:34 | Firefogg which is available at firefogg.org
| | 02:37 | You have to use Firefox to use it but
it's a quick and easy way to encode your
| | 02:41 | videos into these two formats.
| | 02:42 | Other good options are videoRx.com and vid.ly
| | 02:46 | I have of course included these two
files in with your exercise files.
| | 02:52 | So we can just move on from here.
| | 02:54 | So next we'll need to add the URL to our
Flash HDS stream and we will do that up
| | 02:59 | here in our Flash Embed code.
| | 03:01 | We can't just play the
video stream itself here though.
| | 03:04 | We need to play it in a video player
SWF and that video player SWF needs to
| | 03:08 | support HDS streaming.
| | 03:10 | The sample player that ships with a
FMS that we have been using in previous
| | 03:13 | exercises is exactly what we need and
earlier we had copied it to the webroot,
| | 03:18 | so we can just link to it here.
| | 03:19 | So we're going to replace test.swf
and point to our video player.
| | 03:26 | videoPlayer/swfs/StrobeMediaPlayback.swf
| | 03:42 | Now Strobe Media Playback contains
logic that allows you just passed in as a
| | 03:46 | variable the name of your stream, so
we are going to do that, we just put a
| | 03:49 | question mark after the name so
then src= and then are HDS stream.
| | 03:55 | 1011/hds-vod/explore.f4v.f4m.
| | 04:14 | Now we need to have this in two
different places, so we will copy that url and
| | 04:19 | down here where we see the other test.
swf in the other object code we will put
| | 04:23 | that in there and paste and one last
step we want to sure that the size of this
| | 04:29 | SWF is correct, so we
will change it to 640x360.
| | 04:36 | And we have to do that
again in two places 640x360.
| | 04:38 | Okay we can now save this file.
| | 04:47 | Now this file is okay where it is, but it's
always a hassle to type long URLs on devices.
| | 04:53 | So to keep the typing to a minimum, let's
move this up a level to the top of the webroot.
| | 04:57 | So to do this, we go to File>Save As
and we will go up one level to our webroot
| | 05:05 | and we will keep the file name the
same and we will say Save and Dreamweaver
| | 05:11 | does prompt us to update our links and
this time we want to do that because we
| | 05:15 | don't want to lose our relative
links to some of our JavaScript.
| | 05:18 | So we will say yes and you can see it
added the past to our exercise files to
| | 05:24 | link to this SWF object JS.
| | 05:26 | One thing it did not do though if you
notice is update these links to our actual
| | 05:30 | videop file, so let's do that
quickly just so nothing breaks.
| | 05:33 | So let's say 13_02 13_02/
| | 05:44 | Now our other links are full paths so
we are all set there so we will go ahead
| | 05:48 | and say save this file.
| | 05:51 | And now that our flash and HTML files URLs
are all in place, we're ready to test on device.
| | 05:56 | So here I am on my Android device and
in a web browser we can type the URL to
| | 06:03 | the page that we just created.
| | 06:04 | So that's http://10.1.111.126/uni_vod.
html touch go and there we have our video
| | 06:24 | playing in Flash on Android.
| | 06:28 | Let's try it on iPad.
| | 06:29 | In Safari we will type that same URL
and we get the HTML 5 version of the
| | 06:35 | player, we can touch Play.
| | 06:40 | So you can see that this video now
plays virtually anywhere using this
| | 06:43 | universal player code.
| | 06:45 | Next let's try a live stream.
| | Collapse this transcript |
| Publishing a live stream with universal player code| 00:01 | Now that you've gotten a look at how
our Universal Video Player works for
| | 00:03 | on-demand content let's
configure it to play a live stream.
| | 00:07 | Now if you've been following along
you may still have your live stream
| | 00:10 | broadcasting over in Flash Media Live Encoder.
| | 00:12 | If so, great, we are going to view it
now in this Universal Video Player, if not
| | 00:17 | you want to go back to the previous
lesson where we set up our Flash Media Live
| | 00:19 | Encoder and follow the instructions.
| | 00:21 | Once you're publishing a live stream
come back to this lesson to test it in the
| | 00:25 | Universal Video Player.
| | 00:27 | Okay, so we'll start where we left off
in the previous lesson and we'll just
| | 00:30 | make a few changes to our uni_vod.html file.
| | 00:34 | So open that up in your HTML Editor, I
have it here it's also in this lesson
| | 00:40 | files for your reference and let's
save this file as uni_live and again we're
| | 00:47 | still working on the upper level of
the webroot here just to keep our URLs
| | 00:50 | simple and we'll say Save.
| | 00:52 | So let's first set up the Html5
video tag for playback on iOS.
| | 00:58 | So we'll scroll down to that video
tag and we'll change this URL to the URL
| | 01:04 | of our live stream.
| | 01:05 | It's hls-live/livepkgr/_definst
_/liveevent/livestream.m3u8
| | 01:31 | You may notice that the vod stream had
a 4v in here, we don't need that anymore
| | 01:39 | for the live, it's simply M3u8 and of
course we don't need the Ogg and WebM so
| | 01:44 | we'll delete those and next we need to
add the URL to our live Flash hds stream.
| | 01:50 | So using our same video player we
just need to change this URL, now it's
| | 01:55 | hds-live/livepkgr/_definst_liveevent/
livestream.f4m and again we need this in
| | 02:17 | both places so we'll take this whole URL,
select it, copy it and paste it down
| | 02:24 | here in oue other object code here.
| | 02:28 | Now we can save the file and we have all
our URLs in place so we are ready to test.
| | 02:36 | So here on my iPad I type in the
URL 10.1.111.126/uni_live.html
| | 02:48 | Here we are in iOS where our
JavaScript is detected to that Flash is not
| | 02:55 | installed, so it's playing the
steam in the HTML5 video tag.
| | 03:00 | You can now send a single stream and
broadcast it live across devices using
| | 03:03 | FMS 4.5 and using some simple built-in
detection play the right stream on the right device.
| | 03:10 | And there are a lots of other
sophisticated features that you can add to these
| | 03:13 | players but this should get you started.
| | Collapse this transcript |
|
|
ConclusionWhere to learn more| 00:00 | This concludes the Up and
Running with Media Server 4.5 course,
| | 00:04 | and we had a good look at
flash media server 4.5 inside now.
| | 00:09 | He may be hungry for
more, at least I hope you are.
| | 00:11 | Here are some related courses and additional
resources that I buy you find helpful.
| | 00:15 | First, there are some and of course this is including
HTML 5 video and Audio in Depth with Steve Heffernan and
| | 00:22 | my other courses, Flash Forward
2007; Fun with Flash Media Server,
| | 00:27 | and Publishing Video on the Flash Platform
| | 00:29 | and that last one will help you
get your videos up on the web.
| | 00:33 | I found that connecting with an online community can help
you get the most out of FMS and can save you many many
| | 00:38 | painful hours of frustration.
| | 00:40 | When you hit a wall with FMS and you'll
quickly find the others have already climbed that wall
| | 00:44 | and are usually very
enthusiastic about helping you over it.
| | 00:48 | Some great communities of FMS developers
include the Adobe Developer Connection,
| | 00:52 | which is full of FMS
articles, tutorials and forums.
| | 00:56 | The Flash Media Server
User Group on Adobe Groups,
| | 00:59 | and the flash media lists at flashguru.com
| | 01:02 | And finally, if you want to keep up with the latest
developments in Web Video, visit my blog learn LearnFromLisa.com
| | 01:08 | And sign up for my almost weekly newsletter full of tips and
tricks for publishing video online in flash and in HTML 5 and beyond
| | 01:17 | Thanks for getting up and
running with me, and see you again soon.
| | Collapse this transcript |
|
|
