conn.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. var videos = document.getElementById("videos");
  2. var sendBtn = document.getElementById("sendBtn");
  3. var msgs = document.getElementById("msgs");
  4. var sendFileBtn = document.getElementById("sendFileBtn");
  5. var files = document.getElementById("files");
  6. var rtc = SkyRTC();
  7. /**********************************************************/
  8. sendBtn.onclick = function (event) {
  9. var msgIpt = document.getElementById("msgIpt"),
  10. msg = msgIpt.value,
  11. p = document.createElement("p");
  12. p.innerText = "me: " + msg;
  13. //广播消息
  14. rtc.broadcast(msg);
  15. msgIpt.value = "";
  16. msgs.appendChild(p);
  17. };
  18. sendFileBtn.onclick = function (event) {
  19. //分享文件
  20. rtc.shareFile("fileIpt");
  21. };
  22. /**********************************************************/
  23. //对方同意接收文件
  24. rtc.on("send_file_accepted", function (sendId, socketId, file) {
  25. var p = document.getElementById("sf-" + sendId);
  26. p.innerText = "对方接收" + file.name + "文件,等待发送";
  27. });
  28. //对方拒绝接收文件
  29. rtc.on("send_file_refused", function (sendId, socketId, file) {
  30. var p = document.getElementById("sf-" + sendId);
  31. p.innerText = "对方拒绝接收" + file.name + "文件";
  32. });
  33. //请求发送文件
  34. rtc.on('send_file', function (sendId, socketId, file) {
  35. var p = document.createElement("p");
  36. p.innerText = "请求发送" + file.name + "文件";
  37. p.id = "sf-" + sendId;
  38. files.appendChild(p);
  39. });
  40. //文件发送成功
  41. rtc.on('sended_file', function (sendId, socketId, file) {
  42. var p = document.getElementById("sf-" + sendId);
  43. p.parentNode.removeChild(p);
  44. });
  45. //发送文件碎片
  46. rtc.on('send_file_chunk', function (sendId, socketId, percent, file) {
  47. var p = document.getElementById("sf-" + sendId);
  48. p.innerText = file.name + "文件正在发送: " + Math.ceil(percent) + "%";
  49. });
  50. //接受文件碎片
  51. rtc.on('receive_file_chunk', function (sendId, socketId, fileName, percent) {
  52. var p = document.getElementById("rf-" + sendId);
  53. p.innerText = "正在接收" + fileName + "文件:" + Math.ceil(percent) + "%";
  54. });
  55. //接收到文件
  56. rtc.on('receive_file', function (sendId, socketId, name) {
  57. var p = document.getElementById("rf-" + sendId);
  58. p.parentNode.removeChild(p);
  59. });
  60. //发送文件时出现错误
  61. rtc.on('send_file_error', function (error) {
  62. console.log(error);
  63. });
  64. //接收文件时出现错误
  65. rtc.on('receive_file_error', function (error) {
  66. console.log(error);
  67. });
  68. //接受到文件发送请求
  69. rtc.on('receive_file_ask', function (sendId, socketId, fileName, fileSize) {
  70. var p;
  71. if (window.confirm(socketId + "用户想要给你传送" + fileName + "文件,大小" + fileSize + "KB,是否接受?")) {
  72. rtc.sendFileAccept(sendId);
  73. p = document.createElement("p");
  74. p.innerText = "准备接收" + fileName + "文件";
  75. p.id = "rf-" + sendId;
  76. files.appendChild(p);
  77. } else {
  78. rtc.sendFileRefuse(sendId);
  79. }
  80. });
  81. //成功创建WebSocket连接
  82. rtc.on("connected", function (socket) {
  83. //创建本地视频流
  84. rtc.createStream({
  85. "video": true,
  86. "audio": true
  87. });
  88. });
  89. //创建本地视频流成功
  90. rtc.on("stream_created", function (stream) {
  91. document.getElementById('me').srcObject = stream;
  92. document.getElementById('me').play();
  93. // 设置本地不播放自己的声音
  94. document.getElementById('me').volume = 0.0;
  95. });
  96. //创建本地视频流失败
  97. rtc.on("stream_create_error", function () {
  98. alert("create stream failed!");
  99. });
  100. //接收到其他用户的视频流
  101. rtc.on('pc_add_stream', function (stream, socketId) {
  102. var newVideo = document.createElement("video");
  103. var id = "other-" + socketId;
  104. newVideo.setAttribute("class", "other");
  105. newVideo.setAttribute("autoplay", "autoplay");
  106. newVideo.setAttribute("id", id);
  107. videos.appendChild(newVideo);
  108. rtc.attachStream(stream, id);
  109. });
  110. //删除其他用户
  111. rtc.on('remove_peer', function (socketId) {
  112. var video = document.getElementById('other-' + socketId);
  113. if (video) {
  114. video.parentNode.removeChild(video);
  115. }
  116. });
  117. //接收到文字信息
  118. rtc.on('data_channel_message', function (channel, socketId, message) {
  119. var p = document.createElement("p");
  120. p.innerText = socketId + ": " + message;
  121. msgs.appendChild(p);
  122. });
  123. //连接WebSocket服务器
  124. rtc.connect("wss://elevator.inspuriit.com/wss", window.location.hash.slice(1));