加入收藏 | 设为首页 | 会员中心 | 我要投稿 | RSS
您当前的位置：首页 > 学习资料

swoole视频直播（记录用 未测试）
时间：2021-03-21 20:52:14  来源：  作者：
服务器代码
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);
  2. $client=array();
  3. $serv->on("open",function($serv,$req)use($client){
  4.         //echo 'connect'.$req->fd;
  5.         $client[]=$req;
  6.         //var_dump($client);
  7.         $serv->push($req->fd,'aa');
  8. });
  9.  
  10. $serv->on("message",function($serv,$frame)use ($client){
  11.         /*var_dump($frame->data);
  12.         foreach($client as $key =>$val){
  13.                 $serv->push($val->fd,'aa');
  14.         }*/
  15.         $client=$serv->connection_list();
  16.         var_dump($client);
  17.         foreach($client as $key =>$val){
  18.                 if($val!=$frame->fd){
  19.                         $serv->push($val,$frame->data);
  20.                 }
  21.         }
  22.         
  23. });
  24.  
  25. $serv->on("close",function($serv,$fd){
  26.         echo 'close';
  27. });
  28.  
  29. $serv->start();
  30.  
  31.  
复制代码
主播客户端
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5.  
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7. <title>404</title>
  8. <style>
  9.         body{
  10.                 background-color:#444;
  11.                 font-size:14px;
  12.         }
  13.         h3{
  14.                 font-size:60px;
  15.                 color:#eee;
  16.                 text-align:center;
  17.                 padding-top:30px;
  18.                 font-weight:normal;
  19.         }
  20. </style>
  21. </head>
  22.  
  23. <body>
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>
  26. <canvas width="400" id="canvas2" height="400" ></canvas>
  27. <script>
  28. var video=document.getElementById('video');
  29. var canvas=document.getElementById('canvas');
  30. var canvas2=document.getElementById('canvas2');
  31. var context=canvas.getContext('2d');
  32. var context2=canvas2.getContext('2d');
  33. function draw(){
  34.         context.drawImage(video,0,0,400,400);
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
  36.         setTimeout(draw,800);
  37. }
  38.  
  39. //客户端跟服务端通讯
  40. if (window.MozWebSocket)
  41. {
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
  43. } else
  44. {
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
  46. }
  47.  
  48. ws.onopen=function(event){
  49.         alert('连接成功');
  50.         ws.binaryType = 'arraybuffer';
  51.         draw();
  52. }
  53. ws.onmessage=function(event){
  54.         //alert(event.data);
  55.         //ws.send(event.data+"client");
  56.         qrCodeImg = new Image();
  57.         qrCodeImg.src = event.data;
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);
  59.         
  60. }
  61. ws.onclose=function(event){
  62.         alert('close');
  63. }
  64. ws.onerror=function(event){
  65.         alert('error');
  66. }
  67. //video，标签模拟视频
  68.  
  69. </script>
  70. </body>
  71. </html>
  72.  
  73.  
复制代码
客户端：
  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4. <title>客户端直播页面</title>
  5. </head>
  6. <body>
  7. <img id="receiver" style="width:720px;height:480px">
  8.  
  9. <script type="text/javascript" charset="utf-8">
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
  11. var image = document.getElementById('receiver');
  12. receiver_socket.onmessage = function(data) {
  13.         console.log(data.data);
  14.         image.src = data.data;
  15. }
  16. </script>
  17. </body>
  18. </html>
  19.  
  20.  
复制代码

 

来顶一下
返回首页
返回首页
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
实现php间隔一段时间执行一次某段代码
实现php间隔一段时间
相关文章
    无相关信息
栏目更新
栏目热门
站内搜索： 高级搜索
网站首页 | 关于我们 | 服务条款 | 广告服务 | 联系我们 | 网站地图 | 免责声明 | WAP
Powered by EmpireCMS 7.5  © 2002-2018 EmpireSoft Inc.