实例介绍
【实例简介】
【实例截图】
【核心代码】
<%@ 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>
好例子网口号:伸出你的我的手 — 分享!
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论