123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510 |
- $("html").append('<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">');
- $("html").append('<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>');
- $("html").append('<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>');
- $("body").append(
- '<div class="btn-group pull-right" style="position: absolute;right: 20px;top:20px;">'+
- '<button type="button" class="btn dropdown-toggle btn-sm " data-toggle="dropdown" style="opacity:0.6;">'+
- '在线视频聊天(最好使用谷歌浏览器) <span class="glyphicon glyphicon-align-justify"></span>'+
- '</button>'+
- '<ul class="dropdown-menu" id="chat_socketCon" role="menu" id="chat_users">'+
- '<li id="rct_con"><a href="javascript:void(0)">未连接(点击连接获取用户列表)</a></li>'+
- '<li class="divider"></li>'+
- '</ul>'+
- '</div>'
- );
- $("body").append(
- '<div class="modal fade" id="chat_dialog" tabindex="-1" role="dialog" data-keyboard="false" aria-hidden="true" data-backdrop="static" aria-labelledby="myModalLabel">'+
- '<div class="modal-dialog">'+
- '<div class="modal-content">'+
- '<div class="modal-header">'+
- '<h4 class="modal-title">消息</h4>'+
- '</div>'+
- '<div class="modal-body"><span id="chat_ready_id" data-uid=""></span>,与你发起对话申请,你是否同意</div>'+
- '<div class="modal-footer">'+
- '<button type="button" class="btn btn-default" onclick="chat_ready(0)">关闭</button>'+
- '<button type="button" class="btn btn-primary" onclick="chat_ready(1)">确定</button>'+
- '</div>'+
- '</div>'+
- '</div>'+
- '</div>'
- );
- $("body").append(
- '<div class="modal fade" id="chat_name_modal" tabindex="-1" role="dialog" data-keyboard="true" data-backdrop="static" aria-labelledby="myModalLabel">'+
- '<div class="modal-dialog">'+
- '<div class="modal-content">'+
- '<div class="modal-header">'+
- '<h4 class="modal-title">提示</h4>'+
- '</div>'+
- '<div class="modal-body"><input type="text" id="chat_name" class="form-control" placeholder="请输入你昵称"></div>'+
- '<div class="modal-footer">'+
- '<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>'+
- '<button type="button" class="btn btn-primary" onclick="chat_setName()">确定</button>'+
- '</div>'+
- '</div>'+
- '</div>'+
- '</div>'
- );
- $("body").append(
- '<div class="modal fade" id="chat_dialogForOne" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" style="overflow:auto;">' +
- '<div class="modal-dialog" style="width: 904px;">' +
- '<div class="modal-content">' +
- '<div class="modal-header">' +
- '<h4 class="modal-title">你正在与[<label name="name"></label>]对话</h4>' +
- '</div>' +
- '<!-- 聊天框 -->' +
- '<div class="modal-body" style="margin: 0px;padding: 0px;">' +
- '<div style="height: 647px;">' +
- '<!-- 聊天信息展示 -->' +
- '<div style="width: 600px;height: 647px;float: left;">' +
- '<div style="overflow-y:auto;height: 500px;" class="overflow-3">' +
- '<!-- 每一条聊天记录都加在 li里面 -->' +
- '<ul class="bubbleDiv overflow-3" name="bubbleDiv"></ul>' +
- '</div>' +
- '<!-- 聊天输入 -->' +
- '<div style="height: 166px;">' +
- '<!-- 功能框 -->' +
- '<div style="height: 25px;">' +
- '<!-- 发送附件功能 -->' +
- '<div style="margin-left: 5px;">' +
- '<label for="chat_fileMsgForOne">' +
- '<span><!--<i class="glyphicon glyphicon-link"></i>--></span>' +
- '</label>' +
- '<!--<form><input type="file" id="chat_fileMsgForOne" style="position:absolute;clip:rect(0 0 0 0);"></form>-->' +
- '</div>' +
- '</div>' +
- '<!-- 输入框 -->' +
- '<div style="height: 142px;width: 100%;">' +
- '<textarea class="overflow-3" name = "message" style="width: 100%;height: 100%;resize:none;border: 0px;background-color: #EEEEEE;" placeholder="请输入需要发送的内容"></textarea>' +
- '</div>' +
- '</div>' +
- '</div>' +
- '<!-- 右侧视频语音聊天展示 -->' +
- '<div style="width: 300px;height: 647px;float: left;">' +
- '<!-- 本地视频框 -->' +
- '<div class="panel panel-default" style="margin: 0px;padding: 0px;">' +
- '<div class="panel-body">' +
- '<video style="height:250px;width:250px;margin: 0px;padding: 0px;" name="video" autoplay>' +'</video>' +
- '</div>' +
- '<div class="panel-footer" align="center">' +
- '<button type="button" class="btn btn-default btn-lg btn-xs" name="openVideo" data-use="false"><i class="glyphicon glyphicon-facetime-video"></i><span>开始视频</span></button>' +
- '<button type="button" class="btn btn-default btn-lg btn-xs" name="openAudio" data-use="false"><i class="glyphicon glyphicon-earphone"></i><span>开始语音</span></button>' +
- '</div>' +
- '</div>' +
- '<!-- 远端视频框 -->' +
- '<div class="panel panel-default" style="margin: 0px;padding: 0px;">' +
- '<div class="panel-body">' +
- '<video style="height:250px;width:250px;" name="remote" autoplay></video>' +
- '</div>' +
- '<div class="panel-footer" align="center">好友视频展示</div>' +
- '</div>' +
- '</div>' +
- '</div>' +
- '</div>' +
- '<div class="modal-footer">' +
- '<button type="button" class="btn btn-default" data-dismiss="modal">关闭对话</button>' +
- '<button type="button" class="btn btn-success" id="chat_sendString">发送消息[Enter]</button>' +
- '</div>' +
- '</div>' +
- '</div>'
- );
- var chat_socket = null;
- var rtc = null;
- var chat_name = null;
- var chat_setName = function(){
- var name = $("#chat_name").val();
- if(name){
- chat_name = name;
- chat_socketCon();
- chat_sendMsg(1,"");
- $("#chat_name_modal").modal('hide');
- }
- }
- var chat_socketCon = function(){
- if(chat_socket != null){
- return;
- }
- chat_socket = 0;
- var t_socket = createWebSocket("webrtc",websocketPath,
- function(){
- chat_socket = t_socket;
- chat_sendMsg(0,chat_name);
- },function(){
- chat_socket = null;
- $("#chat_socketCon li a").eq(0).html("未连接(点击连接获取用户列表)");
- var u = $("#chat_socketCon");
- var li = u.find("li");
- for(var i = 2;i < li.length; i++){
- li[i].remove();
- }
- $("#chat_ready_id").html("");
- $("#chat_ready_id").data("uid","");
- $("#chat_dialog").modal('hide');
- $("#chat_dialogForOne").modal("hide");
- },function(){
- chat_socket = null;
- $("#chat_socketCon li a").eq(0).html("未连接(点击连接获取用户列表)");
- var u = $("#chat_socketCon");
- var li = u.find("li");
- for(var i = 2;i < li.length; i++){
- li[i].remove();
- }
- },function(msg){
- var data = JSON.parse(msg);
- chat_response(data.type,data.message);
- });
- }
- var chat_response = function(type,msg){
- if(type == "0"){
- $("#chat_socketCon li a").eq(0).html("已连接(<span id='uid'>"+msg+"</span>)再次点击刷新");
- chat_sendMsg(1,"");
- }else if(type == "1"){
- if(msg.length != 0){
- var users = JSON.parse(msg);
- var u = $("#chat_socketCon");
- var li = u.find("li");
- for(var i = 2;i < li.length; i++){
- li[i].remove();
- }
- if(users.length == 0){
- u.append('<li><a href="javascript:void(0)">暂未有其他用户连接</a></li>');
- u.append('<li><a href="javascript:void(0)">可以开两个浏览器模拟使用(暂时只支持谷歌)</a></li>');
- u.append('<li><a href="javascript:void(0)">不是第一次访问,请先清除浏览器文件缓存</a></li>');
- return;
- }
- for(var i in users){
- var uid = users[i]["sessionId"];
- var name = users[i]["name"];
- var status = users[i]["status"];
- var ready = users[i]["callId"] == uid ? 2 : 1;
- u.append("<li name='chat_user'><a href=\"javascript:void(0)\"><span class='glyphicon glyphicon-user'></span> "+name+" <button data-userid='"+uid+"' type='button' class='btn "+(status == 0 ? "btn-success" : ready == 2 ? "btn-primary" : "btn-warning")+" btn-xs' id='u"+uid+"'>"+(status == 0 ? "申请对话" : ready == 2 ? "取消对话" : "正在对话")+"</button></a></li>");
- }
-
- $("#chat_socketCon li[name='chat_user']").on("click",function(e){
- e.stopPropagation();
- });
- $("#chat_socketCon button").off("click").on("click",function(e){
- e.stopPropagation();
- var userid = $(this).data("userid");
- if(userid){
- var status = $(this).html();
- if(status == "申请对话"){
-
- var bts = $("#chat_socketCon button");
- for(var i = 0;i < bts.length; i++){
- if($(bts[i]).html() == "取消对话"){
- return;
- }
- }
- chat_sendMsg(2,userid);
- $(this).html("取消对话");
- $(this).toggleClass("btn-success");
- $(this).toggleClass("btn-primary");
- }else if(status == "取消对话"){
- chat_sendMsg(4,"");
- }
- }
- });
- }
- }else if(type == "2"){
- if(msg.length != 0){
- var users = JSON.parse(msg);
- $("#chat_ready_id").html(users.name);
- $("#chat_ready_id").data("uid",users.sessionId);
- $("#chat_dialog").modal('show');
- }
- }else if(type == "3"){
- if(msg.length != 0){
- var users = JSON.parse(msg);
- var ready = users.ready;
- var uid = users.sessionId;
- if(ready == "1"){
- var dialogfor = $("#chat_dialogForOne");
- var dialogforname = dialogfor.find("label[name='name']");
- rtc = rtc_getTool(onmessage,onaddstream,function(){
- dialogfor.modal("hide");
- },function(){
- dialogforname.html(users.name);
- dialogfor.modal("show");
- });
- rtc.createPeerConnection();
- rtc.sendOffer();
- }else if(ready == "0"){
- var bt = $("#u" + uid);
- bt.html("申请对话");
- bt.removeClass("btn-primary");
- bt.addClass("btn-success");
- }
- }
- }else if(type == "4"){
- if(msg.length != 0){
- $("#chat_dialog").modal('hide');
- $("#chat_dialogForOne").modal("hide");
- var u = $("#u" + msg);
- u.html("申请对话");
- u.removeClass("btn-primary");
- u.addClass("btn-success");
- $("#chat_ready_id").html("");
- $("#chat_ready_id").data("uid","");
- if(rtc != null){
- rtc.close();
- }
- }
- }else if(type == "6"){
- if(msg.length != 0){
- var json = JSON.parse(msg);
- rtc.signallingHandle(json);
- }
- }else if(type == "7"){
- if(msg.length != 0){
- var json = JSON.parse(msg);
- rtc.signallingHandle(json);
- }
- }else if(type == "8"){
- if(msg.length != 0){
- var json = JSON.parse(msg);
- rtc.signallingHandle(json);
- }
- }
- }
- $("#rct_con").on("click",function(e){
- e.stopPropagation();
- if(chat_socket == null){
-
- $("#chat_name_modal").modal('show');
- }else{
- chat_sendMsg(1,"");
- }
-
- });
- var chat_sendClick = function(){
- var value = $("#chat_dialogForOne textarea[name='message']").val();
- var msg = {"data":value,"type":"text","id":$("#uid").html()};
- showMessage("chat_dialogForOne",msg,"right");
- rtc.send(JSON.stringify(msg));
- }
- $("#chat_sendString").on("click",function(e){
- chat_sendClick();
- });
- $("#chat_dialogForOne textarea[name='message']").on("keydown",function(e){
- if(e.keyCode == 13 && e.ctrlKey){
- $(this).val($(this).val() + "\n");
- }else if(e.keyCode == 13){
- e.preventDefault();
- chat_sendClick();
- }
- });
- $("#chat_fileMsgForOne").on("change",function(){
-
- });
- var filequeue = {};
- var onmessage = function(event){
- var msg = JSON.parse(event.data);
- if(msg.type == "text"){
- showMessage("chat_dialogForOne",msg,"left");
- }else if(msg.type == "file"){
-
- }
- }
- var onaddstream = function(remoteStream){
- var video = $("#chat_dialogForOne video[name='remote']")[0];
- video.srcObject = remoteStream;
- video.onloadedmetadata = function(e) {
- video.play();
- };
- }
- var resetVideoButton = function(){
- var openVideo = $("#chat_dialogForOne button[name='openVideo']");
- var openAudio = $("#chat_dialogForOne button[name='openAudio']");
- openVideo.find(" > span").html("开始视频");
- openAudio.show();
- openAudio.find(" > span").html("开始语音");
- openVideo.show();
- openVideo.removeClass("active");
- openAudio.removeClass("active");
- openAudio.data("use",false);
- openVideo.data("use",false);
- }
- $("#chat_dialogForOne button[name='openVideo']").on("click",function(){
- $(this).toggleClass("active");
- if(!$(this).data("use")){
- $(this).data("use",true);
- rtc.openVideoAudioLocal(function(localStream){
- var video = $("#chat_dialogForOne video[name='video']")[0];
- video.srcObject=localStream;
- video.onloadedmetadata = function(e) {
- video.play();
- };
- rtc.sendAddStream(localStream);
- },true,true);
- $(this).find(" > span").html("结束视频");
- $("#chat_dialogForOne button[name='openAudio']").hide();
- }else{
- rtc.closeStream();
- resetVideoButton();
- }
- });
- $("#chat_dialogForOne button[name='openAudio']").on("click",function(){
- $(this).toggleClass("active");
- $(this).data("use",$(this).data("use") ? false : true);
- if($(this).data("use")){
- rtc.openVideoAudioLocal(function(localStream){
- var video = $("#chat_dialogForOne video[name='video']")[0];
- video.srcObject=localStream;
- video.onloadedmetadata = function(e) {
- video.play();
- };
- rtc.sendAddStream(localStream);
- },false,true);
- $(this).find(" > span").html("结束语音");
- $("#chat_dialogForOne button[name='openVideo']").hide();
- }else{
- rtc.closeStream();
- resetVideoButton();
- }
- });
- $("#chat_dialogForOne").on("hidden.bs.modal",function(e){
- resetVideoButton();
- if(rtc != null){
- rtc.close();
- rtc = null;
- chat_sendMsg(4,"");
- }
-
- var lis = $(this).find("ul[name='bubbleDiv'] > li");
- for (var i = 0 ; i < lis.length; i++){
- $(lis[i]).remove();
- }
- });
- var chat_sendMsg = function(type,msg){
- if(chat_socket == null || chat_socket == 0){
- return false;
- }
- chat_socket.send(type,msg);
- return true;
- }
- var chat_ready = function(i){
- chat_sendMsg("3",i);
- if(i == 1){
- var uid = $("#chat_ready_id").data("uid");
- var dialogfor = $("#chat_dialogForOne");
- var dialogforname = dialogfor.find("label[name='name']");
- rtc = rtc_getTool(onmessage,onaddstream,function(){
- dialogfor.modal("hide");
- },function(){
- dialogforname.html($("#chat_ready_id").html());
- dialogfor.modal("show");
- });
- rtc.createPeerConnection();
- var bt = $("#u" + uid);
- bt.html("取消对话");
- bt.removeClass("btn-success");
- bt.addClass("btn-primary");
- }
- $("#chat_dialog").modal('hide');
- }
- var showMessage = function(showId,message,is_i){
- if(message.data.length != 0){
- var li = $('<li class="bubbleItem clearfix">');
- var img = $('<img src="https://tse4-mm.cn.bing.net/th?id=OIP.hfxD_t92dafBqI_1EADiHAHaFG&p=0&o=5&pid=1.1" height="35px;" style="float: '+is_i+';">');
- var span = $('<span class="bubble '+is_i+'Bubble">');
- var you_msg = $('<span>');
- you_msg.html(message.data);
- span.append(you_msg);
- var bottomLevel = $('<span class="bottomLevel">');
- span.append(bottomLevel);
- var bottomLevel = $('<span class="topLevel">');
- span.append(bottomLevel);
- li.append(img);
- var div = $("<div style='float:"+is_i+";max-width: 60%;'>");
- var name = $('<label style="font-size:12px;float:'+is_i+';margin-'+is_i+':10px;">昵称['+message.id+']</label>');
- div.append(name);
- div.append($('<br/>'));
- div.append(span);
- li.append(div);
- $("#"+showId+" ul[name='bubbleDiv']").append(li);
- $("#"+showId + " textarea[name='message']").val("");
- }
- }
|