cncml手绘网

标题: swoole视频直播（记录用 未测试） [打印本页]
作者: admin    时间: 2020-3-29 18:53
标题: swoole视频直播（记录用 未测试）
服务器代码& _! n+ _5 d5 i1 d
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);0 J4 P. a% o3 q& d
  2. $client=array();
    6 J% E# ?! [0 _! |' n, p: V( f1 C
  3. $serv->on("open",function($serv,$req)use($client){% W+ d( c1 X0 e. y+ D9 s) T
  4.         //echo 'connect'.$req->fd;. Y8 h- @$ s4 c! d. x
  5.         $client[]=$req;
    . v5 p" M3 S, u- Z: `
  6.         //var_dump($client);" B$ @: r" i' @+ X8 P
  7.         $serv->push($req->fd,'aa');" D( ?1 J6 Q8 l/ g, r1 W
  8. });
    + m% r' L. r9 t

  9. 5 h$ s: C" Q6 Y$ R' S
  10. $serv->on("message",function($serv,$frame)use ($client){# A$ B) W$ [8 d: U. h* B& {
  11.         /*var_dump($frame->data);
    $ G! V( Z* M  t) S
  12.         foreach($client as $key =>$val){
    * D4 F' V/ b% B3 w4 Z3 k4 o
  13.                 $serv->push($val->fd,'aa');
    ) M0 y! H0 F% X4 i. A( X
  14.         }*/
    ! w% J1 j7 _% S) G! y: ^
  15.         $client=$serv->connection_list();, U9 l6 K) T1 v- F7 z
  16.         var_dump($client);) p1 u" i; V$ v6 B' j! m$ F
  17.         foreach($client as $key =>$val){1 @4 I6 y# W, v! V
  18.                 if($val!=$frame->fd){2 n0 [6 F$ n) N! O/ S$ ]
  19.                         $serv->push($val,$frame->data);
    0 D2 c( K4 ?& f: G  W
  20.                 }, r% o6 U. ^- I; M4 u+ Y" V
  21.         }
    / @* |% Z: P. X
  22.         ( m+ L. ~+ F* q- n7 I
  23. });% v- Q, s% s* S. Q- U

  24. 3 v' a. `/ N1 f# q
  25. $serv->on("close",function($serv,$fd){
    9 z2 s, q" a4 Y: J" G. D
  26.         echo 'close';1 R1 U7 o) g/ O- Z1 e
  27. });+ E5 \+ ~; J" d2 H3 s. L2 W  V

  28. & L+ `# f3 X; J  e) \* P+ H, K
  29. $serv->start();; C, ?! `8 C9 I: T. f; c: ^9 F
  30. ( C$ K3 l% K) y5 I1 u" r
