E1 - Overview, your own Streaming Service

In 8 episodes, we’ll build all the major parts of a streaming service in pure front end browser javascript and look at Live Streaming, Ahead-Of-Time streaming, compression, and use a very simple custom video/audio codec (writtten in JSON no less!).”

Transcript:

okay hello yes Brandon you are
absolutely right that is what it's for
how are all of you this is a new session
this is something new so we have I got a
lot of interest I was I don't know who
was around last night but I was kind of
dropping by the alt f4 stream and he
does a great stream if you haven't seen
it and I was curious things were kind of
interesting because people got on the
topic of streaming video and kind of how
the internet works and I was a little
surprised and it turned into like one
question and then five questions than
ten questions the next thing you know I
was like wow this is like this seems
like it's not really a well-known thing
and you know like like most things when
you've been close to it for a really
long time like everything sort of seems
obvious but it's probably not obvious if
you haven't worked in it and I think
that a lot of people were kind of
curious like you know what what is it
like to build a streaming service how
does you know the Internet work what
does what does that mean in terms of
video how is twitch running right now
what did you used to do when you were at
Netflix and I get those kind of
questions a lot so I thought hey would I
asked I threw it to the table I said
would everybody be interested in a short
stream maybe like eight episodes or
something for exactly how it works you
know like like let's let's let's see how
streaming you know really works would
you come to that kind of thing and
people were surprisingly for it
so I said all right well here we are
it's Wednesday night that was yesterday
by the way I had that conversation so I
threw together a quick little set of
things I said all right well if you're
gonna talk about streaming video then
let's do that now this is a little bit
different from some of the other streams
you've seen me do
there's the usual Friday show where I'm
just hacking you know and and it's kind
of random it's very dense
it's covering a lot of different areas
that are totally unrelated to each other
and the and then you know I sort of
moved over from that that that's still
going on Fridays and I moved over from
that to Monday where we started building
you know one one one random night an
educational tool for how to learn
programming and that that's sort of that
that got going and so I've moved the
students over to Monday so there's two
students right now one of them's
learning Python from scratch and the
other one is learning C she already
knows Python and so there those are at
two kind of different levels and people
are sort of interested in that so this
is sort of somewhere in between this is
and we have SS Unni hello SS Unni I love
that you came in right when I said
Python that that that's very amusing but
so I was thinking about this dream kind
of more casually like this would be
something in between those two so I
don't want to go nearly as dense as we
go on Friday this will be you know
similar to kind of the the coding and
wine in fact I might have a class while
we get coding kind of session and that's
great ss you I know that you you have to
be notified every time that's there in
fact I believe you even have a bot
command about that I think that was like
one of the first bot commands that was
added when we live code at the bot
so anyway sorry getting far afield this
is gonna be somewhere in between those
two so not as dense as Friday not not as
intro as what happened on Monday this is
gonna be more like a practical
application in programming but I want to
kind of split these streams up because I
think there's two different audiences
here and I'll I'll check that you know
after you know and please sound off if
you have any comments in the chat which
is really like people who are sort of
interested in like how it works kind of
at a higher level like they want to
understand
the technology and then people who want
to just seek code and I I think that
there's not a lot in the second category
based on some of my research on some of
the other live coder streams seems like
the twitch average is around ten lines
of code an hour so I wanna I don't let
this stream is not gonna be Jessica
there's gonna be I think a lot more
whiteboard here than probably some of
the other other streams but I do want to
actually build something after we get
through the intro okay so are you all
rested hopefully you're ready to get the
answer to the questions that were asked
yesterday
I don't think SS uni was there but for
sunny I guess would be the right name
I'm gonna throw the glove on because we
are going to do some serious white
boarding and I think I don't know if
nightshade dude is around but he would
definitely have issue with me referring
to this as a whiteboard so yeah let's
see without further ado let's let's get
to that okay so in this set we are going
to build a new set of stuff which I'm
gonna call CSG flix so this is going to
be a series really about building a
streaming service and I think in eight
episodes we can probably do a very basic
streaming service it's it's probably not
gonna have all the bells and whistles
actually a definite there's no probably
it definitely will not have the bells
and whistles of a moderate commercial
service but I want to kind of like give
you an overview of the space and you
know sort of see like what it's like to
be building you know live you know so
that you can see video over the internet
I mean here we are on Twitch like doing
it so so this is this is really kind of
like an overview but it also has a
component of what's let's let's build it
you know that I don't want this to just
be theoretical like I want I want a
little bit of like how we do it and just
four SS uni I'm gonna do some of that in
Python
but really we're we're gonna mostly be
in JavaScript land for for this series I
think we might do a little bit of C in M
scripted so I don't know how much that
has sort of done the rounds for the
viewers here but basically this is kind
of like compiling you know this is like
a C compiler the script in C compiler
you know which which outputs wasm you
know which is you know something I'll
run so this is like browser languages
and up on the server just because I want
to try to keep things simple it'll
probably be you know a bit of Python but
that I don't want the main focus to be
about this the code stuff I mean I want
I want to build it so that we know we
got all the parts and to see if it'll
make any sense but this is really really
we're gonna be staying more on the
overview like conceptual side so alright
everybody says let's do some streaming
on the Internet let's let's just put a
video on the internet that's a piece of
cake how are we going to do that well
yeah it's easy you just take a video
file and you find wherever the internet
is and you just slap that video on the
internet done people hook up their web
browsers or their smartphones and they
they just access this stuff and you know
boom done you know get paid alright well
yeah okay so reality that's really not
that simple now you know things have
gotten a lot better since you know I
originally joined when I was working at
Netflix that was and by the way just to
be clear I do not work at Netflix
anymore but I was there for you know
just about six years and we did a lot
that didn't really exist at the time
like it was all very new and emerging
and you know that the whole notion of a
Smart TV was you know this is something
that wasn't really around so so we
didn't have the
this TV set notion you know this large
you know Smart TV kind of world you know
we were there there were there were
smartphones you know but it was mostly
web and some of that there were like a
few boxes you can attach like you know I
think there was that that web man it's
been too long but basically they were
there were a few boxes you could hook up
to your TV which were trying to be sort
of web browsers that would you know act
on the internet so if you got this to
work and you know back then we were
using stuff like Silverlight you know
this some of that predates me there was
like some early media center stuff and
you know there was all sorts of things
that we're not really gonna do too much
of the history of this we're gonna
assume that we have modern web browsers
which have all the modern standards we
have modern TVs we're going to be
focusing mainly on the build for a web
browser and we're gonna talk a little
bit about what you would do if you were
on a TV or if you were on a mobile
device it's basically if you can get the
web case to work then these other ones
they've they've grown up a lot and you
know it's it's a reasonable conceptual
model for what's gonna happen okay so in
this world we do have a video tag so you
can literally just go over to a web
browser and say yeah I want to put a
video and you know like go and go and
get these things if you support this
codec then get this and if you support
that code act and get that and that is
sort of the old world of you know
mostly this was built around downloading
so when when you would you do this back
in the day it was really about like
especially when you know the internet
was a lot weaker than it is today you
would end up like pulling down this file
which was you know as compressed as we
could make it you know so you would take
this massive video file and he would try
to shrink it down in this tiny little
document that you could then spit out
and you know play on your browser and
the internet was really slow at that
point these days like things got a lot
better you know the tubes got bigger as
the network engineers would probably say
you know this this is like after we get
all sorts of advances in
in telecommunications so we get to do
stuff that we didn't get to do back in
the day I mean so back when like you
know flash and Macromedia or you know
real video or or see you see me even
like this this was like a very different
internet that these protocols were
created in and they're sort of emerged
like you know from this stuff there
there was there was some stuff about
real-time streaming and real-time media
but we're not really gonna touch on that
we want I want to sort of focus on like
what it would take to build a full
streaming app today so as much as
possible I'm gonna try to stay in the
browser for this and we'll we'll just
you know kind of see how far we get all
right well like I said this was this was
kind of something let's let's let's
change colors up for SS unis this this
was a world where we used to have to
download right so everything every
download was you know would take you
know some some crazy length of time and
you know if you were on a low-end
connection like you know somewhere like
let's let's say like the fastest modems
ever got on up through you know things
that which were more like ISDN or DSL
and you know they would kind of like you
know that this was still in sort of the
kilobits world and this is where like a
lot of the early video codecs sort of
grew up they needed to like deal with
this you know I and so they would really
get rid of the picture quality but we
wanted to move over to this newer world
of streaming and streaming in and of
itself is really just a very glorified
version of downloading like the real I
would call the real dividing line
between these two as you know this you
sort of wait you wait for the whole
thing to come down and when it's there
you play it and you know regardless what
your internet may be like this will
always work you know it's just that you
might be
waiting a very long time and hey what's
up seven lots of numbers how are you
doing
so that wait in play world was that
that's not a great customer experience I
mean waiting like especially if like the
video was any sort of like reasonable
well I'm not reasonable but I mean you
know high high definition sort of size
like this weight was really extreme and
I remember like he was in my Apple TV
back in the day this this was actually
something I borrowed from a friend and
and that it it was like kind of my first
experience with this notion of like you
know on-demand downloading not waiting
for like a disc to come in the mail
which you know we definitely know what
that world was like and it would usually
prompt me with something like okay you
know do you want HD or do you want SD
and if you chose HD because of course
who doesn't want the good quality this
would say something like you know ready
in 28 hours and it would measure it you
know it would start like download here
we go okay you're getting like 3k per
second and this thing is gonna be like a
whole ton of seconds like lots of
seconds and you're gonna wait a long
time and then you're eventually going to
get this HD version of your show and
then whatever licensing got a little
better and then they would be like okay
well you know what you can use the SD
version that'll be ready in like an hour
but alright so you could buy it and wait
you know this is still in that sort of
downloading world yeah that was it was
sort of insane back then 7 like it was
just like I remember seeing that on a UI
going like wow and that's kind of the
world that like Netflix grew up in you
know Netflix was like alright well why
don't we just like you know mail you
we're just gonna we're gonna mail you
like this disc and and you can like just
get back in about this timeframe if
we're very clever about how mailing
works then you know and that would be in
like the one day to you know sort of two
day and and by the way I was not at
Netflix when when things were primarily
DVD so I can't tell you too much about
that other than the stories I was told
but they they did tests around this you
know and and they were really competing
with a different world of sort of like
blockbuster and you know in in that
world you could drive yourself like in
your really crappy car over to a
blockbuster I'd be like yeah this is
like the kind of thing that we're gonna
you know pick pick out you know some
here's a whole bunch of boxes and you
know you could sort of choose like yeah
I want that one and you know you could
be back and watching you know within
let's say like two to three hours you
know depending on where you lived like
maybe they've blocked if blockbusters
downstairs like anything that involves
leading that leaving the house is like
minimum 30 minutes I learned this when I
lived over in Asia and you know if you
if the store is literally downstairs in
your building you are not going to go
anywhere until this happens yes seven
actually that's a very funny side story
that I could tell you a lot about but it
actually became like news recently it's
not not major news but because the the
state unemployment I originally learned
COBOL sort of as a joke and the state
unemployment offices like when the
financial situation started getting
worse than ever one was applying for
unemployment they they were like yeah we
need like COBOL programmers to show up
and so of course like everybody who knew
me at Netflix was like that knew that I
wrote COBOL for Netflix like I was like
oh guy this is like your time you can
totally get out there and like do COBOL
and I was like listen if it means like
people getting their unemployment checks
fine I'll do COBOL but you know if it's
unless it's pretty dire I am never going
to program COBOL unless I'm trolling in
which case you call it trow ball which
is you know the go link that's at
Netflix if for any of the Netflix
employees that are watching but know
this this kind of
first course entirely and I was like
okay because the state governors were
like hey we really want to see like
we're calling COBOL programmers it's
like kind of a dire situation I was like
all right look for that I will do so
that is totally the right time
let me not yeah I don't I don't want to
go too much on the COBOL world for
tonight so we're gonna we're just gonna
back that out and pretend that didn't
happen so let's let's forget about
tro'ble and all the wonders that we
could do all right so you know in two or
three hours I could get a video from
Blockbuster thirty minutes if it was
like downstairs I in like a day I didn't
have to go anywhere but I could get you
know I could get something mail maybe
two days depending on where I was you
know sometimes like three but you know
generally speaking this is this is
pretty fast and so Netflix originally
built around this like sort of with a
queue so it was like as soon as you
return something like the next thing
went out the door you know and and that
that kept you moving you know there was
there was always kind of something to
watch but you know moving into this
world of like let's download everything
and wait 28 hours this was this was a
non-starter so might at least for me I
mean my first experience I was like wow
so right what do you do with that well
that's where we get to this world so we
move out of this download world and we
get into the streaming world and
streaming was kind of like the flip side
of this which was like can we play it
while it's downloading so we're still
gonna download the thing like it's it's
it's going to download to the device
that whatever you're watching on but all
of those bits have to come in but now
we're gonna try to dynamically react to
how the download is going so I can start
playing like right away in this world
I might have downloaded like if this is
like the whole file like this is the
media file I might and by the way I'm
over simplifying here you're gonna have
like a video
thing you're gonna have an audio thing
and they might be interleaved but you
know let's just say like if I've
downloaded like this much of it I can
play I can play I can start playing
because the theory is that all of this
will be downloaded faster than I get to
it so as long as I'm playing like
there's some time that I need to watch
this thing and if we assume that every
playback is just one second per second I
got a two hour movie if I know that I've
got like you know ten minutes of this
thing downloaded and I'm downloading
every minute that I download I download
two minutes of movie so that's like two
minutes per minute of download then I'm
going to stay ahead this download
download is faster than playback and as
long as that stays true for the
remainder of the movie I'm good like we
can always just kind of keep downloading
a chunk playing downloading a chunk
playing downloading a chunk and if I do
this sort of seamlessly between chunks
then I'm I'm gonna get to watch the
entire thing without waiting 28 hours
and hey what's up ethics I haven't seen
you in a little while
so in a nutshell that's streaming the
only other difference is that I throw
the download out when I'm done so
instead of like you know if I'm if I've
got my device and then you know there's
some big database of all the movies in
the world and you know whatever my
streaming service is like saying that
it's going to be CSG flex then you could
say oh you want movie one then here's
movie one you know and as long as we
download chunk one and then chunk - and
then chunk three and then chunk for as
long as I am playing back slower than
this is happening I'm good to go and we
just take these chunks and we get rid of
them
in the trash okay so except you know I
guess we could be like next and we could
do a recycle whatever so moral story is
I don't save a copy of it and you know
I'm skipping over DRM and some of the
other complexity but basically that
happens and what's up nightshade dude
how are you doing
yes that's the buffer world and that is
exactly the thing that we have to worry
about most so this is our first real
issue okay somewhere I have a movie and
let's say that you know just just to
kind of keep round numbers let's say
that this movie is a hundred megabytes
and I should really use the modern
labels for this which is you know it's a
hundred megabytes so I need to get this
whole thing you know down from you know
some server and I'm treating them all
like databases because in a sense it's a
database of movies and so I need to get
that down to you know my little desktop
and you know we're dealing in the old
world that this was like a PC or
something and I need to make sure that
if it takes this long to download the
full hundred megabits this is a hundred
100 megabytes sorry we won't talk about
speed it's gonna be bits I need to make
sure that whenever I start playback I've
got enough of this movie downloaded that
the rest should keep on downloading
before I get to it and the speed that
I'm playing and the speed that it's
downloading actually you know what we
have colors don't we so the speed that
it's downloading here as long as this
speed is faster than this playback speed
we're okay
but if if we ever get the situation
where this speed ends up being slower
than this speed you know if I'm playing
back here and
this is my you know my download speed
then I'm gonna eventually run into
trouble between these two unless the
movie ends in time and that is exactly
where we're gonna get a a rebuff er so
we start off by just playing the buffer
game so fill up enough of the buffer
that we have enough to play back so that
we're guessing that in real time
this is slower than this and we're fine
as long as we don't run out of buffer
and if we do run out of buffer then what
do you get on your screen you get that
spinner that starts going all the time
yeah it's like that maybe bite you know
thing it's like the new SI unit you know
it's like I was I was thinking like in
terms of you know 1024 instead of 1000
you know like which of these is like a
Meg you know like this is sort of like
the mega I'm used to but you know this
is the the Meg that started going out
the door for memory cards and you know
whatever because this is a thousand and
this is base 24 well base 2 sorry that's
where you get that 24 from and so you
know how do you differentiate the two
like I think yeah you're supposed to do
that right yeah I seven I agree with you
like 1024 is the real Meg and that's why
I'll just keep sloppily saying Meg's but
you know it's it's it's really it's like
I think I think it's supposed to be this
but let me know chat let me know if I've
got the wrong term there all right so we
assume that this is really bad because
this is a really bad experience if we're
if we were playing you know we're
watching the movie and her characters
there's some like big dramatic scene and
you know he's gonna kiss her she's gonna
kiss him or you know who knows what's
gonna happen like and then all of a
sudden this whole scene just freezes you
know and then I get this spinner kind of
like interrupting the action in the
middle like this is bad right you know
we would assume that no one wants this
experience like I think just about
everybody would rather wait a little bit
and hold this up so that like this sort
of this buffer fills up a bit and by the
way we will probably like adjust our
buffer to be bigger if we can if there's
enough memory rather than have this
experience of like breaking up in the
middle and and and that's just bad news
so this is sort of a bet the basic
problem that we're gonna have as we're
building out CSG flex so like how do we
know when to start playing you know like
how much buffer do we wait for you know
how much do we you know how much do we
measure you know from how fast the
Internet is acting like you know and how
well can we compress the thing and this
kind of gets to another area that we're
allowed to play with which is really
about quality and I'm going to borrow a
little bit from Anthony parks magic
father's at one of the things that
you're gonna see here that I'm gonna
reference quite a bit is there's a ton
of talks on the internet about and this
one by the way this comes from Anthony
Park he's kind of the ex-head of the the
streaming platform they have a streaming
technology or not not exactly sure but
they're they're mainly concerned with
devices over at Netflix but he gave a
few talks about this where basically he
talked about the Iron Triangle of of
streaming and I'm gonna I'm gonna draw a
better triangle here but we have these
variables that we can sort of play with
which is like like how long to wait
right so this is like if I start
downloading like you know how long do
you want to start downloading before we
actually allow playback to start right
so we want this to go very quickly like
you know we want the user hits play we
want to be playing as quickly as
possible
but we're also going to get to play with
like what's the chance
of a rebuff er and this is gonna kind of
depend on like what we know about the
network what we know about the device
you know like how how much can we know
in the given situation like if the users
sitting on like a nice FiOS connection
you know they're there and they've got
fiber or they got Google Fiber you know
and and they're they're just loving all
of their gigabits versus like a user
that's on let's just say unnamed ISP
with you know like you know a couple K
per second here you go try to stay on
the right units so here we're sort of up
in the you know gig per second sort of
world then what's the chance that this
could happen you know like that we could
start playback but you know we run out
you know there's not enough buffer and
real-time kind of gets ahead of us and
the last part of this that we can sort
of play with that I was just mentioning
is compression and this is really about
quality so can I deliver a lower picture
quality like can I give you the SD
version of this and then when things get
rosier and I think that you've
downloaded enough or your internet seems
to be acting right I can upgrade you the
HD version and then maybe if things get
bumpy and suddenly the internet gets
slow I can give you like an SD or I can
give you like sub st you know whatever
that is but we have a lot of like
definitions of this stuff from the TV
industry I mean you know this this I
think officially starts at 480p
technically HD but not really you know
up to like DVD quality like 720p and you
know up to you know like a 1080 and then
you can you know keep on going and you
know I this it probably bears mentioning
but something very strange sort of
happens after this when you go to 4k
because this is not four times this this
is basically all of these dimensions
over here are about
what the vertical size of your screen is
like what's the resolution on the
vertical dimension until you get to this
one which suddenly switches over to
what's the horizontal dimension because
the number is bigger 4k would kind of be
like in these sorts of units would
probably be something more like two
something okay
in fact it's usually like not even a
full it's like three you know a you know
it rounds up so okay is that making
sense so far is that we know our this is
our I our new Iron Triangle I don't know
if you are familiar with the old Iron
Triangle it's an old iron triangle in
business which was you know quality
speed it's different places are gonna
call it different things but you know
like I think the traditional one has
costs so like quality speed or cost
choose any two so you you can have two
of these so you can you can be really
high quality and very expensive or you
could be very expensive but very quick
you know and get the product done or you
can be really high quality and really
quick but you know so you know this is
kind of like your trade off you know in
your basic Iron Triangle and the Iron
Triangle of streaming from Anthony Park
it's it's more in this world okay great
well that's that's it we'll just we'll
just build it right this is a let's be
more pink here so yeah all right there's
lots of different getting away from sort
of that for that Iron Triangle where we
know all of the content that's going to
be delivered to the user so this is this
is kind of like taking that DVD
you know the blu-ray world and it's
really picking it up and it's putting it
in the cloud you know this is this is
like the internet version of that so
that's fine because in this case the
thing exists ahead of time so like to
borrow compiler terminology like this
this was is already completed so this is
like a movie or a TV show but it's not
something like a person-to-person call
or a you know and this is you know
something more like you know Skype or
web RTC or whatever or something which
is more like twitch you know which is
like live you know sort of live stream
you know and they actually twitch
exposes exactly the choice that you get
which is you can tune directly between
either latency or quality and they
actually give the broadcaster the choice
like you can say like do you want a
lower latency stream where your viewers
get to see the thing faster or do you
want a better quality stream meaning
that they're gonna take a little bit
longer to do the compression step and
they're gonna also probably choose a
larger file size so you know again they
they can't get away from the fact that
you know it it it has to play back in
real time right otherwise like it's just
the streams gonna stop and in the case
of twitch they can kind of make some
other choices like you know how many
servers do we want to throw at this
thing you know like like do we want like
like three servers this this one's
working on the 480 version and this
one's working on the 240 really
postage-stamp kind of version and you
know again using those vertical
dimensions and this is like you know the
original stream and I'm just reflecting
it directly or you know maybe somebody
has like better broadcasts capability
that's not a they have some knobs they
can tune - and I think they I'm not
really sure actually on the case of
twitch like right now I think that
you're only getting the original
broadcast as whatever I'm sending and
they're not doing any of this
transcoding so that is gonna cost server
resources so I mean in the way that they
probably built it I
haven't seen twitches code but that is
gonna you know this is gonna be a little
more expensive so they're probably gonna
want a limit like who it goes to and
that means that like things like mobile
applications like we're you know the the
cell network is slow you know versus
like you know a fiber connection you
know like we're you know this this might
be really really fast you know big pipe
versus some crazy airwaves they're not
gonna be tuning probably as much for
this in the case where they don't want
to throw a lot of server resources for
it as opposed to if they did you know
and they want to make sure that there's
a live transcode that's low latency so
that might take a bigger server so they
have some knobs that they can tune which
is kind of more about we don't want that
well we're gonna move on from that
anyway but they have some knobs they can
tune about like how many how much CPU
this is really about like how much CPU
do you want to dedicate to the problem
and it could be a GPU or it could be an
FPGA and you know all the other tricks
that you can use to encode this thing
quickly but I mean more all the story is
like how much resource do you want to
spend on putting the minimum number of
bits at the highest quality versus like
how long it's going to take the user to
get there so this instead of an Iron
Triangle we're gonna just call this an
iron line maybe a copper line I don't
know yeah let's let's just use periodic
tables symbols because I want to write
all that so the copper line instead of
the Iron Triangle so all right so that
gives us sort of a rough overview of
streaming we have to make some choices
about like picture quality we have to
make some choices about latency we have
to make some choices about chances of a
rebuff ER or a stream stopping and and
I'm just gonna stay on we're gonna we're
gonna take just sort of like I'm gonna
use the Netflix bias here that rebuff
errs are the worst thing
could happen and you know this is the
you know and then you know how long it
takes you know which is like I'm just
gonna call that delay versus you know
the quality and this is probably the
variable that people are least concerned
about as it's happening I mean everybody
wants the highest quality possible-- but
they also don't want to wait that long
and they really don't want to ruin a
scene so in this sort of optimization
triangle with the delay the quality and
the rebuff er chance
Netflix is kind of usually more over on
this side like you know rebuffed errs
are super important delay is very
important quality also important but
this this kind of depends more also on
pricing and stuff like that so you know
I'm just gonna guess that these days
they're probably more here I mean when I
was there it was kind of more like here
and you know it's just kind of this
gradual shift but you know keep in mind
as the internet keeps getting faster
this becomes the variable you probably
need to play with less but as TV start
to get better and better and you know
resolutions go up like what are you
gonna do when you have 8kv are you know
then that's gonna cause more demand on
on our compression all right well that
is kind of our brief brief overview so
we need to make a choice there about
what we're gonna care about and in the
example of CSG flix
so in our streaming service we can
choose the simple one you know would be
like lots of delay so delay high-quality
you know we're we're just gonna keep
this like pretty flat to you know you
know maybe maybe we'll do some heavy
compression we'll see and rebuffering
you know let's let's try to build if
we're gonna build a real one let's let's
try not to go
crazy with this let's be careful here on
the rebuff aside okay so now we know
what we're gonna build that also kind of
gets to like you know we're gonna do the
äôt case well we'll see how interested
we are and maybe going over later on to
the live case they the assumptions are
slightly different but the general idea
is the same okay we are going to use one
platform so Netflix on the other hand
uses something like there's a thousand
different TVs they support there's you
know thousands of types of phones they
support every browser in the world we're
gonna go with chrome chromium and we're
gonna go with Linux so you have to be a
Linux user on Chrome that's the only
thing that we're gonna support
everything else is gonna be maybe
obviously if you were gonna build a full
commercial product you would have to
invest a lot more in this because you
have to meet your users wherever they
are and we're going to go on so we know
that we want this one platform we want
it to be simple and we're gonna try to
stay simple on the web server side so
we're not going to go like Netflix is
sort of famous for this that one of the
reason reinvent talks they said like
yeah we use hundreds we spin up and down
hundreds of thousands of servers in a
day I'm sure right now these days with
everybody watching at home it's maybe
even worse I don't know but you know
like I said I haven't been there almost
a year I haven't seen inside lately but
back when you know I was much closer to
it it was you know we didn't have to
worry too much about servers I mean some
concern but that was kind of as the
containerization stuff was spinning up
we're gonna assume that we have
containers day one so we're just gonna
I'm probably just gonna use very simple
LXE if if we get to it I mean we might
we might
I don't want to get too bogged down in
the sticks any of the pieces that we're
gonna build you could upgrade so in fact
maybe in follow-on shows after that
we'll we'll do that you know will
actually will upgrade those pieces I'm
not gonna worry too much about DRM for
now it's a very different field we're
gonna talk a little bit about like keys
and user stuff you know but it's this is
sort of like a different there's there's
lots of resources available on the
internet about this I think there's not
that many available about streaming
either ahead of time or live so I'll
just I'll just kind of hand wave on that
all right well what do we have in store
for you
all right so in the world that we're
about to enter and I think that world is
a greyish world that's too dark isn't it
okay let's go a little bit lighter all
right so in this grayer world that we're
dealing in I've already mapped out
probably eight of these I work I'm gonna
adjust this based on whatever you know
I'm gonna be guided by you I mean if we
want a little bit more detail on
something I'm like I'm not trying to
produce this for YouTube so like let's
let's let's let's head more onto the
live side of the talk as opposed to the
the pre-made site so our service is
going to be äôt but our our explanation
is going to be live so today we're
talking about the overview that's that's
that's not I think that kind of makes
sense chat definitely let me know if
like you know that any of that was a
little bit too fast so then we're gonna
talk about video as you know kind of a
group of pictures and you know this is
gonna be about like you know how are we
going like what bits you know so what
are the files that we're gonna be
delivering how are we going to get them
to play back on our
test device you know and that's where
we're gonna be shortcut we're gonna be
using like JavaScript and we might be
this is where we might be using and
scripting so let's see what makes more
sense in terms of what we can do with
the actual engine okay so then we're
going to get into compression which is
about like can we get more quality and
less bits so the only bits that we
should be really keeping are the bits
that you're gonna contribute to me right
yeh yeah okay now I'm just kidding I'm
not really here for the bits so and then
we're gonna get into the UI that you
would need to build like how does
somebody actually like select content
and that's kind of an interesting area
this is actually where the prime agent
is right now over at Netflix although
he's partially concerned with this stuff
then as we at that point we're gonna
have a pretty decent lab-based streaming
engine which has never seen the real
Internet and what is the real Internet
we're gonna we're gonna talk about the
real internet because this is the world
that breaks most companies from getting
into the streaming game and it really is
a lot harder than you probably think at
first and this is I think the thing that
ends up eating up most of the people
that try to get into this field like oh
yeah it's easy I just put the video on
the internet you know and video in the
cloud and you know it just works it's
like no the cloud does not just work
that's probably the largest part of
Netflix from my own experience so then
we're gonna get into a little bit of
just a tiny bit about personalization so
this is gonna be kind of more for fun
this is really more about AI and you
know some of the other fun stuff that we
can talk about and this is about like
you know getting users to find stuff
that they want to watch and can we do it
in less keystrokes and what's that going
to take and then we can talk a little
bit here this part I'm a little bit more
I'm not really sure in terms of episodes
if we're gonna focus more on new users
and what it's like to sign up or if
we're gonna talk more about a be tests
and how we're gonna build the best
possible product we could make but I'm
gonna let this be kind of a poll user
choice and we'll see over there and then
eight is really gonna be our you know
clothes and some advanced topics based
on whatever you know people are kind of
most interested in alright so that ought
to be fun I think that's enough
whiteboarding now we we're not gonna do
too much on the code world for this
episode I think that that's already kind
of a lot of dense stuff so I did just
just for your reference I've set up a
brand new directory for this series that
we'll be using and then this is this
will be our CSG flex and you know today
we can make our episode one which is
really about like overview the things
okay so we created our one piece of code
really just touching a file but so in in
this world we're probably gonna just do
like a really basic like app to get
started with now unlike the CSG learned
we're really gonna do all of this in one
application we're really only concerned
about one application so here I'm just
gonna say like we're gonna make a player
which is our playback device play on
player and this will be a I'm gonna call
it on a web app but it's really going to
be the it's really going to be the
the climate side of this that we're
gonna focus on so we're mostly gonna be
in the JavaScript tier for for the
player or unscripted so let's let's just
call this player I think look at me and
I actually did that all right I'm just
gonna I'm gonna use the thing that I
already don't alright so this will be
our player this will be where we you
know actually do all of our magic stuff
and if I go in here what is I'm scripted
let's just install and script it in case
we need it so M scripting is a pretty
sweet tool so this was this is a very
clever idea that somebody came up with
so I'm just gonna here it was just
starting there so installing it in
script in itself is a it's a compiler so
I've got my order ordinary like run in
the middle like C compiler which these
days is really usually the canoe C
compiler so most playback engines are
typically written in something lower
level than JavaScript I think that
performance is probably fine that we can
probably get away with writing most of
it in JavaScript and I think that'll
probably be a little more accessible and
you know less work we can do it in less
lines of code but just in case we need
to let's let's let's actually I mean I I
did this very briefly in the other in
the other show when we were talking
about risk 5 but this is instant
basically we'll take it'll compile to a
subset of JavaScript called web assembly
which nowadays has become less of a
subset more of a separate language but
it was originally built for that and
this lets me write c programs and run
them on the internet yeah I can I can
write a C program and run it in a
browser environment as opposed to that's
just as JavaScript it also lets you run
it in node 2 but I'm not really sure why
you'd want to do that unless you just
want one
codebase but and actually I'm scripting
is really easy to install if you haven't
done it before I like what they do which
is so you basically say like yeah you
install the latest tool chain pulls all
a bunch of things that we're gonna end
up using and then you just activate that
you know you can have different versions
which is why they allow you to to do
this it's not too bad of an install I
mean it does have to do like a little
bit of work and hopefully I don't run
out of space
I'll be doing this I've been pushing
this machine hard so let me just check
ok so that will give us the option like
if if we're not getting enough out of
straight JavaScript then wasm assembly
ASM Jas like doing assembly JavaScript
ends up sometimes getting a lot better
performance so we'll see how far we have
to go it might be that might be fun in
the advanced session but I have a
feeling that that's not gonna be the the
main gist okay so we basically take this
thing and we get our environment ready
all right we're good to go
now we have EMCC compiler okay so what I
can do with that is I can just now I can
do things like write you know a C
program like if I just like I can write
a normal and this will be important if I
want to do things like STL and you know
if I care about this this might be
really important for video playback so
especially if we're not gonna use a lot
of the standard codecs as we're going so
I think it takes standard calling
convention but it's gonna throw the
parameters away I don't think anything's
gonna show up
so I can just say like welcome from
inscripted all right that mute that
silly message and I can do this and why
Azzam goes and pull generates a few
things that it's gonna need for the
runtime so that they can work in the
JavaScript environment and we're good to
go we get this assembly output a simpler
output and that gives us our Jas file in
our wasm file and one of the neat things
I can do is I can say like you know give
me a little web page that I can host
this in and I can actually go and hit
that peer see here's all that stuff we
just created okay cool so we can use
that if we're worried about the video
playback performance we're gonna see how
far we can get with pure JavaScript I'm
not sure I mean I like I said I came up
with this idea yesterday so you know
we'll see we'll see how much performance
we're gonna need one of the things I can
tell you as a performance engineer don't
worry about the performance performance
is one of the problems you really wanna
have because generally speaking like as
long as you wrote the thing to be okay
and you finished it that's more
important than having the fastest piece
of code for like given segments but you
spend so much time optimizing that that
you don't finish your whole product so
it's it's better to write high level and
sloppy quick you know maybe not sloppy
like you want to be orderly but then it
is to build the fastest version of
something that you know may or may not
matter I'm putting this out here mainly
because I've never seen a pure
JavaScript video engine so and I haven't
done much research on that but that I've
seen stuff that triggers that uses a
bunch of hard they use a bunch of
assistance from the native part of the
you know
usually and see the native libraries
available in the browser but no I'm
talking like pure hundred percent like
that I'm not I'm not sure what we're
gonna find there so we've got this just
in case
no7 you're you're probably not gonna
need to see I'm just putting that as
sort of a last resort so we can always
move that like if we have to build our
own custom player for this then so be it
but I have a feeling that's not gonna
fit into eight episodes I think we're
gonna end up spending all of our time on
the player okay well that's just coming
up on about an hour so I think that
that's probably a good place to stop
that's it's it's it's a bit complicated
to see like how all of these pieces are
gonna fit together and that's you know
just just to kind of like quickly take a
look like these are compression any one
of these topics could be an entire
division at a company could be an entire
like course and CS could be an entire
degree we're gonna try to touch them
lightly so that we get something that
works in each of these areas and we put
them together to build a full complete
end end video streaming service seven
did it actually stopped showing up for
you or are you just seeing the the
whiteboard screen here I think I think
it's coming through but I'm not 100% on
that so yeah I think that that's
probably the best place yeah oh I see we
have a couple new follows so thank you
nine dog nine dog that's kind of an
awesome name
I appreciate the follow and mr. deviate
and the receiver kind of earlier so but
I do appreciate the follows and let's
see how far we can get with this I mean
you know I've worked in various parts
when I was at Netflix I've worked on all
these things at one point or another but
you know could we do this like
completely like from scratch with
without like really counting on a lot of
other stuff I'm not really sure so we're
gonna learn that as we go along that'll
be kind of the fun part for me for video
on the surface I want to try to avoid
copyright stuff I really don't want to
get into DRM so we're not gonna be
taking fun movies and shows that you're
gonna watch on Netflix later or Disney
Plus or Hulu or whatever you're gonna
watch it on who's got who's hiding
Picard's these days oh yeah it's the CBS
all access I haven't seen it yet so
don't spoil it so we're not gonna do
that
we're gonna stick to video that I've got
a license to we're gonna stick to but we
need we I should have enough that we can
kind of build a whole streaming service
because it wouldn't matter at that point
once you know how to assemble the whole
thing it won't matter if you did it with
like Hollywood movies or Bollywood
movies or you know kung fu kung fu
serials or whatever it'll exactly the
same stuff is going to apply especially
if we get to a full end end streaming
service like CSG flicks in fact let's
we're not doing welcome to Lazar we're
doing welcome to CSG thanks okay so I
can go and do this and then I can reload
my thing and yeah we get our full we get
our art player which doesn't have much
of a window yet one of the nice things
this gives you just a default UI to host
your wisdom you can actually host this
in any kind of web application you want
this area here we actually get a
graphics display which is really nice
it's basically a canvas
I'll try writing directly into the
canvas from JavaScript so that'll be
kind of our first attempt maybe we'll
just play with some direct Dom
manipulation prior to that but and then
they give you a little console to play
with so this is our just in case
hopefully we're gonna stay with
JavaScript for the majority
so thank you everybody for showing up I
think we're gonna I don't know let's
let's go take a look around to see who's
who's on right now I see hello the alt
f4 is actually on right now so I'm
actually gonna see if he's live coding
or or not
I think yeah no he's totally he's there
but all right well I think I think we're
gonna head over there for everyone who's
around and yeah I hope you enjoyed the
stream this was I'm gonna tell him that
I'm taking him up on his offer when he
was like hey can you explain how to
build netflix from scratch yes the
overview is done we are going to do the
whole thing and I'm gonna keep this
mostly on Wednesdays and I'm gonna steal
a bunch of the Friday sessions to do it
as well so we should be done in like
just a couple weeks streaming service
from scratch and nightshade dude thanks
for coming by thank you seven thank you
SS Unni thank you everybody who dropped
by it was it's fun and we got a nice
little project to work on here so I hope
to see you again Brandon as well at our
future streams let's check out all that
for