►
Description
In this 13-minute developer-focused demo, Sathya Raveendran shows the seamless interoperation between Azure Communication Services (ACS) and Microsoft Teams that enables a business user with a Teams license to have a video call/chat with a citizen consumer who doesn’t have a Teams license. The B2C solution uses a Bot for agent routing, adaptive cards for communications, and ACS for a web-based video call from desktop or mobile. Access the sample in the PnP samples repository. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on July 22, 2021.
Demo Presenter: Sathya Raveendran (Microsoft)
Supporting materials:
• Sample - Azure Communication Services – Teams InterOp with Call Routing | https://github.com/pnp/teams-dev-samples/tree/main/samples/app-acs-calling
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
A
They
are
cloud-based
services,
providing
rest
apis
and
sdks
as
well
available
for
you
to
integrate
a
communication
layer
to
any
application
that
you
build.
This
can
include
voice
and
video,
calling
rich
text
chat
and
sms
as
well
with
acs.
You
can
add
these
features
to
your
applications.
It
can
be
a
web
app.
It
can
be
mobile
app.
Whatever
application
it
is,
you
can
integrate
these
features
easily
and
in
a
very
secure
and
scalable
manner.
It
comes
with
its
own.
A
Like
security,
it
comes
with
its
own,
like
security
layer,
very
similar
to
what
we
have
in
teams
in
teams
meetings.
So
this
is
very
beneficial
and
you,
the
developers,
typically
do
not
need
to
know.
Real-Time
networking
do
not
need
to
do
a
media
encoding
to
actually
build
a
video
call
layer.
On
top
of
your
application,
you
can
simply
use
acs
so
coming
to
our
specific
app
right,
the
sample
app
that
we
have
brings
together.
A
The
the
app
as
I
said,
allows
to
perform
voice
and
video
call
and
screen
share
the
sample.
App
that
we
currently
are
going
to
present
now
is
has
voice
and
video
call
and
screen
share
as
well.
You
also
have
the
ability
to
have
chat
as
well
integrated
with
it,
but
the
sample
app
does
not
present
that
part,
but
it's
available
as
part
of
the
sdk
in
case
you
want
to
build
that
as
well.
A
Now,
as
part
of
the
app
capabilities,
there
are
two
modes
of
operation
using
which
I
will
demo
you
through
the
app
the
first
one.
The
first
mode
of
operation
is
requesting
a
callback
think
of
for,
for
the
sake
of
the
demo,
let's
take
a
particular
scenario
of
a
citizen
user
by
citizen
user.
What
I
mean
is
a
regular
user
who
is
not,
who
might
not
have
a
teams
app
or
who
might
not
have
a
team's
license.
A
A
citizen
user
wants
to
get
in
touch
with
the
support
agent,
who
is
a
business
user
right,
the
business
user?
The
support
agent
will
typically
have
a
team's
license
or
a
teams
app
installed
or
teams
and
desktop,
and
so
on.
So
in
the
request,
a
call
back
this
citizen
user
requests
a
call
back
from
the
support
agent,
the
user
submits
their
queries,
say
in
a
website
or
somewhere
and
then
waits
for
the
agent
to
get
back
to
them.
That's
the
first
flow
in
the
second
part,
the
second
mode
of
operation.
A
Let's
say
we
have
a
impatient
citizen
user
who
might
have
like
a
really
urgent
query,
really
urgent
thing
that
they
would
want
to
get
it
resolved
right
away,
so
what
they
do
is
they
they?
This
app
also
allows
caters
to
those
sets
of
users
where
it
allows
them
to
place
call
in
instead
of
being
reactive.
The
app
allows
them
to
place
a
call
and
the
app
itself
finds
a
support
agent
who
is
available
at
the
time
of
placing
the
call.
A
A
A
As
the
flow
starts,
you
have
the
citizen
user
on
the
left
side,
interacting
in
the
browser
they
type
help,
and
then
they
get
like
a
small
form
kind
of
fashion,
where
they're
able
to
enter
their
initial
details
and
then
a
particular
query
that
they
want
to
ask
the
support
agent
and
they
click
on
submit
on
the
left
side.
As
soon
as
the
submitted
you
see
on
the
right
side,
this
request
gets
sent
as
an
adaptive
card
on
the
right.
A
So
this
is
basically
a
team,
as
you
can
see
over
here,
it's
a
team
and
the
card
with
the
information
that
you
saw
over
here
gets
posted
as
an
adaptive
card
and,
like
you
saw
in
the
previous
table,
the
bot
posts
it
over
here
and
the
bot.
Basically,
the
ac
sample
board
post
this
over
here
and
if
we
can
imagine
like
all
the
support
agents
are
part
of
this
particular
team
and
channel,
and
anyone
who
is
available,
they
can
click
on,
accept
and
then
get
in
touch
with
this
particular
customer.
A
So
in
this
case
a
particular
person
particular
agent
clicks
on
accept
and
as
soon
as
they
click
on
accept.
As
you
can
see,
on
the
left
side,
you
can
see
the
there
is
a
meeting
join
link
that
comes
up
over
here
on
clicking
of
which
both
parties
like
on
clicking
on
the
right
side,
the
business
user
gets
on
the
call
on
team
site,
whereas
on
the
left,
if
you
see
when
they
click
when
they
clicked
on
the
meeting
joint
link,
a
custom
ui
appears
now.
This
is
the
acs
part
kicking
in.
A
So
this
is
a
custom
ui
where
it
mimics
the
teams
joining
interface.
But
this
works
completely
in
the
web
browser.
So,
as
you
can
see,
they
can
enter
some
preliminary
information,
some
identifying
information
for
their
name
and
then
enable
their
camera
and
microphone,
and
then
they
will
be
able
to
join
and
as
they
join
they
get.
A
A
The
second
flow
that
I
was
talking
about
is
placing
a
call,
so,
as
you
can
see
in
this
particular
flow,
where
we
are
placing
an
urgent
request,
the
citizen
user
presses
on
place
a
call
and
they
immediately
get
a
join
meeting
link,
so
they
immediately
get
a
joint
meeting
link.
Now,
on
the
other
end,
what
we
have
done
is
we
wanted
to
not
just
show
capabilities
of
acs.
We
want
to
take
it
up
a
notch
and
also
show
calling
and
meeting
border
now.
A
What
happened
over
here
is
when
they
clicked
on
place,
a
call,
a
bot
came
to
life,
and
then
it
starts
calling
agents
in
a
particular
order.
Now
this
is
the
profile
of
one
agent
mango
de
and
the
bot
proactively
calls
this
particular
person
now
imagine
mongodb
is
not
at
his
desk
out
for
coffee,
so
the
bot
calls
say
15
seconds
and
then
it
goes
off.
It
recognizes
no
one
picks
up
the
call,
and
then
it
would
go
to
the
next
available
agent,
so
basically
the
next
agent
it
will.
A
It
will
try
to
ping
them.
So
the
the
first
person
mongodb
didn't
pick
up
the
call.
Now
you
have
alex
wilbur,
so
the
bot
will
try
to
call
alex
now
the
same
bot
as
is
calling
alex
over
here,
but
in
this
case
alex
is
busy
he's
tending
to
say
another
customer
or
a
scene.
Another
call
or
be
seen
some
other
work,
so
he
decides
to
reject
the
call
over
here.
The
bot
also
understands
when,
when
the
call
is
rejected
now
it
will
go
to
the
next
agent.
A
Now
we
have
ben
walters,
who
is
available
and
ben
walters
is
going
to
accept
the
call
over
here
say
ben
clicks
on
accept,
and
this
is
the
basically
the
citizen
user
side
of
things.
This
is
the
same
ui
you
would
have
seen
in
the
previous
previous
demo.
Now
in
the
rest
of
the
things,
is
very
similar
to
what
you
saw
earlier
in
the
requester
called
flow.
The
difference
in
this
particular
one
is
the
bot.
A
A
Now
again,
just
wanted
to
be
basically
like
wanted
to
highlight
this
particular
part.
Over
here,
as
you
saw
in
this
sample
app,
we
have
coded
it
such
that
the
bot
basically
calls
these
three
folks
in
a
in
a
round
robin
fashion.
But
it's
up
to
you
to
decide
what
call
routing
logic
you
want
to
implement.
We
have
graph
apis
to
check
a
person's
calendar.
A
I
hope
that
particular
part
is
very
clear.
This
sample
app,
for
all
intents
and
purposes,
is
very
basic,
even
with
even
with
all
of
its
feature
features
it's
it's.
It's
just
scratching
the
surface
on
what
you
can
do
using
this.
You
can
build
a
lot
more
customization
on
top
of
it
for
your
own
customers
and
your
own
end
users.
So
now
that
we
have,
we
saw
all
these
wonderful
things
just
wanted
to
highlight.
What
scenarios
can
you
use
the
sample
app
for
a
multiple?
There
are
different
industries
where
this
would
apply.
A
The
common
theme
across
all
of
these
areas
is
this
sample
app
is
going
to
bring
to
life
a
lot
of
b2c
scenarios
where
one
leg
of
user
one
leg
of
communication,
the
user
does
not
have
a
team's
license.
The
user
is
not
a
business
user.
The
user
will
not
have
a
teams
app
installed,
that's
one
leg,
whereas
the
other
leg
has
a
business
user.
Who
has
teams
license?
Who
has
teams
app
and
so
on?
You
want
to
bring
both
these
parties
together.
A
Then
this
app
would
be
the
backbone
of
the
of
the
of
the
scenario.
Now
with
that
crutch
for
finance
and
banking
industry.
This
could
be
a
call
between
a
relationship
manager
and
a
bank's
customer,
say
hi
net
worth
individuals
talking
to
a
banking
relationship
manager
in
a
healthcare.
The
business
user
would
be
a
doctor,
whereas
the
citizen
user
would
be
a
patient
in
a
retail.
It
could
be
anyone
who
does
a
virtual
shopping.
They
like
a
product
they
want
to
get
on.
A
A
You
can
have
acs
integrated
on
the
government's
website
where,
if
citizens
want
to
get
in
touch
with
the
local
council
party
members
and
so
on,
and
ask
questions
around
say
covet
or
any
other
emergency
things
that
are
going
on
so
getting
in
touch
with
the
business
end.
Users
right
from
the
website
or
right
from
the
mobile
app
they
are
on
this
app
would
be
the
backbone
and
be
extremely
useful.