邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

196 lines
7.3 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>用户页面</title>
  5. <link href="./css/client.css" rel="stylesheet"/>
  6. <script type="text/javascript">
  7. var username;
  8. var msg;
  9. var log;
  10. window.onload = function () {
  11. username = document.getElementById("username");
  12. msg = document.getElementById("msg");
  13. log = document.getElementById("log");
  14. if (window["WebSocket"]) {
  15. // 连接服务器
  16. conn = new WebSocket("wss://" + document.location.host + "/webrtc");
  17. conn.onclose = function (evt) {
  18. appendLog("连接已断开.");
  19. };
  20. conn.onmessage = function (e) {
  21. res = JSON.parse(e.data)
  22. if (res.cmd == 'CMD_USER_LOGIN_ACK') {
  23. if (res.error === 0) {
  24. appendLog("登录成功。");
  25. // 启动本地音视频
  26. startLocalMedia();
  27. } else {
  28. appendLog("登录失败,error: " + res.error);
  29. }
  30. } else if (res.cmd === 'CMD_CALL_ACK') {
  31. if (res.error === 0)
  32. appendLog("呼叫成功。");
  33. else
  34. appendLog("呼叫失败,error: " + res.error);
  35. } else if (res.cmd === 'CMD_SESSION_BEGIN') {
  36. session = new Object;
  37. session.staffer = res.staffer;
  38. session.user = res.user;
  39. session.iceServers = res.iceServers
  40. appendLog("开始由 " + res.staffer + " 为您服务");
  41. console.log(session);
  42. if (!pc) {
  43. createPeerConnection();
  44. bindTracks();
  45. }
  46. videoCall();
  47. } else if (res.cmd === 'CMD_SESSION_END') {
  48. if (res.error === 0)
  49. appendLog("会话已结束。");
  50. else
  51. appendLog("会话异常结束,error: " + res.error);
  52. if (pc != null) {
  53. pc.close();
  54. pc = null;
  55. offerdesc = null;
  56. offer.value = "";
  57. answer.value = "";
  58. }
  59. } else if (res.cmd === 'CMD_CHAT') {
  60. appendLog(session.staffer + " 说:" + res.text);
  61. } else if (res.cmd === 'CMD_WEBRTC') {
  62. //如果收到的SDP是offer
  63. if (res.data.hasOwnProperty('type') && res.data.type === 'offer') {
  64. offer.value = res.data.sdp;
  65. //进行媒体协商
  66. pc.setRemoteDescription(new RTCSessionDescription(res.data));
  67. //创建answer
  68. pc.createAnswer()
  69. .then(getAnswer)
  70. .catch(handleAnswerError);
  71. //如果收到的SDP是answer
  72. } else if (res.data.hasOwnProperty('type') && res.data.type == 'answer') {
  73. answer.value = res.data.sdp;
  74. //进行媒体协商
  75. pc.setRemoteDescription(new RTCSessionDescription(res.data));
  76. //如果收到的是Candidate消息
  77. } else if (res.data.hasOwnProperty('type') && res.data.type === 'candidate') {
  78. var candidate = new RTCIceCandidate({
  79. sdpMLineIndex: res.data.label,
  80. candidate: res.data.candidate
  81. });
  82. //将远端Candidate消息添加到PeerConnection中
  83. pc.addIceCandidate(candidate);
  84. }
  85. }
  86. };
  87. } else {
  88. appendLog("Your browser does not support WebSockets.");
  89. }
  90. };
  91. function appendLog(text) {
  92. let item = document.createElement("div");
  93. item.innerText = text;
  94. let doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
  95. log.appendChild(item);
  96. if (doScroll) {
  97. log.scrollTop = log.scrollHeight - log.clientHeight;
  98. }
  99. }
  100. function login() {
  101. let req = new Object;
  102. req.cmd = "CMD_USER_LOGIN";
  103. req.username = username.value;
  104. req.password = "123456";
  105. req.agent = "browser";
  106. let str = JSON.stringify(req);
  107. console.log(str);
  108. conn.send(str);
  109. }
  110. function chat() {
  111. if (!conn) {
  112. return false;
  113. }
  114. if (!msg.value) {
  115. return false;
  116. }
  117. appendLog("我说:" + msg.value);
  118. let req = new Object;
  119. req.cmd = "CMD_CHAT";
  120. req.text = msg.value;
  121. let str = JSON.stringify(req);
  122. console.log(str);
  123. conn.send(str);
  124. msg.value = "";
  125. return false;
  126. }
  127. function call() {
  128. let req = new Object;
  129. req.cmd = "CMD_CALL";
  130. req.caller = username.value;
  131. req.callee = "";
  132. let str = JSON.stringify(req);
  133. console.log(str);
  134. conn.send(str);
  135. }
  136. </script>
  137. </head>
  138. <body>
  139. <div class="container">
  140. <div class="top">
  141. <label>用户账号</label>
  142. <input id="username"></input>
  143. <button id="login" onclick="login()">登录</button>
  144. <button id="call" onclick="call()">呼叫</button>
  145. <button id="call" onclick="hangup()">挂断</button>
  146. </div>
  147. <div class="middle">
  148. <div class="log" id="log"></div>
  149. <div class="preview">
  150. <div class="local">
  151. <p>Local:</p>
  152. <video id="localvideo" autoplay playsinline muted></video>
  153. <p>Offer SDP:</p>
  154. <textarea class="sdp" id="offer"></textarea>
  155. </div>
  156. <div class="remote">
  157. <p>Remote:</p>
  158. <video id="remotevideo" autoplay playsinline></video>
  159. <p>Answer SDP:</p>
  160. <textarea class="sdp" id="answer"></textarea>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="bottom">
  165. <textarea id="msg" cols="70" rows="6" style="overflow: visible; resize: none"></textarea>
  166. <button id="send" style="vertical-align: top;" onclick="chat()">发送</button>
  167. </div>
  168. </div>
  169. <!--
  170. 引用的JavaScript脚本库:
  171. socket.io.js:用于连接信令服务器
  172. adapter-latest.js:用于浏览器适配Chrome,Firefox...
  173. client.js:WebRTC客户端代码
  174. -->
  175. <script src="js/adapter-latest.js"></script>
  176. <script src="js/client.js"></script>
  177. </body>
  178. </html>