首页

视频聊天室Demo(webRTC)

java

2020-6-28

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
String userId = request.getParameter("userId");
%>

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>视频聊天室Demo</title>
  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    #videos {
      position: absolute;
      left: 30%;
      top: 0;
      bottom: 0;
      right: 0;
      overflow: auto;
    }

    #videos video {
      display: inline-block;
      width: 32%;
    }
    
    #videos .admin {
      height: 1px;
      width: 1px;
    }

    #chat {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 30%;
      border: 1px solid #0f0f0f;
    }
    #chat .msgIpt, #chat .fileIpt{
      position: absolute;
      left: 0;
      width: 80%;
    }
    #chat .sendBtn, #chat .sendFileBtn {
      position: absolute;
      left: 80%;
      width: 20%;
    }
    #chat .msgIpt,#chat .sendBtn {
      bottom: 30px;
    }
    #chat .fileIpt, #chat .sendFileBtn {
      bottom: 60px;
    }

    #chat .msgs {
      padding: 5%;
    }
    #chat .msgs p{
      margin: 0.3em 0;
    }
    #files {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20%;
    }
    #files .name {
    }
    #files .percent {
      font-weight: bold;
      text-decoration: none
    }
    .video-block {
    	position: relative;
    	display: inline-block;
    }
    .video-block p {
    	height: 30px;
    	line-height: 30px;
    	text-align: center;
    }
  </style>
</head>
<body >
  <div id="chat">
    <div class="msgs" id="msgs"></div>
    <%
    	if(userId.indexOf("fr") != -1) {
    %>
		    <button id="downBtn" style="position: absolute;  left: 80%; width: 20%; bottom: 0;">退出视频会见</button>
    <%
    	}
    %>
  </div>
    <!-- 
     -->
  <div id="videos">
	  		<video id="me" autoplay></video>
  </div>
  <!-- 
   -->
  <div id="files"></div>
</body>
<script type="text/javascript" src="<%=basePath%>chatRoom/process.js"></script>
<script type="text/javascript">
  var videos = document.getElementById("videos");
  var rtc = SkyRTC();
  <%
	if(userId.indexOf("fr") != -1) {
%>
var downBtn = document.getElementById("downBtn");
downBtn.onclick = function(event){
	  rtc.leave('<%=userId%>');
	  rtc.downloads();
};
<%
	}
%>
  	
  rtc.on("get_peers", function(connections) {
  });

  rtc.on("connected", function(socket) {
    //创建本地视频流
    rtc.createStream({
      "video": true,
      "audio": true
    });
  });

  rtc.on("stream_created", function(stream) {
    document.getElementById('me').src = URL.createObjectURL(stream);
    document.getElementById('me').play();
  });

  rtc.on("stream_create_error", function() {
    alert("create stream failed!");
  });
  rtc.on("getFiles", function(aa) {
	  setTimeout(function() { 
		  rtc.download(aa)
		}, aa*5000);
  });

  rtc.on('pc_add_stream', function(stream, socketId) {
    var id = "other-"   socketId;
    if(document.getElementById(id)) {}else{
	    var divVideo = document.createElement("div");
	    divVideo.setAttribute("id", 'div-' id);
	    var newVideo = document.createElement("video");
	    newVideo.setAttribute("autoplay", "autoplay");
	    newVideo.setAttribute("id", id);
	    if(socketId.indexOf('admin') != -1) {
		    newVideo.setAttribute("class", "admin");
    	} else {
		    newVideo.setAttribute("class", "other");
    	}
	    videos.appendChild(newVideo);
    }
    rtc.attachStream(stream, socketId);
  });

  rtc.on('remove_peer', function(socketId) {
    var video = document.getElementById('other-'   socketId);
    if(video){
      video.parentNode.removeChild(video);
    }
  });
  //连接WebSocket服务器	
  rtc.connect('wss://10.250.196.37:443/ws/<%=userId%>');
  window.onbeforeunload = function () {  
      rtc.close();  
  } 