复制代码
主播客户端7 |# I4 `. w! i4 F2 o/ q/ F& b$ A: S# E
  1. <!doctype html>
    ! Y2 I* e2 @, T9 O% B
  2. <html>
    9 z" ], ~, f7 J5 Z( R: t% L
  3. <head>
    ! m: H9 D4 }2 _
  4. <meta charset="utf-8">$ E! b! ^/ H2 v$ I$ b

  5. " N3 G8 a2 Y: `4 q; W
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">- E& y  X* V. X2 Q7 F  Y) \
  7. <title>404</title>
    9 m( y5 q- b# t
  8. <style>
    3 G& w0 s' ~1 m7 o) V- S! Y
  9.         body{
    / O. {/ X( Q$ J
  10.                 background-color:#444;
    ) }& d# h# z( E" U: D2 s
  11.                 font-size:14px;& h% f( k! X2 l
  12.         }9 h9 T" B, t+ d! f/ s4 I
  13.         h3{
    / K& l% z4 T' z8 m$ _7 q
  14.                 font-size:60px;/ w% Q; l: j, i( `# Q
  15.                 color:#eee;8 P* P7 g9 D1 T' v7 e4 a
  16.                 text-align:center;& d/ E2 n8 {8 k! f+ N$ i
  17.                 padding-top:30px;
    3 J& R% j  h' u* f
  18.                 font-weight:normal;& {3 Q  Y, i( c! ^  v
  19.         }
    1 S! t* J& p2 Z5 E/ s
  20. </style>
    , I; Y7 t# Q# q
  21. </head>
    + a) F* H" m3 q! K- u
  22.   _) |& A  b1 ^( v6 _
  23. <body>, j, S& b' @5 Q0 r/ \
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
    6 H% d! c1 ]7 d7 |  q
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>
    ' F4 a7 z  l$ e* q
  26. <canvas width="400" id="canvas2" height="400" ></canvas>
    3 d& {: T6 ^! |! d- n( D6 P
  27. <script>9 w- ~' A- u+ T. M: @0 R. S
  28. var video=document.getElementById('video');5 {6 x% R6 [( R& b; O
  29. var canvas=document.getElementById('canvas');
    ) R$ x. ?1 ^+ b; E! N% j6 X9 J6 Y
  30. var canvas2=document.getElementById('canvas2');" \7 |, f& v6 H7 @# H1 ], I# y7 h( D( u
  31. var context=canvas.getContext('2d');
    . P( H2 F/ f$ |! v, G' O
  32. var context2=canvas2.getContext('2d');1 t# @, g. e# V' M+ a; _% e1 y8 S" P, Q
  33. function draw(){5 Q0 ?5 ^. A' W9 w$ _% E8 o& J2 N
  34.         context.drawImage(video,0,0,400,400);
    & Z, ?9 G, s1 s4 v% @( C' P) r; G
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    / b5 N0 Z- X3 t. i7 O
  36.         setTimeout(draw,800);
    % Z: q* F; p0 s7 @5 Q' Y
  37. }
    % ^* u2 R) W* e6 Q/ @4 f' [
  38. 2 g4 v& J) q! Y, i2 k! ^" `
  39. //客户端跟服务端通讯
    $ Y+ K" P  p- ]% z9 q+ R6 x
  40. if (window.MozWebSocket)
    4 z6 E( K1 ~0 b- j
  41. {
    . a' W( {: n3 f& m! H7 X
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    7 E" @1 a, K  X" W( F, F6 L
  43. } else
    8 i+ q: U, H& u8 s0 @' }2 y$ c! @
  44. {
    , L+ q( Y7 Q, }3 P8 `$ H: A
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    # ~0 d* F: U- Z2 l
  46. }
    ' @' z* @4 o7 z! X
  47. , f( f# }% p' ?/ F
  48. ws.onopen=function(event){' G% W2 S0 |6 O  v  d+ Z
  49.         alert('连接成功');
    ! s6 f0 m3 h$ c2 F# E1 a. I; w* F: `3 c
  50.         ws.binaryType = 'arraybuffer';' A7 P$ e! m* l3 h( @; g
  51.         draw();
    + N8 X1 i- {+ c  r5 B! a3 j( I
  52. }
    # n7 o( u  s1 p3 o
  53. ws.onmessage=function(event){( ]1 P, {" t8 _9 U' S; G) @) _
  54.         //alert(event.data);8 d( l4 {( w9 \& n" L9 @
  55.         //ws.send(event.data+"client");8 x) k' ^* l  W
  56.         qrCodeImg = new Image();8 A3 t- O  a& g# f1 u
  57.         qrCodeImg.src = event.data;
    & F- M; h9 B- w4 l# m4 c- L7 ?
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);
    6 b& Z9 Q# a! A6 R
  59.         
    3 x/ K+ w" n* r8 g
  60. }6 D  k7 {, T% `
  61. ws.onclose=function(event){
    / h( @0 s4 A1 J* a
  62.         alert('close');
    7 g+ I4 O. }0 ]& x! j
  63. }
    / r5 N( l' F" |# b4 x. u+ Z6 K
  64. ws.onerror=function(event){
    2 @! O% c$ _2 G7 x0 A7 _( {! H. n
  65.         alert('error');
    9 j$ n6 I& C8 n. b4 Z; ?4 r! n5 j
  66. }# v8 J. d( o7 X5 N
  67. //video，标签模拟视频
    5 Z* q2 q: C8 r

  68. * \4 j5 R, Q; @/ J% }  f
  69. </script>
    , W8 i$ v/ v/ I2 E6 a+ m, Z$ a
  70. </body>  a3 G$ `( j( j: _$ n
  71. </html>
    * \& H* _9 K; {1 P" F
  72. ; ~3 ~8 [! p# ~! m7 s/ I
复制代码
客户端：
, |8 |: {3 s5 s: ~
  1. <html>* n4 j& V% M. v5 L: J( t; B
  2. <head>7 V# V( m$ {5 r% K2 n
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">/ i( d2 w8 ]: m# V. F
  4. <title>客户端直播页面</title>
    ; j' H# @/ R  x* S
  5. </head>$ D6 W" ~, ~1 x8 |" P
  6. <body>
    ( h+ l8 r0 _& a9 e1 ?
  7. <img id="receiver" style="width:720px;height:480px">
    ; G; B+ k9 d( D  }$ c( O* \

  8. ; P2 d5 E6 w. W6 z9 j
  9. <script type="text/javascript" charset="utf-8">
    ; V, X. g9 T8 z( v$ H7 _) v
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
    ) N5 @4 K. K- {/ u* y
  11. var image = document.getElementById('receiver');7 q, a3 S: k- P) H
  12. receiver_socket.onmessage = function(data) {
    2 h# p8 D# s* ]
  13.         console.log(data.data);
    . B5 c- b( G0 o' c
  14.         image.src = data.data;- Z2 V& s7 [5 y( T
  15. }/ \. `9 Q3 ^4 e+ @$ u
  16. </script>
    3 y& p" F' d# G
  17. </body>. g3 ^1 @1 {! R* g, J, ?
  18. </html>
    ; O/ v& P! @* S2 a

  19. - |7 d8 u. v, b) P8 K
复制代码

* U% _8 x: `" g9 e0 M7 `8 K, G( Z! g$ ]
. J+ }: L3 h) e  {9 q7 Y8 {2 j! \6 V
! t# H# j8 F. X5 \" Z4 |9 e( _) {) J
% q+ \9 v# ?4 T, i+ e: K7 X' ?& P
4 V: K8 i  F7 k; s) p+ y




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