相看不相识 相看不相识
目前还在读书,平时喜欢郊游,讨厌做很麻烦的事情,时而乐天,时而忧郁,容易幻想,但不会不切实际.
关注数: 1 粉丝数: 9 发帖数: 66 关注贴吧数: 4
websocket直播观看者界面 <meta charset="utf-8"> <html> <head> </head> <body> <h1><font style="color: red;"><?=$user?></font>的直播</h1> 主播是<input type="button" value="<?=$user?>" id="zuser"><br> 正在观看的是<input type="button" value="<?=$username?>" id="username"> <img src="" id="showvideo"> 当前积分:<font style="color: red" id="num"><?=$num?></font> <div id="showmsg" style="float: right; margin-right: 100px; border:1px solid #e1e1e1; width: 350px;height: 400px;overflow:auto;"></div> <div>在线人数<span id="usernum"></span>在线人员<div id="userlist"></div></div> <br> 送礼物: <input type="button" value="花 -5" num="5" class="a">&nbsp; <input type="button" value="掌声 -10" num="10" class="a">&nbsp; <input type="button" value="豪车 -50" num="50" class="a">&nbsp; <br> <textarea id="text" style="width: 450px;height: 150px;"></textarea> <input type="file" id="file1" onchange="uploadpic()"> <img src="" id="img2" style="display: none"> <canvas id="img3" style="width: 90px;height: 90px;"></canvas> <button onclick="sendmsg()">发送</button> <script> function uploadpic(){ var file=document.getElementById('file1').files[0]; var read=new FileReader(); read.onload=function(e){ document.getElementById('img2').src=e.target.result; document.getElementById('img3').getContext('2d').drawImage(document.getElementById('img2'),0,0,document.getElementById('img3').width,document.getElementById('img3').height); }; read.readAsDataURL(file); } var img1=document.getElementById('showvideo'); var ws=new WebSocket('ws://39.106.30.235:2345'); ws.onopen=function () { var username = $("#username").val(); ws.send('{"type":"login","username":"' + username + '"}'); }; ws.onmessage=function(d){ if(/^video>>/.test(d.data)){ img1.src=d.data.replace(/^video>>/,''); } if(/^image>>/.test(d.data)){ $("#showmsg").append("<img src='"+d.data.replace(/^image>>/,'')+"'>"); } if (/^text>>/.test(d.data)){ $("#showmsg").append(d.data.replace(/^text>>/,''+"<br>")); } if(/^userlist>>/.test(d.data)){ var list = d.data.replace(/^userlist>>/,'').split(','); var userinfo = ''; for (i = 0; i < list.length; i++) { userinfo += "<span><font color='red'>" + list[i] + "</font></span><br>"; } $("#usernum").html("<font color='red'>&nbsp;&nbsp;&nbsp;"+list.length+"</font><br>"); $("#userlist").html(userinfo); } }; window.onbeforeunload = onbeforeunload_handler; window.onunload = onunload_handler; function onbeforeunload_handler(){ ws.send('{"type":"out","username":"'+username+'"}'); ws.close(); } function sendmsg(){ var text = $("#text").val(); var username = $("#username").val(); var res = username +" : "+ text; ws.send('{"type":"text","content":"'+res+'"}'); if(document.getElementById('img2').src){ ws.send('{"type":"image","content":"'+document.getElementById('img3').toDataURL('image/jpeg',0.9)+'"}'); } $("#text").val(""); } </script> </body> </html> <script src="js/jquery-3.2.1.min.js"></script> <script> $(document).on("click",".a",function(){ var num = $(this).attr("num"); var zuser = $("#zuser").val(); var username = $("#username").val(); var money= $("#num").html(); var str =""; switch (num){ case '5' : str = "花"; break; case '10' : str = "掌声"; break; case '50' : str = "豪车"; break; } $.ajax({ type: "POST", url: "index.php?r=zone/upmoney", data: {num:num,zuser:zuser}, success: function(msg){ ws.send('{"type":"text","content":"'+username+"送给主播"+str+'"}'); $("#num").html(msg); } }); }); </script>
websocket直播 <meta charset="utf-8"> <html> <head> </head> <body> <video id="v" style="width:500px;height:300px;border:1px solid #e1e1e1;"></video> <!-- <audio id="a"></audio>--> <font style="color: red; size: 100px;"><?=$data;?></font>正在直播 <div id="showmsg" style="float: right; margin-right: 100px; border:1px solid #e1e1e1; width: 350px;height: 400px;overflow:auto;"></div> <input type="hidden" value="<?=$data;?>" id="user"><div>在线人数0<span id="usernum"></span><br>在线人员<div id="userlist"></div></div> <input type="button" value="退出直播" id="exit"> <canvas id="cutpic" style="width: 400px; height: 300px; display: none"></canvas> <!--<button onclick="cutimg();">截图</button>--> <script> //html5新特性 var chai1=document.getElementById('cutpic'); //转换成2d的样式 var chai2=chai1.getContext('2d'); var video=document.getElementById('v'); navigator.getUserMedia=navigator.getUserMedia || navigator.msGetUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia; navigator.getUserMedia({video:true,audio:true},function (stream){ video.src=window.URL.createObjectURL(stream); video.play(); },console.log); var ws=new WebSocket('ws://39.106.30.235:2345'); ws.onopen=function(){ draw(); }; ws.onmessage=function(d){ if (/^text>>/.test(d.data)){ $("#showmsg").append(d.data.replace(/^text>>/,''+"<br>")); } if(/^userlist>>/.test(d.data)){ var list = d.data.replace(/^userlist>>/,'').split(','); var userinfo = ''; for (i = 0; i < list.length; i++) { userinfo += "<span><font color='red'>" + list[i] + "</font></span><br>"; } $("#usernum").html("<font color='red'>&nbsp;&nbsp;&nbsp;"+list.length+"</font><br>"); $("#userlist").html(userinfo); } if(/^image>>/.test(d.data)){ $("#showmsg").append("<img src='"+d.data.replace(/^image>>/,'')+"'>"); } }; function draw(){ if(video.src){ chai2.drawImage(video,0,0,chai1.width,chai1.height); } ws.send('{"type":"video","content":"'+chai1.toDataURL("image/jpeg",0.1)+'"}'); setTimeout(draw,100); } </script> </body> </html> <script src="js/jquery-3.2.1.min.js"></script> <script> $(document).on("click","#exit",function(){ var user = $("#user").val(); $.ajax({ url: "index.php?r=zone/exit&user="+user, success: function(msg){ windows.go(-1); }}); }); </script>
1 下一页