►
From YouTube: Building Metaverse experiences using Teams LiveShare SDK
Description
In this 20-minute developer focused demo, David Rousset shares a new SDK in preview for building collaborative meeting extensions. Secure real-time collaboration for Teams. Low-friction dev - web-based SDK, fast integration time, robust distributed data structures, free fully managed service, regional scaling, local browser testing. Demo, how to get started, sample and resources. Uses Fluid Framework and the LivePresence data structure (component). Package simulated environment as a Teams app that’s seen by all meeting participants.
This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 17, 2023.
Demo Presenter
• David Rousset (Microsoft) | @davrous
Supporting materials
• Sample - Metaverse Collaborative Virtual Visit - Live Share sample | https://github.com/davrous/metaverseliveshare
• Documentation – Live Share SDK | aka.ms/TeamsLiveShare
• Documentation – Live Share media capabilities | aka.ms/TeamsLiveShareMedia
• SDK – Live Share SDK | https://github.com/microsoft/live-share-sdk
• Samples – live-share-sdk/samples | aka.ms/LiveShareSamples
• FAQ – Live Share SDK FAQ | aka.ms/LiveShareFAQ
• Preview – Public developer preview for Teams | aka.ms/AAgxxj5
• 2022 Build Session – Make your meetings more interactive! Learn how to build engaging synchronous experiences your users will love | aka.ms/teamsliveshare/build22deepdive
• 2022 Build Session – Build collaborative apps with Microsoft Teams and Microsoft 365 services | aka.ms/teamsliveshare/build22collabapps
• Game Engine – babalon.js | https://www.babylonjs.com/
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls
A
A
A
So
you
don't
have
any
back-end
to
manage
it's
going
to
use
the
fleet
framework.
So
if
you
don't
know
the
feed
framework,
it's
kind
of
an
abstraction
on
top
of
web
socket
to
do
real-time
communication
on
the
web,
and
this
is,
for
instance,
something
using
the
loop
component.
So
maybe
you
already
use
some
Loop
component
when
in
real
time
you
can
live
edit
with
other
colleagues.
You
know
a
part
of
of
your
components
somewhere
in
teams
Outlook
or
anywhere,
so
it's
using
socket
for
that.
A
So
it's
it's
using
this
street
framework
and
add
another
extraction
layer
dedicated
for
teams.
So
it
means
that
you
will
have
access
to
the
context
of
team,
for
instance,
and
it's
very
low
friction
development,
because
I'm
not
a
huge
back-end
developer,
I
I
prefer
spending
my
time
on
on
the
front
end
and
I've
been
writing.
You
know
3D
engine
in
the
past
named
Babylon
GS.
That's
why
I'm
a
huge
lover
of
front-end
development-
and
this
was
a
perfect
fit
for
me
like
the
live
share.
Sdk
was
taking
care
of
the
back
end.
A
The
socket
the
secure
and
compliance
stuff
is
going
to
be
scalable
and
I
just
asked
to
focus
on
the
client
code,
so
it
also
provides
other
type
of
service.
Like
you
can
see
in
the
screenshots,
you
have
like
a
kind
of
a
surface,
a
specific
canvas
to
to
draw
on
it
in
a
collaborative
way
like
you
can
see
on
the
screenshot,
with
a
picture
of
the
various
people
participating
to
that.
So
this
is
what
you've
got.
A
So
it's
low
friction
there,
because
you
have
a
SDK
either
for
JavaScript
or
after
script.
It's
very
fast
to
be
integrated.
The
solution
I'm
going
to
demonstrate
you
I
was
able
to
build
it
in
two
three
days
and
mainly
it
was
because
I
was
discovering
the
platform
reading
the
doc.
Reading
the
sample
trying
to
understand
really
out
was
working.
A
The
great
news
is
once
again,
the
back
end
is
managed
by
teams
and
by
default
you
have
access
to
a
free,
Azure
reader
relay
when
you're
running
inside
teams,
and
then
you
have
a
local
browser
testing,
which
is
super
convenient.
We're
going
to
see
that
together,
when
you're
spending
your
time,
testing
on
your
local
machine
so
find
what
it
does.
But
before
that
I'm
going
to
start
the
experience
to
explain
you
what
I
had
in
mind
using
this
specific
new
SDK
once
again
using
sockets
in
a
way
for
doing
a
real-time
communication.
A
So
we're
going
to
be
able
to
discuss
and
I
will
be
able
to
see,
for
instance,
that
rock
main
31
is
looking
at
the
specific
part
of
the
kitchen.
So
maybe,
if
I'm
like
the
reseller
of
another
part
of
his
apartment,
I
can
ask
to
my
customer.
Are
you
currently
looking
at
this
part
of
the
kitchen?
Do
you
have
specific
question?
Are
you
worried
about
that,
and
you
see
you
can
already
have
this
kind
of
collaboration
experience
together.
A
A
I'm
moving
here
really
working
for
now
inside
my
local
machine.
You
know
it's
a
another
simulator
environment,
that's
being
provided
by
the
SDK
and,
of
course,
if
I
like
now
to
put
that
inside
teams,
I
need
to
package
that
as
a
team's
app.
So
if
you
don't
know
how
it
works,
the
team's
ad
is
a
web
app,
but
with
a
specific
manifest
in
this
manifest
you're
going
to
this.
A
Before
trying
at
the
end
of
this
session,
the
experience
in
this
current
meeting
I've
deployed
it
on
my
own
tenant.
So
it
should
be
a
visible
there.
So
I'm
going
to
close
this
one,
so
I'm,
currently
using
my
Dev
tenants.
So
it's
like
teams
inside
teams,
like
it's
meta
teams,
which
is
right
in
into
the
topic
of
this
metaverse,
and
you
see
that
I
have
this
new
button.
So
as
a
way
to
install
it
is
to
go
to
manage
app
upload
my
custom
package
and
then
I
have
this
new
metaverse.
A
Cement
Museum,
but
I've
got
other
one
available
and
I've
got
my
Mac
on
my
left.
Like
you
can
see,
this
is
the
the
webcam
of
my
Macintosh
and
another
session.
Also
another
user
connected
there
I'm
going
to
Click
Share
to
stage
and
is
going
to
load
the
experience
of
my
on
my
machine,
but
also
it's
going
to
automatically
load
the
experience
on
all
machine
and
all
the
people
being
connected
and
beside
I've
got
the
same
experience
inside
teams.
You
see
that
Adele
Adele
is
an
adult
too.
A
A
The
concept
is
really:
let's
try
to
visit
together,
an
environment
and,
and
potentially
also,
we
could
add
some
drawing
under
a
bit
of
top
of
it
to
function.
Say
like
oh,
this
DeLorean
needs
to
be
fixed,
I
see
a
specific
issue
there.
You
can
really
come
on
together.
What's
what's
currently
going
on,
so
let's
go
into
the
source
code
now
to
understand
how
it
works.
A
So
I
took
one
of
the
sample
of
the
lifeshare
SDK.
You
got
great
many
different
samples.
One
of
it
is
named
dice
hauler,
which
is
a
very
simple
sample
that
just
show
you
how
to
update
States
between
the
various
connected
user.
So
I
took
this
one
as
a
starting
base
and
the
way
it
works
is
you
have
to
obviously
reference
the
specific
SDK
coming
from
the
live
SDK.
A
You
have
this
specific
namespace
that
is
available
to
have
the
local
testing,
like
we've,
been
able
to
do
at
the
beginning
of
the
demonstration
and
then
other
type
of
structure
that
you
need
to
read
the
documentation
to
better
understand
how
it
works.
Obviously,
I'm
building
an
app
for
a
teams
meeting
so
I'm
using
also
the
team,
GS,
GS,
SDK
and
then
I'm
going
to
define
the
data
structure.
A
So
really
some
cut
taken
from
the
the
sample
I'm
going
to
get
access
to
the
search
parameter
to
find
if
there
is
a
scene,
so
is
it
the
museum?
Is
it
the
apartment
to
prepare
the
type
of
content?
I
would
like
to
share
then
I'm
going
to
check
if
I'm
currently
running
inside
teams,
if
I'm
not
running
inside
team,
it
means
that
I'm
running
inside
my
local
simulator
and
then
I'm
going
to
prepare
some
fake
data
to
simulate
fake
user.
A
In
this
case,
I'm
going
to
initialize
the
teams
app
context,
I
will
have
access
to
the
contacts
so
inside
the
context
I
will
have,
for
instance,
access
to
the
nickname,
the
email
address
of
the
user.
That
could
then
be
convenient
to
do
a
call
to
the
graph
to
have
access,
for
instance,
to
the
profile
picture.
So
I
haven't
done
that
yet
in
the
sample,
because
I
was
lazy,
but
it
would
be
that
easy
to
set
up
SSO
and
do
a
graph
call
to
retrieve
like
the
profile
picture.
A
Thanks
to
that
and
if
we
are
not
in
teams.
So
it
means
that
we
are
currently
loading
the
experience
locally
on
your
machine,
I'm,
creating
effect
context
and
a
fake
user.
Just
for
the
testing,
you
know,
I
have
those
weird
name
at
the
beginning.
So
it's
really.
This
part,
like
other
I,
am
in
production
in
a
way
or
on
my
local
machine
same
here,
I'm
using
one
of
the
functions
that
was
provided
by
by
the
poker
sample,
the
Azure
poker
sample
to
create
random
name.
A
So
I
just
took
this
JavaScript
that
is
going
to
Generate
random
number
on
their
name
and
a
render
picture
in
my
case
so
and
if,
if
I'm
got
a
real
user
like
I've
just
shown
you
before,
I
will
have
access
directly
to
the
user
principle
name
now.
The
next
part
you
see
that
I
was
able
to
have
either
the
term
content
shared
in
my
main
stage,
so
it's
name
stage
or
I
have
the
the
sidebar
on
the
right.
A
That's
the
name
content
and
if
the
first
time
you
also
no
it's
config
and
the
first
time
you
can
run
it.
You
are
also
another
page
you
can
customize.
In
my
case,
I
only
show
shown
you
the
stage
page,
but
you
will
be
able
to
test
later
on
because
I'm
going
to
share
the
sample
the
other
screen,
if
you
like
to
and
then
the
join
container,
is
really
the
magic
being
done
by
the
live
share.
A
Sdk,
meaning
that
in
this
part,
we're
going
to
check
are
we
currently
in
teams
if
we
are
in
teams
we're
going
to
ask
two
teams
to
create
all
the
infrastructure
Logic
for
us
to
create
the
connection
to
the
server
to
put
in
place
the
websocket
infrastructure
with
one
line
of
code
basically,
and
if
we
are
not
in
teams
like
meaning,
we
are
currently
on
the
log.
Local
machine
is
going
to
create
a
kind
of
a
simulator
environment
for
us
to
be
able
to
test
that
locally.
A
So
it's
going
to
be
transparent
and
then
once
it's
being
done,
we
are
creating
our
local
client
and
we're
going
to
try
to
join
species
by
specific,
providing
space.
Some
specific
container
schema
in
my
case.
It's
this
life's
presence,
object,
I,
hope,
you're
still
there.
Now
that
I've
done
that
it's
very
easy
to
manage
the
updates.
So
the
updates,
obviously
you
have
a
lot
of
3D
code,
so
I'm
creating
the
Avatar
body,
which
was
you
know
the
my
cone
and
my
Cube
on
top
of
it.
So
nothing
very
interesting
the
label.
A
On
top
of
my
avatar
and
the
main
code,
is
there
update
Avatar
position
on
rotation,
so
you've
seen
that
I
was
able
to
rotate
the
cube
to
see
where
I
was
looking
at
so
the
way
I'm
doing
that
is
I
will
be
called
by
a
specific
event
that
is
there.
My
VCS
object
is
coming
from
the
live
share,
SDK
and
it's
going
to
say
like
when
you're
going
to
receive
a
new
event
like
something
has
changed.
First
I'm
going
to
check
that
I'm,
not
the
local.
A
So
you
see
outside
of
the
Babylon
GS
code
and
3D
code,
I
only
needed
to
use
the
presence
on
object
and
also
obviously
I
need
to
initialize
this
object
at
the
beginning
and
then
the
live
share.
Sdk
really
is
going
to
manage
for
me
the
various
update.
So
let
me
summarize,
I
had
to
create
The
Joint
container
with
a
specific
schema,
then
I
have
access
to
an
object,
name,
live
presence
and
on
these
objects.
What
I
just
need
to
do
is
to
initialize
it.
It
will
be.
A
My
local
user
and
I
will
have
an
event
saying
like
Okay.
Something
has
changed
like
a
new
user
shine
or
a
user
decided
to
to
leave
the
session.
I
have
an
event
and
then
I
need
to
do
my
update
Logics
and
then
it's
going
to
provide
me
the
data
that
has
does
that
change
between
all
session
and
the
way
I'm
going
to
update
my
position
when
I'm
moving
my
camera.
A
It's
over
there,
this
specific
Babylon
GS
function.
This
time
is
being
sent
every
time.
We've
moved
our
position
or
we've
done
a
rotation
change.
So
I
know
that
if
I
move
inside
the
scene,
I
need
to
say
to
the
live,
share:
SDK,
okay,
something
I
just
changed
my
my
position
but
I'm
using
the
update
presence
in
this
case
of
the
SDK
and
I'm
going
to
say,
like
I'm
still
online.
But
this
is
my
new
position.
A
My
new
rotation-
and
this
is
my
the
picture
I
would
like
to
use
to
display
it
in
the
other
machine,
3D,
rendering
so
pretty
simple
code.
You
will
be
able
to
have
access
to
it
on
my
repo
before
trying
to
do
that,
live
with
you,
maybe
we'll
be
a
lucky.
You
need
to
start
with.
If
you
need
to
start
with
live
share,
you
need
to
update
your
manifest.
A
No
you
shouldn't.
We
do
have
another
demo,
so
it
shouldn't
crash,
but
you
see
that
I'm
going
to
add
the
the
application
in
these
teams.
So
you
see
normally
you
should
see
a
new
icon
being
available
there,
and
if
some
of
you
got
the
teams
developer
preview
enabled
you
should
be
able
to
see
something
being
shared
on
your
on
your
screen.
So
first
the
black
screen
and
then
you
should
see
the
Babylon
GS
logo.
So
if
you
can
share
in
the
chat
how
many
people
have
something
loading?
A
Oh
I
see
a
couple
of
people.
Loading
I
never
tried
on
on
with
so
many
people.
So
the
way
to
move
inside
is
with
the
mouse
and
the
arrow
keys.
So
I
see
a
bunch
of
people
connecting
and
now
I
can
see
your
update
position
and
it
stopped
okay.
So
you
we've
been
able
to
to
show
a
bit
of
it
for
a
couple
of
seconds,
but
it
was
what
I
wanted
to
show
you.
It
was
just
a.
A
It
was
just
a
test
and
I
think
we
managed
to
to
see
it
for
a
couple
of
seconds.
So
thanks
a
lot
you
will
have
access
to
the
sample
feel
free
to
give
feedback.
The
team
is
interesting
into
testing
more
the
the
app
I'm
going
to
remove
the
app
to
be
sure
that
I'm
not
breaking
the
rest
of
the
of
the
session.