level 2
相看不相识
楼主
<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'> "+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>
2017年12月20日 11点12分
1
<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'> "+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>