acsauth/src/testacs.html at main · davrous/acsauth · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>ACS Quick Test</title>
</head>

<body>
    <main>
      <h1>Azure Communication Services - Quick Test sample</h1>
      <div id="loginZone">
        <label for="user-access-token">Enter ACS user access token</label>
        <input id="user-access-token"
              type="text"
              placeholder="User access token" />
        <button id="btnInitializeACS">Initialize ACS agent</button>
      </div>
      <div id="logoutZone">
        <div id="selectors">
          <span>
            <label for="camerasSelector">Choose a camera:</label>
            <select name="camerasSelector" id="camerasSelector"></select>
          </span>
          <span>
            <label for="microsSelector">Choose a mic:</label>
            <select name="microsSelector" id="microsSelector"></select>
          </span>
          <span>
            <label for="speakersSelector">Choose speakers:</label>
            <select name="speakersSelector" id="speakersSelector"></select>
          </span>
        </div>
      </div>

      <div id="acsZone">
        <span id="initialize-call-agent">Please initialize ACS Agent by providing a valid ACS token. To generate one in the in <a href="https://portal.azure.com/" target="_blank">Azure Portal</a> in seconds, read <a href="https://docs.microsoft.com/en-us/azure/communication-services/quickstarts/identity/quick-create-identity" target="_blank">this small documentation</a></span>
        <div id="acsVideoZone">
          <div id="calleesZone">
            <div id="personOrTeamsLink">
              <label for="callee-acs-user-id">Enter ACS user id or Teams meeting link</label>
              <input id="callee-acs-user-id"
                  type="text"
                  placeholder="Enter ACS Id: '8:acs:resourceId_userId' or 'teams.microsoft.com' link" />
            </div>
            <div id="echoBotZone">
              <input type="checkbox" id="callEchoBot" name="callEchoBot">
              <label for="callEchoBot">Call echobot</label>
            </div>
          </div>
          <p>Call state <span style="font-weight: bold" id="call-state">-</span></p>

          <div id="buttonsZone">
            <button id="start-call-button" type="button" disabled="true">Start Call</button>
            <button id="hangup-call-button" type="button" disabled="true">Hang up Call</button>
            <button id="accept-call-button" type="button" disabled="true">Accept Call</button>
            <button id="start-video-button" type="button" disabled="true">Start Video</button>
            <button id="stop-video-button" type="button" disabled="true">Stop Video</button>
          </div>
          <div id="videosZone">
            <div id="remoteVideoContainer">Remote participants' video streams:</div>
            <div id="localVideoContainer">Local video stream:</div>
           </div>
        <div>
      </div>
    </main>
    <a id="moreAboutACS" href="https://docs.microsoft.com/en-us/azure/communication-services/" target="_blank">Click here to learn more about Azure Communication Services</a>

    <script src="./bundletestacs.js"></script>
</body>
</html>