cncml手绘网

标题: swoole视频直播（记录用 未测试） [打印本页]
作者: admin    时间: 2020-3-29 18:53
标题: swoole视频直播（记录用 未测试）
服务器代码
8 B7 z# U! v8 \( z" U" R8 f& p
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);2 l! a) T% u0 x# [  `" u6 h2 H$ K  A
  2. $client=array();) Q  Z& e% Z/ j0 ^2 T7 k
  3. $serv->on("open",function($serv,$req)use($client){( v% N, M. b: I6 S" N5 }) ]
  4.         //echo 'connect'.$req->fd;- d8 ]) m/ Q9 ?
  5.         $client[]=$req;7 p8 M& b1 U! p# \' H. E9 N
  6.         //var_dump($client);
    ; ~( t/ e/ `! I7 o0 }, w' ]
  7.         $serv->push($req->fd,'aa');
    ) F7 x! K7 l! J* H$ X
  8. });
    & m! Y) U- C, j! N

  9. - f! @' H0 O9 r- g5 f% c% g: ?& y
  10. $serv->on("message",function($serv,$frame)use ($client){
    % {: R# @# m: C9 b4 }9 O- ~
  11.         /*var_dump($frame->data);8 m; `8 w% v, b
  12.         foreach($client as $key =>$val){/ W% {9 H) s  F# j7 \6 T; P& O
  13.                 $serv->push($val->fd,'aa');
    , i5 A1 P. F5 ?
  14.         }*/2 d# q$ x$ n8 N# }8 R4 J
  15.         $client=$serv->connection_list();
    ! r/ j- y" m* Q1 l6 H; ~  m/ m" J
  16.         var_dump($client);" T: {5 y0 ^8 n+ b  ]7 ]6 j, x& m! v
  17.         foreach($client as $key =>$val){! m& K/ G6 `8 Y9 z6 R* u
  18.                 if($val!=$frame->fd){
    * p: ]8 P# O% k) }
  19.                         $serv->push($val,$frame->data);& L: \. j  m* G5 n8 c/ O
  20.                 }# P1 @: V! _/ K/ u* u- V; i
  21.         }
    ( `: {$ ^: H9 _0 ?5 w! u9 r
  22.         
    % f0 S% L( @. s6 R6 x
  23. });8 _: D1 k0 n5 l2 w
  24. 1 E+ Q" ]- k# u. h* s) C* q0 b
  25. $serv->on("close",function($serv,$fd){
    3 z3 ^9 @; z; m$ d9 h: B$ E
  26.         echo 'close';/ B4 t. k( s+ a* B
  27. });
    2 m0 w. ?* q1 \2 R! {. `0 x
  28. " \  S2 X$ q/ k2 g- X
  29. $serv->start();: E7 }/ z  M9 [+ O1 u6 C
  30. - C1 e! {  Y9 ~( ?  n  P
复制代码
主播客户端' S; y% W4 O& M: [) D
  1. <!doctype html>3 m' V8 J" V. ]3 s
  2. <html>3 b6 o9 M1 Q4 {1 r. C  c
  3. <head>
    ! q: V" x! {! N  t" o
  4. <meta charset="utf-8">
    ) J# c. E9 x* h4 T+ u+ T7 C9 [1 |
  5. / r6 H/ g$ ^, r. l  {
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    5 O* H& o5 N* }
  7. <title>404</title>7 Z2 W: m3 i0 {* H  l( P
  8. <style>1 [6 i) E% G$ D$ o: }, G
  9.         body{2 O. O) ~5 k9 k! ]
  10.                 background-color:#444;7 w- p8 s* q. O# ]
  11.                 font-size:14px;
    ; H: ^2 y5 \* W" B% o
  12.         }" g+ W$ H+ W$ q2 Y. V* |. H( P7 |
  13.         h3{  V; n& h( M% n) j% n4 i7 \% M
  14.                 font-size:60px;
    9 n! ^# ]4 C# t
  15.                 color:#eee;
    % d, S# Y% G/ B0 |' o. u
  16.                 text-align:center;$ [  |- R, Y8 i" G0 w
  17.                 padding-top:30px;' J3 R0 k) {& S1 a# Z* T
  18.                 font-weight:normal;- z  s$ `9 {0 B4 p( n) c- P1 Z
  19.         }
    3 E% ?7 e0 }. q; g+ ]( i
  20. </style>5 a- ?. n+ A1 Z  r2 V/ U, B5 b
  21. </head>
    ; r4 G9 N' {$ Z: c5 Q3 K+ f& F
  22. 1 l( k! g% J7 e8 b# l
  23. <body>1 a. c6 R/ v& d5 i% p
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
    2 k/ P4 E$ @7 F# W: r8 {) a3 u
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>
      [- \- P$ A9 H  j4 {5 @5 e' K4 ^
  26. <canvas width="400" id="canvas2" height="400" ></canvas>
    7 Y0 \2 t: z* Q1 {( _5 u
  27. <script>0 o! T8 W; s% W" t5 ?9 i
  28. var video=document.getElementById('video');- H/ e, C8 P7 ?0 g9 g4 f
  29. var canvas=document.getElementById('canvas');
    + {* q5 B3 H% e8 F$ H
  30. var canvas2=document.getElementById('canvas2');
    ; S, P' R+ f; l: B8 s' i) w: x/ |1 w
  31. var context=canvas.getContext('2d');  x5 w+ l! @- z0 |/ p, `
  32. var context2=canvas2.getContext('2d');6 u" Z8 l8 }% |- X7 O' _2 |/ N6 |
  33. function draw(){
    : b# e( W1 t- D5 D& I
  34.         context.drawImage(video,0,0,400,400);( F) y' H! ^# S, F
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    ' l9 X3 F! }6 n+ `
  36.         setTimeout(draw,800);
    + `2 K  i# r6 h4 T& _. C+ H
  37. }& J; f; t% V3 H

  38. ( B# e- t7 f0 s; u+ y; u! T7 W
  39. //客户端跟服务端通讯# U$ L& `+ N' M2 [/ p
  40. if (window.MozWebSocket)4 S  y4 J! ^) M& n! K  c% W3 `
  41. {
    : y& K4 P; s8 S0 e! O; d
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");; R: }! a4 X- t* l: O1 f, V
  43. } else
    0 P! n4 @! ^) Y7 L# u) D
  44. {
    0 x2 v+ k: {$ h
  45.         ws = new WebSocket("ws://182.61.42.187:9501");% _- |. B: [3 ?4 @' P; O, M1 q
  46. }: M5 o. e# e! J  l

  47. * G/ T$ ~% S( x# b4 c+ v
  48. ws.onopen=function(event){* b5 m: w4 Y% Y2 }! a4 C: L
  49.         alert('连接成功');
    5 [* A+ Y6 ~4 a% D2 |7 Q% q) c: X. s
  50.         ws.binaryType = 'arraybuffer';
      ]/ F* U; |/ w' u* k* ?
  51.         draw();! R1 q5 r3 @6 u# B( a  V+ g
  52. }# \# r9 Q& n& l0 a- F* A) V2 F
  53. ws.onmessage=function(event){
    % H8 ^+ b! M. C
  54.         //alert(event.data);
    5 g" x' p& b/ y$ z$ G* P
  55.         //ws.send(event.data+"client");" S0 L  ^- r7 T, v1 ]" U; w
  56.         qrCodeImg = new Image();
    6 S  C. |. {% D! w+ u5 X6 _- q
  57.         qrCodeImg.src = event.data;
    4 P" K( X+ `% |4 V
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);3 E& Z4 \- ?0 ~# t. E# ]! S/ f5 B8 A
  59.         
    $ g( u, o' V+ L4 T0 ^
  60. }- {/ n* S4 H. x3 S9 G* ]
  61. ws.onclose=function(event){- m  p- u% W! p) k4 @! v
  62.         alert('close');
    9 J' }0 Z6 K! G) F6 @5 _/ U. t
  63. }
    8 T# e1 E+ s5 P* `# d% n% y5 T
  64. ws.onerror=function(event){7 x/ o: H" h( d# O8 I# e
  65.         alert('error');/ n5 E% P- S7 X+ r5 K( T% q
  66. }/ }2 j  x# b8 W: `, s
  67. //video，标签模拟视频. w9 u+ h# c' ?7 Y, K7 K
  68. ) p4 ?, b8 V* Q7 O. K% W5 J- K* J
  69. </script>
    ; T  @1 B; G  B7 `( ^6 ]; V
  70. </body>
    7 p0 R0 {( w3 S
  71. </html>1 m2 K  @& a( q! j

  72. ; U, M: o- A: x/ `& N+ h! K& I
复制代码
客户端：
4 T9 Q/ b* M; `6 S
  1. <html>* [$ \- C* ]1 ?& _. {4 T* H3 [
  2. <head>$ X5 X  ]# f# [' o
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">9 O5 _, J" i$ Y# z# j) |0 G
  4. <title>客户端直播页面</title>9 o+ W7 v6 t, C; L# _3 n
  5. </head>
    ) k& c" Q. i: P
  6. <body>5 V* ]' A/ X& q
  7. <img id="receiver" style="width:720px;height:480px">$ Q( L, X- Y1 u' [9 h9 y* `

  8. % s+ n2 b$ d. W8 g, k
  9. <script type="text/javascript" charset="utf-8">/ ~7 ^" f# m0 t9 P0 `7 n
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
    $ ]7 K. ~- l# Y* I9 }# o2 |
  11. var image = document.getElementById('receiver');
    & V; y& A$ G* j: q* r" p' ]
  12. receiver_socket.onmessage = function(data) {1 a; a" L+ J7 c' d, C
  13.         console.log(data.data);
    6 M" |- N1 J1 @/ p4 U
  14.         image.src = data.data;& ^2 V3 q( ~9 J  m
  15. }
    8 m! z/ p! K. [2 s* Y
  16. </script>/ E' b; I  F, x8 r' k: L
  17. </body>/ Z0 T* f4 P; _8 ?
  18. </html>
    + l) N, S/ u; S& w7 k2 d, c
  19. ( Y# s5 ]4 u4 U2 O. J9 _% `3 S- x9 S
复制代码
! d% e; [( A9 F
/ |& r5 w% p1 K" D
. S! E9 i7 w6 f1 l) ], O5 k+ f
0 j- t8 n) s* L. d

( i: ^( j7 x3 F5 m
$ ~2 `# Z$ D- `6 U- j9 r



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2