实例介绍
【实例简介】
【实例截图】
【核心代码】
<%@ 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>
好例子网口号:伸出你的我的手 — 分享!
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
网友评论
我要评论