DeepArOpenTok/test.html at master · muneba1/DeepArOpenTok · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html>
<body>
<button onclick="sendSignal()">Send signal</button>
<button onclick="startRecording()">Start recording</button>
<button onclick="stopRecording()">Stop recording</button>
<br>
<div id="videos">
<div id="consoleDiv" style = "width:80%; height:50%; overflow:auto; font-family:monospace"></div>
<script src="//static.opentok.com/webrtc/v2/js/opentok.js"></script>
<script>
var session,
    openTokSessionInfo,
    apiKey,
    sessionId,
    token,
    archiveId;
/*
See https://github.com/opentok/learning-opentok-php.

Set SAMPLE_SERVER_BASE_URL to the base URL of the web server that implements
the OpenTok PHP Getting Started Sample code (see the main README file.) This
web service handles some OpenTok-related API calls, related to obtaining
session IDs and tokens, and for working with archives.
*/
var sampleServerBaseUrl = '',
    sessionCredentialsUrl = sampleServerBaseUrl + '/session',
    startArchiveUrl = sampleServerBaseUrl + '/start/',
    stopArchiveUrl = sampleServerBaseUrl + '/stop/';
var apiKey,
  sessionId,
  token;

getApiKeyAndToken();
function getApiKeyAndToken() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", sessionCredentialsUrl, true);
  xhr.onload = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        openTokSessionInfo = JSON.parse(xhr.responseText);
        apiKey = openTokSessionInfo.apiKey;
        sessionId = openTokSessionInfo.sessionId;
        token = openTokSessionInfo.token;
        initSession();
      } else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.send(null);
}
function initSession() {
  session = OT.initSession(apiKey, sessionId);
  session.on('streamCreated', function(event) {
    session.subscribe(event.stream, 'videos', {insertMode:'append'});
  });

  session.on('archiveStarted', function(event) {
    archiveId = event.id;
    console.log('archiveStarted: ' + archiveId);
  });
  session.on('archiveStopped', function(event) {
    console.log('archiveStopped: ' + event.id)
  });
  session.on('signal:chat', function(event) {
    console.log(event.data);
  });
  session.connect(token, function (error) {
    if (!error) {
      var publisher = OT.initPublisher('videos', {insertMode:'append'});
      session.publish(publisher);
      publisher.publishAudio(false);
    }
  });
}
function sendSignal() {
  session.signal({
    type:'chat',
    data:'hello ' + new Date().toString()
  });
}
function stopRecording() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", stopArchiveUrl + archiveId, true);
  xhr.onload = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.send(null);
}
function startRecording() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", startArchiveUrl, true);
  xhr.onload = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.send(null);
}
console.log = function(str) {
  var consoleDiv = document.getElementById('consoleDiv');
  consoleDiv.innerHTML += str + "<br>";
  consoleDiv.scrollTop = consoleDiv.scrollHeight;
}
</script>
</body>
</html>