|
- <!DOCTYPE html>
- <html>
-
- <head>
- <title>用户页面</title>
- <link href="./css/client.css" rel="stylesheet"/>
- <script type="text/javascript">
-
- var username;
- var msg;
- var log;
-
- window.onload = function () {
- username = document.getElementById("username");
- msg = document.getElementById("msg");
- log = document.getElementById("log");
-
- if (window["WebSocket"]) {
- // 连接服务器
- conn = new WebSocket("wss://" + document.location.host + "/webrtc");
-
- conn.onclose = function (evt) {
- appendLog("连接已断开.");
- };
-
- conn.onmessage = function (e) {
- res = JSON.parse(e.data)
- if (res.cmd == 'CMD_USER_LOGIN_ACK') {
- if (res.error === 0) {
- appendLog("登录成功。");
- // 启动本地音视频
- startLocalMedia();
- } else {
- appendLog("登录失败,error: " + res.error);
- }
- } else if (res.cmd === 'CMD_CALL_ACK') {
- if (res.error === 0)
- appendLog("呼叫成功。");
- else
- appendLog("呼叫失败,error: " + res.error);
- } else if (res.cmd === 'CMD_SESSION_BEGIN') {
- session = new Object;
- session.staffer = res.staffer;
- session.user = res.user;
- session.iceServers = res.iceServers
- appendLog("开始由 " + res.staffer + " 为您服务");
- console.log(session);
-
- if (!pc) {
- createPeerConnection();
- bindTracks();
- }
-
- videoCall();
- } else if (res.cmd === 'CMD_SESSION_END') {
- if (res.error === 0)
- appendLog("会话已结束。");
- else
- appendLog("会话异常结束,error: " + res.error);
- if (pc != null) {
- pc.close();
- pc = null;
- offerdesc = null;
- offer.value = "";
- answer.value = "";
- }
- } else if (res.cmd === 'CMD_CHAT') {
- appendLog(session.staffer + " 说:" + res.text);
- } else if (res.cmd === 'CMD_WEBRTC') {
- //如果收到的SDP是offer
- if (res.data.hasOwnProperty('type') && res.data.type === 'offer') {
- offer.value = res.data.sdp;
- //进行媒体协商
- pc.setRemoteDescription(new RTCSessionDescription(res.data));
- //创建answer
- pc.createAnswer()
- .then(getAnswer)
- .catch(handleAnswerError);
- //如果收到的SDP是answer
- } else if (res.data.hasOwnProperty('type') && res.data.type == 'answer') {
- answer.value = res.data.sdp;
- //进行媒体协商
- pc.setRemoteDescription(new RTCSessionDescription(res.data));
- //如果收到的是Candidate消息
- } else if (res.data.hasOwnProperty('type') && res.data.type === 'candidate') {
- var candidate = new RTCIceCandidate({
- sdpMLineIndex: res.data.label,
- candidate: res.data.candidate
- });
- //将远端Candidate消息添加到PeerConnection中
- pc.addIceCandidate(candidate);
- }
- }
- };
- } else {
- appendLog("Your browser does not support WebSockets.");
- }
- };
-
- function appendLog(text) {
- let item = document.createElement("div");
- item.innerText = text;
- let doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
- log.appendChild(item);
- if (doScroll) {
- log.scrollTop = log.scrollHeight - log.clientHeight;
- }
- }
-
- function login() {
- let req = new Object;
- req.cmd = "CMD_USER_LOGIN";
- req.username = username.value;
- req.password = "123456";
- req.agent = "browser";
- let str = JSON.stringify(req);
- console.log(str);
- conn.send(str);
- }
-
- function chat() {
- if (!conn) {
- return false;
- }
- if (!msg.value) {
- return false;
- }
-
- appendLog("我说:" + msg.value);
-
- let req = new Object;
- req.cmd = "CMD_CHAT";
- req.text = msg.value;
- let str = JSON.stringify(req);
- console.log(str);
- conn.send(str);
- msg.value = "";
- return false;
- }
-
- function call() {
- let req = new Object;
- req.cmd = "CMD_CALL";
- req.caller = username.value;
- req.callee = "";
- let str = JSON.stringify(req);
- console.log(str);
- conn.send(str);
- }
-
- </script>
- </head>
-
- <body>
- <div class="container">
- <div class="top">
- <label>用户账号</label>
- <input id="username"></input>
- <button id="login" onclick="login()">登录</button>
- <button id="call" onclick="call()">呼叫</button>
- <button id="call" onclick="hangup()">挂断</button>
- </div>
- <div class="middle">
- <div class="log" id="log"></div>
- <div class="preview">
- <div class="local">
- <p>Local:</p>
- <video id="localvideo" autoplay playsinline muted></video>
- <p>Offer SDP:</p>
- <textarea class="sdp" id="offer"></textarea>
- </div>
- <div class="remote">
- <p>Remote:</p>
- <video id="remotevideo" autoplay playsinline></video>
- <p>Answer SDP:</p>
- <textarea class="sdp" id="answer"></textarea>
- </div>
- </div>
- </div>
- <div class="bottom">
- <textarea id="msg" cols="70" rows="6" style="overflow: visible; resize: none"></textarea>
- <button id="send" style="vertical-align: top;" onclick="chat()">发送</button>
- </div>
- </div>
-
- <!--
- 引用的JavaScript脚本库:
- socket.io.js:用于连接信令服务器
- adapter-latest.js:用于浏览器适配Chrome,Firefox...
- client.js:WebRTC客户端代码
- -->
- <script src="js/adapter-latest.js"></script>
- <script src="js/client.js"></script>
- </body>
-
- </html>
|