swoole视频直播（记录用 未测试）

admin

服务器代码
5 S. S5 t: h0 S6 i

1. $serv=new swoole_websocket_server("0.0.0.0",9501);
   * @! q3 B5 c" T/ o
2. $client=array();
   / M* M/ E5 f" g  J2 D1 @) @
3. $serv->on("open",function($serv,$req)use($client){
   8 ~" n% g. X! J
4.         //echo 'connect'.$req->fd;
   ! n$ F" c8 c6 ]' e- z$ h
5.         $client[]=$req;
   
6.         //var_dump($client);
   
7.         $serv->push($req->fd,'aa');
   
8. });
   
9. 
   
10. $serv->on("message",function($serv,$frame)use ($client){
    # |# u# c3 k2 K% u
11.         /*var_dump($frame->data);
    ) j9 N9 Y7 k0 h' {# D
12.         foreach($client as $key =>$val){
    
13.                 $serv->push($val->fd,'aa');
    
14.         }*/
    
15.         $client=$serv->connection_list();
    
16.         var_dump($client);
    7 X4 L% P3 k# v$ G/ k
17.         foreach($client as $key =>$val){
    % a6 d- i8 E+ s- D6 \  m$ F
18.                 if($val!=$frame->fd){
    ; T6 `, s3 j) C
19.                         $serv->push($val,$frame->data);
    
20.                 }
    8 n+ j* |4 o+ v7 x
21.         }
    8 h% i: d% A+ h: c
22.         
    
23. });
    : m) x# A4 {+ m1 J
24. 
    
25. $serv->on("close",function($serv,$fd){
    
26.         echo 'close';
    ' H: {9 D& l4 c
27. });
    
28. 
    
29. $serv->start();
    0 \9 \1 ?4 B: ^/ |+ x
30. 
    ; m. K! z9 }, `" n4 c

复制代码

主播客户端

1. <!doctype html>
   ( h& B$ w- t$ ~  B* ~* l7 {
2. <html>
   
3. <head>
   
4. <meta charset="utf-8">
   % p0 N/ j0 x5 F3 k$ r! D
5. 
   
6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   
7. <title>404</title>
   2 r2 h5 _9 v& t2 N4 I" Q1 E% r! X4 E2 J
8. <style>
   
9.         body{
   
10.                 background-color:#444;
    
11.                 font-size:14px;
    
12.         }
    
13.         h3{
    0 Z+ W& u- P( l0 z/ t
14.                 font-size:60px;
    
15.                 color:#eee;
    , ^/ Q* ^. ]& M. A
16.                 text-align:center;
    1 k9 ~* |  p+ G1 N6 ~* B* f5 }
17.                 padding-top:30px;
    
18.                 font-weight:normal;
    
19.         }
    4 v- k) ~- c# Z& _1 ?; R
20. </style>
    " b% t# E) ?; K  Y+ ?/ t3 ^
21. </head>
    
22. 
    4 q$ o8 T5 N0 s1 p( ^% }7 _, r
23. <body>
    $ Q# W! w8 L8 r1 {
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>
    4 Q6 y9 Q  z3 R
26. <canvas width="400" id="canvas2" height="400" ></canvas>
    * e& R% }2 s, E( J
27. <script>
    , B; n& K+ L! o
28. var video=document.getElementById('video');
    8 G* |( T0 q8 v8 J! i2 e/ T& T, y
29. var canvas=document.getElementById('canvas');
    
30. var canvas2=document.getElementById('canvas2');
    1 ]+ M4 V: s: y/ r) C! s7 S( Z- ~6 P5 y; c
31. var context=canvas.getContext('2d');
    . J/ N) o2 @9 d
32. var context2=canvas2.getContext('2d');
    
33. function draw(){
    
34.         context.drawImage(video,0,0,400,400);
    8 U- _$ E$ C. R0 }( X
35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    % t& g. r- q  v2 ?7 I$ H  |
36.         setTimeout(draw,800);
    0 ^1 e* D7 l6 _7 p5 q2 Q/ `( q
37. }
    / j" c+ ~$ W+ Q; T9 x! `' i' D
38. 
    ) l; q- r/ D( i( j0 U
39. //客户端跟服务端通讯
    
40. if (window.MozWebSocket)
    ' \5 p" V( o, R2 J9 B
41. {
    
42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    
43. } else
    + F& z6 G1 ?0 W
44. {
    
45.         ws = new WebSocket("ws://182.61.42.187:9501");
    6 u, _+ {, H2 S7 Q; K8 I8 q
46. }
    * [% `2 L+ F# |$ Y2 e+ B4 T
47. 
    ( ~$ E: n% \" r9 [: ?6 d
48. ws.onopen=function(event){
    
49.         alert('连接成功');
    
50.         ws.binaryType = 'arraybuffer';
    
51.         draw();
    
52. }
    % @4 m3 J) y3 ^# \3 R* h
53. ws.onmessage=function(event){
    
54.         //alert(event.data);
    
55.         //ws.send(event.data+"client");
    $ h% k* T3 F2 F( d/ F' O3 \
56.         qrCodeImg = new Image();
    
57.         qrCodeImg.src = event.data;
    
58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);
    # R# o/ z  r- O5 j
59.         
    3 B2 k/ F3 ~; b" i
60. }
    6 u3 h2 p( Q( c1 D3 L# Y6 M
61. ws.onclose=function(event){
    % M1 d' V' E( c0 O, {7 v
62.         alert('close');
    . n! v! G8 d" O( [' A" P
63. }
    1 N' U) O) k4 `
64. ws.onerror=function(event){
    " A4 C% n4 i& U7 D. w/ y
65.         alert('error');
    7 [* ~  D3 c1 Z% i; V3 i. k
66. }
    - G* ]% x! @9 U4 j/ i! {* Z
67. //video，标签模拟视频
    ) @+ n" s2 ~1 y1 b. W
68. 
    
69. </script>
    
70. </body>
    ! e) ~6 }& N! p
71. </html>
    % c' }7 E  V; Y- r1 M2 k& d9 _2 l; ~
72. 
    ) g1 N7 L, F# b5 K3 L

复制代码

客户端：
7 h; g  h7 \2 }3 s# z8 i- N, P

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">
   . k3 x7 p6 p1 D7 X
8. 
   
9. <script type="text/javascript" charset="utf-8">
   ( g% O; u4 I/ t( [. _1 B5 \
10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
    0 Y+ n. j$ d7 H7 A4 C
11. var image = document.getElementById('receiver');
    
12. receiver_socket.onmessage = function(data) {
    
13.         console.log(data.data);
    
14.         image.src = data.data;
    " v6 O5 H6 L- f( X0 C
15. }
    & v' Q( x; W; J1 e: s
16. </script>
    0 e) _9 y  H; l5 B# F
17. </body>
    
18. </html>
    
19. 
    5 e3 f+ `4 k, s1 {" W

复制代码

, i( k1 ]; F) D+ R: t" }0 f
& L% H/ M3 C4 x5 W

0 |  b( w' F( h( U; m6 ]# Y

  |/ h1 M6 Y0 U7 Q- k  I