►
Description
In this 21-minute developer focused demo – David Rousset shares latest capabilities of ACS – the same platform leveraged by Microsoft Teams, that can be leveraged by you. Add voice and video calling capabilities to your web apps. He shows securely connecting 2 users through the ACS infrastructure and the few lines of code to accomplish this. ACS is fully managed by Microsoft. ACS capabilities are being added to the Teams Toolkit. Use cases reviewed, sample provided, and see the possible in an impressive VR museum tour. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 10, 2022.
Demo Presenter
• David Rousset (Microsoft) | @davrous
Supporting materials
• Documentation - What is Azure Communication Services? | aka.ms/communication-services-overview
• Sample – Azure Communication Services Quick Starter | https://github.com/davrous/acsauth
• Test Portal - Azure Communication Services - Quick Test sample | aka.ms/acsquicktest
• Documentation – Calling SDK overview | https://docs.microsoft.com/azure/communication-services/concepts/voice-video-calling/calling-sdk-features
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/m365pnp
A
Hello
thanks
for
welcoming
me,
hello
to
the
community
and
my
first
time
to
doing
presentation
on
this,
show
I'm
working
in
the
developer
division.
You
know
named
devdev
as
a
program
manager,
so
we
are
working
on
vs
code,
visual
studio,
github
and
some
azure
services
and
my
team
is
working
on
the
developer,
experience
of
teams
and
acs.
A
So
as
your
communication
services,
so
we
are
working
on
the
team's
toolkit,
for
instance,
that
is
being
just
mentioned
before
so
today
would
like
to
give
you
like
a
slight
overview,
what
is
acs
and
what
you
could
do
in
your
app
and
web
apps,
more
specifically
to
enable
audio
video
using
the
team's
infrastructure,
but
first,
let's
discover
what
is
azure
communication
services.
So
I
don't
know
if
you
already
heard
about
the
service.
A
So
it's
an
azure
service
that
is
fully
managed
by
microsoft,
meaning
that
it's
going
to
scale
it's
going
to
use
a
secure
infrastructure,
it's
going
to
be
compliant
and
also
it's
going
to
provide
lots
of
great
features
on
top
of
it,
for
instance
audio
video.
Maybe
you
already
built
yourself
some
web
rtc.
A
You
know
platform
yourself,
and
you
probably
know
that
this
is
not
that
easy
to
make
it
secure
and
scalable.
So
this
is
basically
like
a
service.
You
can
use
on
the
other
side
to
enable
this
kind
of
experience
for
your
users,
and
there
is
values
which
are
available
for
you
as
a
developer
when
you
like
to
use
this
platform
first
is
video.
This
is
today
what
we're
going
to
cover
audio
video,
a
chat
also
like
the
theme,
one
that
you
have
chat
in
teams
and
also
sms
text
messaging.
A
You
can
also
send
some
sms
using
the
platform
or
do
regular
phone
calls.
I
would
say,
using
you
know,
the
old
telephony
network,
using
this
service
to
have
a
number
exposed.
People
could
call
you
on
this
number,
so
it's
using
the
same
infrastructure
as
microsoft
teams,
meaning
that
microsoft
team
is
even
built
on
top
of
this
infrastructure.
A
So
it
means
that
you
can
reuse
the
same
scalability
and
and
quality
of
the
platform
for
yourself
to
include
that
into
your
own
app
could
be
a
web
app
or
any
kind
of
app,
and
obviously
this
is
something
really
important
that
I've
been
asked
by
some
our
customer
is
to
be
secure
and
compliant.
We
have
a
lot
of
you
know,
laws
to
to
to
be
compliant
to,
and
by
default.
A
This
platform
will
enable
that,
for
you,
so
as
I
was
telling
you
like
asia,
communication
services,
also
known
like
as
acs,
is
you
know
pouring
up
microsoft
teams,
some
dynamics,
365
series,
but
also
your
custom
app.
This
is
what
we're
going
to
see
today
so
to
build
your
custom
app.
Obviously,
you
have
sdks.
You
have
various
sdk
available,
normally,
whatever
your
favorite
language
or
platform,
you
should
be
covered,
so
we
have
dotnet,
obviously,
but
we
have
also
javascript
ios
and
android.
A
A
So
no
need
to
be
an
engineer
on
telecom.
Everything
is
being
managed
by
the
platform,
so
let's
switch
to
the
demo,
so
everything
is
going
to
be
live.
So
let's
hope
that
the
demo,
god
will
be
with
me-
you
can
go
to
this
page
if
you
like
to
ak
dot.
Ms
slash
ses,
quick
test,
yeah
and
it
will
land
on
this
page.
We
see
the
static
page,
that's
going
to
show
you
the
very
basic
experience
you
may
start
with
when
you
like
to
use
the
service.
So
what
it's
going
to
ask?
A
You
is
a
token
obviously
to
have
access
to
the
acs
platform.
You
need
to
to
prove
that
you
have
an
access
token.
There
is
some
kind
of
secure
layer
on
top
of
it.
So
the
first
question
is
that
sample
is
asking
you
like.
Can
you
please
provide
me
a
token
security
token?
So
for
that
you
need
to
go
into
the
azure
portals
and
first
to
create
an
ses
resource.
A
So
if
you
don't
know
how
to
create
an
azure
communication
service
resource
in
this
simple
page,
you
will
be
able
to
see
how
to
create
one
in
your
existing
azure
subscription
and
once
you
are
inside
the
ses
blade,
you
will
have
their
identities
and
user
access
tokens
a
way
to
generate
secure
security
tokens.
So
you
have
to
choose
like
you,
want
to
generate
a
token
for
a
user
just
to
do
voice
and
video
calling
or
do
you
want
also
to
enable
job,
chat
or-
and
vice
versa-
you
can,
you
know,
be
precise.
A
A
A
Kind
of
a
fake
audio
recording
for
the
test,
so
I
can
hang
up
the
call
it
worked.
So
it
means
that
I
passed.
The
first
test
was
generate
a
token
from
the
azure
portal,
give
it
to
the
sdk,
which
is
there,
the
javascript
sdk
of
acs,
and
it
managed
to
do
a
call
to
the
acs
instructure
to
check
that
everything
is
working,
fine,
so
enabling
the
camera
and
sending
some
audio.
A
So
this
sample
is
there
and
I
will
show
you
where
it
is.
You
know
on
my
github
repo,
so
the
first
part
is
using
azure
static,
web
app
and
azure
function.
That's
got
some
embedded
authentication
layer
for
free,
meaning
that
I
didn't
have
to
write
any
line
of
code
to
have
support
for
in,
for
instance,
twitter
or
microsoft.
I'm
going
to
log
in
with
my
microsoft
account
so
the
davrus
microsoft.com,
which
is
my
email
address,.
A
So,
basically
the
same
experience
as
before.
We
will
jump
into
the
code
after
to
let
you
have
a
look,
how
it
works.
I
need
to
choose
a
camera
once
again,
so
I'm
going
to
use
my
right
camera
once
again
and
now
I
need
to
either
call
someone
or
I
need
to
be
called
by
someone
else.
So
I'm
going
to
use
my
iphone
this
time
as
a
third
camera,
so
you
need
many
cameras
when
you're
doing
this
kind
of
debugging
experience.
So
what
I
I
I've
connected
to
the
same
page
and
what
I've
I've
typed.
A
You
know
in
this
specific
text
box
is
my
email
address
and
what
the
azure
function
is
going
to
do
is
when
I
will
search
for
this
email
address,
it's
going
to
dig
into
the
cosmos
db
attached,
looking
for
the
internal
ses
id
and
then
will
resolve
in
a
way
the
email
with
the
proper
identity
and
connects
the
two
device
together.
So
if
it
works,
I'm
going
to
press
the
start,
call
button.
A
So
before
trying
something
live
that
I
never
tried
before
with
this
kind
of
meeting,
let's
have
a
look
to
the
to
the
source
code.
So,
first
what
you
need
to
do
and
you
will
have
access
to
those
samples
anyway,
on
my
github
repo,
but
if
you're
doing
that
from
scratch.
Obviously
you
need
to
install
some
specific
npm
package
that
we
are
going
to
provide,
which
are
communication,
common
and
communication
calling
having
those
type
of
package.
A
It
will
be
fairly
easy
for
you
to
generate.
You
know
a
call.
You
have
to
create
an
instance
of
the
call
client
which
is
coming
from
the
scs
common
library.
Then
you're,
going
to
take
the
user
token
that
you
have
to
copy
paste
in
the
layout
to
generate
a
second
object
name
as
your
communication
token
credential,
that
is
going
to
be
provided
to
create
call
agent.
So
you
can
provide
a
display
name
if
you
like
to
once
you've
been
able
to
do
that
if
it's.
A
If
this
line
of
code
is
working,
you've
been
able
to
connect
to
the
ses
infrastructure,
and
the
next
part
is
simply
a
way
to
check
the
number
of
camera.
You
have.
The
number
of
you
know
mic
or
speakers
to
let
the
user
be
able
to
choose
all
of
them
and
using
this
collagen,
then
you
have
events
that
you've
seen
in
a
way
if
I've
got
an
incoming
call.
A
A
If
you
like
to
call
another
user,
like
I
did
using
my
iphone
and
my
second
camera
you
have
to
provide.
You
know
this
specific
id
we've
seen
in
the
portal
before
this
one.
So
you
need
to
provide
this
one,
and
this
is
what
I
did
using
my
azure
static
weber
code,
but
we
can
also
call
someone
directly
in
teams
doing
interrupt
as
we
are
using
the
same
infrastructure
of
microsoft
teams.
It
would
be
awesome
like
if
you
build
your
web
app.
Imagine
you
will
building
a
web
app
to
connect
external
users
to
your.
A
You
know:
internal
teams,
infrastructures.
They
could
go
on
a
specific
webpage
using
scs.
You
can
have
any
kind
of
ui
you
like
and
using
the
sdk.
You
can
call
someone
in
your
company
using
teams,
so
it's
going
to
be
completely
transparent
for
this
user
to
have
an
incoming
call
from
your
web
page
using
scs.
So
for
that,
that's
why
I've
copy
paste
this
the
link
to
the
today's
meetings
and
I'm
going
to
try
it
live.
A
A
And
I
should
be
somewhere-
I
don't
know
where,
but
I
should
be
somewhere.
You
can
see.
I'm
I've
been
able
to
to
connect
to
this
microsoft
teams.
Meeting
that
is
hasn't
been
configured
for
that,
like
it's
completely
transparent.
I
can
see
also
the
my
screen
being
shared
there.
So
it's
like
a
inception
in
a
way
now,
but
you
see
that
using
a
single
line
of
code,
I've
been
able
to
move
to
connect
to
my
web
page
very
simple
web
page
to
an
existing
teams.
A
Meeting
like
any
kind
of
teams
meeting,
should
be
compatible
with
this
sdk,
so
super
convenient
just
as
we
have
a
little
bit
of
time.
If
you
are
interesting
in
understanding
how
I
managed
to
map
the
identity,
you
know
the
social
identity
which
is
twitter,
github
or
google
to
the
to
the
ses
identity
in
the
I've
got
a
cosmos
db.
A
You
know
table
there
when,
for
instance,
I
can
see
various
users
that
try
to
connect
to
to
my
page,
for
instance,
the
fake
big
gate
account
just
for
fun
that
try
to
connect
from
his
twitter,
and
you
can
see
that
I
have
the
user
token.
Like
the
same
kind,
we've
seen
there
in
in
in
the
in
the
portal,
but
also
we
have
the
famous
you
know
complex
internal
grid.
That's
the
as
your
function
is
going
to
to
get
with
a
simple
query,
so
this
is
done
in
my
code.
A
A
Engineering
team.
This
time,
if
you
like
to
improve
his
very
basic
experience,
we
are
providing
like
react,
library,
a
ui
library,
for
you
to
be
able
to
have
the
same
kind
of
look
and
feel
that
you
know
microsoft,
team
for
instance.
So
once
again
I
can
use
you
know
my
camera
turn.
The
video
on
unmute,
myself
and
stuff,
like
that
and
david
will
show
you
more
about
you.
A
So
what
I'm
going
to
show
you
is
a
vr
environment,
a
bill
on
top
of
babylon
gs.
Baby
ngs
is
a
3d
engine.
I've
been
creating
long
time
ago
and
used
by
microsoft.
Today,
for
instance,
the
you
know,
art
and
and
applause
icon
you
have
in
microsoft.
Team
is
using
babylon
gs,
but
you
can
do
vr2
and
what
I'm
going
to
show
you
in
this
video
I'm
going
to
be
in
vr
in
my
headset
and
connect
in
the
same
way,
I
just
don't
prefer
to
an
existing
teams
meeting
so
hello.
A
I've
included
an
option
which
is
really
cool,
being
able
to
call
someone
over
teams.
So
what
I'm
going
to
do,
I'm
using
azure
communication
services
to
be
able
to
call
someone
inside
microsoft
teams.
So
it's
a
regular
microsoft
team,
nothing
special
about
this
version
and
I'm
going
to
press
the
call
button
and
I'm
going
to
establish
a
connection
with
this.
This
is
a
beautiful
woman.
A
C
A
A
Don't
worry,
it's
not
the
price,
it's
c
when
it
was
made,
so
I
don't
know
about
the
price.
Maybe
we
should
discuss
about
that
later
on.
So
but
it's
great,
we
hate
on
this
one.
So
as
you
can
so
what
we've
been
able
to
do
in
this
scenario
was
a
kind
of
a
virtual
visit.
Just
imagine
now,
you're
buying
a
house
you
like
to
go
with.
A
You
know
the
sales
representative
and
I
was
putting
the
video
feed
instead
of
putting
that
in
a
classical
html
page,
but
in
3d
on
my
on
my
arm
on
my
vr
controller
and
we
could
visit
a
museum
or
a
house
to
together
with
my
wife.
In
this
case
she
was
able
to
even
you
know,
have
some
video
outputs
in
teams
of
the
of
the
scene
being
rendered
in
my
headset.
So
you
will
have
access
to
this
sample
code
too,
in
on
the
github.
So
the
use
case,
so
metaverse
is
made
a
little
bit
sci-fi.
A
Maybe
even
if
you
can
see
it's
already
working,
we've
been
thinking
about
telemedicine
like
being
able
to
have
people
connecting
to
your
web
page
and
be
able
to
connect
to
a
doctor
using
teams,
for
instance
using
the
interrupt
feature
financial
advisory.
A
lot
of
people
are
using
that
for
remote
services
and
support,
obviously
to
be
able
to
call
someone
using
acs
and
also
for
education.
Like
we've
seen
during
the
covid,
it
was
super
useful
to
have
this
kind
of
tool.
So,
if
you
like
to
get
started
today,
you
can
go
on
ak
dot.
A
D
Wow
david-
that
was
quite
the
demonstration,
we're
getting
lots
of
claws.
Lots
of
hearts
lots
of
surprised
emojis
on
from
there.
This
fault
a
lot
if
anyone's
familiar
with
the
douglas
anglebart,
we
had
the
the
mother
of
old
demos
back
in
the
60s.
This
felt
like
a
mini
version
of
that,
just
showing
all
the
different
pieces
along
the
way.
So
thank
you
so
much
for
for
sharing.
This
is
great.