</script>
</html>

资源下载此资源下载价格为3D币(VIP免费),请先
资源文件列表
╩╙╞╡┴─╠∞/myWebrtc/.classpath , 958
╩╙╞╡┴─╠∞/myWebrtc/.project , 1041
╩╙╞╡┴─╠∞/myWebrtc/.settings/.jsdtscope , 500
╩╙╞╡┴─╠∞/myWebrtc/.settings/org.eclipse.jdt.core.prefs , 364
╩╙╞╡┴─╠∞/myWebrtc/.settings/org.eclipse.wst.common.component , 483
╩╙╞╡┴─╠∞/myWebrtc/.settings/org.eclipse.wst.common.project.facet.core.xml , 305
╩╙╞╡┴─╠∞/myWebrtc/.settings/org.eclipse.wst.jsdt.ui.superType.container , 49
╩╙╞╡┴─╠∞/myWebrtc/.settings/org.eclipse.wst.jsdt.ui.superType.name , 6
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/META-INF/MANIFEST.MF , 39
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/classes/com/websocket/CmdObject.class , 1088
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/classes/com/websocket/CopyOnWriteMap.class , 2770
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/classes/com/websocket/HttpSessionConfigurator.class , 1282
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/classes/com/websocket/MsgDown.class , 1449
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/classes/com/websocket/MsgUp.class , 1243
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/classes/com/websocket/ResultObject.class , 912
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/classes/com/websocket/StringUtil.class , 703
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/classes/com/websocket/WsServer.class , 7640
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/lib/commons-beanutils-1.8.0.jar , 231320
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/lib/commons-collections-3.1.jar , 559366
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/lib/commons-httpclient-3.0.jar , 279383
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/lib/commons-lang-2.5.jar , 279193
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/lib/commons-logging-1.1.1.jar , 60686
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/lib/ezmorph-1.0.6.jar , 86487
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/lib/json-lib-2.4-jdk15.jar , 159123
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/lib/org.springframework.core-3.1.1.RELEASE.jar , 449324
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/WEB-INF/web.xml , 620
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/chatRoom/login.jsp , 1770
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/chatRoom/process.js , 19021
╩╙╞╡┴─╠∞/myWebrtc/WebRoot/chatRoom/room.jsp , 4262
╩╙╞╡┴─╠∞/myWebrtc/myLib/catalina.jar , 1670762
╩╙╞╡┴─╠∞/myWebrtc/myLib/java_websocket.jar , 88934
╩╙╞╡┴─╠∞/myWebrtc/myLib/jsp-api.jar , 87803
╩╙╞╡┴─╠∞/myWebrtc/myLib/servlet-api.jar , 197994
╩╙╞╡┴─╠∞/myWebrtc/myLib/tomcat-coyote.jar , 805909
╩╙╞╡┴─╠∞/myWebrtc/myLib/websocket-api.jar , 36270
╩╙╞╡┴─╠∞/myWebrtc/src/com/websocket/CmdObject.java , 645
╩╙╞╡┴─╠∞/myWebrtc/src/com/websocket/CopyOnWriteMap.java , 1874
╩╙╞╡┴─╠∞/myWebrtc/src/com/websocket/HttpSessionConfigurator.java , 690
╩╙╞╡┴─╠∞/myWebrtc/src/com/websocket/MsgDown.java , 1144
╩╙╞╡┴─╠∞/myWebrtc/src/com/websocket/MsgUp.java , 746
╩╙╞╡┴─╠∞/myWebrtc/src/com/websocket/ResultObject.java , 500
╩╙╞╡┴─╠∞/myWebrtc/src/com/websocket/StringUtil.java , 273
╩╙╞╡┴─╠∞/myWebrtc/src/com/websocket/WebSocketTest.java , 5287
╩╙╞╡┴─╠∞/myWebrtc/src/com/websocket/WsServer.java , 6175
没有账号? 忘记密码?

社交账号快速登录