cncml手绘网

标题: swoole视频直播（记录用 未测试） [打印本页]
作者: admin    时间: 2020-3-29 18:53
标题: swoole视频直播（记录用 未测试）
服务器代码
! I8 S7 K# w& |( n
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);
    $ s2 e% k$ B/ t3 j8 M) V6 }
  2. $client=array();
    7 i% g- t1 O, I* X0 J) ]
  3. $serv->on("open",function($serv,$req)use($client){' m- Q# I* U% m, J  u
  4.         //echo 'connect'.$req->fd;
    : E: D4 P% u% j/ t$ }, H, m
  5.         $client[]=$req;+ w$ s' N% `8 i
  6.         //var_dump($client);- R( w4 {5 s$ g! k$ K
  7.         $serv->push($req->fd,'aa');
    / i! Y, }% s- m3 Q4 H) x
  8. });  X7 z  f2 s' t  a
  9. 8 P  d5 G( U- P0 b. R/ B. x. M; B! S
  10. $serv->on("message",function($serv,$frame)use ($client){
    + x4 A, m- ?0 J/ c- _7 v* f8 T0 ^
  11.         /*var_dump($frame->data);
    : Q/ n6 d) f7 X2 C* M% p4 }
  12.         foreach($client as $key =>$val){
    0 g3 G/ ~* A$ _% Q! G# J
  13.                 $serv->push($val->fd,'aa');3 t0 x/ p8 ]9 _" o  j0 c
  14.         }*/
    ' h9 U. r: [8 ]0 V/ F
  15.         $client=$serv->connection_list();
    0 ?0 i  o- @& K$ r# I" r5 E- h8 `0 k
  16.         var_dump($client);" v  ^6 K! Y5 Z$ g! @& j
  17.         foreach($client as $key =>$val){
    , f' ^7 R) W2 H& r% t8 }' O& {
  18.                 if($val!=$frame->fd){
    & P4 s' t+ e3 Q3 U$ e, \6 }! s
  19.                         $serv->push($val,$frame->data);
    7 g5 `% K+ r- y$ K, K
  20.                 }
    $ W4 N% l5 Y" K! v
  21.         }
    ( W# {' V& F' @2 w" J4 _4 y9 W
  22.         6 ~) w0 b! d! e6 O
  23. });" ?( ~8 F2 {4 k0 L+ d) F/ v
  24. 1 Z8 Y9 ~( r# j2 K
  25. $serv->on("close",function($serv,$fd){
    ; t$ C4 Z% p. x7 L7 H% N
  26.         echo 'close';; m0 g* l; F: `/ G; u# B5 X" ^3 ~
  27. });
    : }9 a& R2 D1 w2 P
  28. 4 Q3 e& C8 q4 B/ j# E
  29. $serv->start();' u1 w3 q, a% n. a
  30. 8 H- S: p# C! K$ v
复制代码
主播客户端
( O. i% g5 m, g  N
  1. <!doctype html>
    * |$ T3 D" h4 q* o( r
  2. <html>$ [7 F( j9 k7 p0 Z
  3. <head>2 k0 u0 C4 d5 R! o
  4. <meta charset="utf-8">$ ~3 }! C: `" G0 T9 J( W  k
  5. - ^4 a# c1 B4 \$ i; b! j' v
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"># J9 S( ]9 V: b1 P' a0 |
  7. <title>404</title>( s3 k; v9 Z1 R
  8. <style>
    ; w+ j6 z4 w) o) U
  9.         body{0 f  Q; x7 N% H
  10.                 background-color:#444;
    8 _; [4 y" J2 i- y
  11.                 font-size:14px;
      t2 P) O' p/ m) g5 }
  12.         }+ h0 C; S& _3 a2 d: y5 s+ P
  13.         h3{
    8 ^2 ^( {  `( N  ]# h4 U
  14.                 font-size:60px;
    4 ]1 K0 e4 T9 y- t& X; p' Z
  15.                 color:#eee;: N5 v( z4 v7 ?7 x3 t  z1 O
  16.                 text-align:center;
    / z1 t9 ]! Y# E7 G( ]8 B
  17.                 padding-top:30px;2 o1 U. V5 b' j4 q
  18.                 font-weight:normal;
    $ c1 @  N! o# m% H' V6 V) n
  19.         }
    ) O0 T" t: y, M7 }* M0 A
  20. </style>" z. X: J- c0 T! Y, n: d0 ^, @
  21. </head>
    ! c. k3 ?2 O2 \1 B7 G" c# N

  22. ( K8 J4 g6 n6 r
  23. <body>+ L0 q5 a) {( b9 M1 M
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>6 I$ B( j% x9 |' u& y5 z% J
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas># w; Y' p0 N& W2 D
  26. <canvas width="400" id="canvas2" height="400" ></canvas>
    ' }# X: i* O) Z6 \6 r6 ]; l% S4 G
  27. <script>
    / g2 b- @: S* e% q  c. P4 k
  28. var video=document.getElementById('video');
    & b; d- x! w$ r! z
  29. var canvas=document.getElementById('canvas');/ e2 L, R5 f0 |: K+ O
  30. var canvas2=document.getElementById('canvas2');* }/ \; U4 I$ `
  31. var context=canvas.getContext('2d');/ r( G8 E  ?: Y1 k
  32. var context2=canvas2.getContext('2d');
    ! I" [6 z' a; ]! \3 D6 E
  33. function draw(){
    # s0 |4 \8 E+ o" L" \; d
  34.         context.drawImage(video,0,0,400,400);
    - G& L3 [8 D2 n" q1 M# E
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    5 m% c+ V4 V3 d- I2 ]! N# m! R
  36.         setTimeout(draw,800);( z, g: F  A! {% T; l
  37. }* U+ |6 O  R) n0 [) V7 w+ Q
  38. ! E; Y6 G. t+ m
  39. //客户端跟服务端通讯
    ( L( y( F9 l2 j% |! t# [9 `0 i8 E! Z. U
  40. if (window.MozWebSocket)
    ; B* }0 O, V" t* \" f
  41. {$ X- |6 J/ T8 s% A
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    ( ^0 f9 ?! S5 u* u; f9 S
  43. } else
    9 h, c' C# e% @9 z* u
  44. {* l: V( L8 h, d! c8 }) Q0 q. V. q$ I, ~
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    5 k6 d& T: w6 I5 M$ h' a: K( \
  46. }8 q/ K5 G  h5 Q2 H- r" \

  47. $ B* \; L8 d8 x, B1 f5 L! `2 z
  48. ws.onopen=function(event){
    / o1 X1 s5 w; B' \- a; z! Z3 u
  49.         alert('连接成功');" U1 [. h2 [/ \$ y, ?# [
  50.         ws.binaryType = 'arraybuffer';. T- p2 M( a7 v6 H2 D
  51.         draw();
    $ w$ q* J' W; C9 t/ Y
  52. }3 a" l. E" W* Y6 i' m
  53. ws.onmessage=function(event){
    + c8 Y+ }' g% f# M# }& j
  54.         //alert(event.data);. I( n( u9 Z2 o
  55.         //ws.send(event.data+"client");
    & U: `' \2 n' S/ u4 i2 i2 i1 X
  56.         qrCodeImg = new Image();
    ; S: D# ?9 }0 G9 |/ `
  57.         qrCodeImg.src = event.data;
    8 N; ?) i6 U/ T* U- s  y# X
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);0 C1 o" e+ m# _: G
  59.         9 g0 W, b: k$ Q. g; M5 Q
  60. }
    1 y* W" p1 D! q1 X0 G
  61. ws.onclose=function(event){' U6 l* F9 x& k: h) U. `9 R; ?5 h
  62.         alert('close');
    5 L; Y/ y* |" ?! G% Y; P6 m
  63. }: g8 y) y$ ~/ C' d' p
  64. ws.onerror=function(event){( c- \! ]8 C1 ?( Q
  65.         alert('error');$ f# e3 y8 ?+ A1 M
  66. }
    2 X6 m; @" T; ]; J; |  `6 g
  67. //video，标签模拟视频# H+ |4 v5 Q" a4 H! W: i& u# b

  68. , Z3 s8 m8 J! }& h: v
  69. </script>% y! D9 |- b" }2 |2 H3 K
  70. </body>
    7 e9 ^# Z4 K" C# E
  71. </html>
    5 s' N/ ^0 v- W. i6 Y
  72. 5 T* o8 i9 W) R8 X8 W2 M7 F
复制代码
客户端：; e5 b: e! v& v
  1. <html>
    0 v% f$ f( y4 k
  2. <head>
    * D  E, h3 y4 t5 ?8 c. H/ h4 @
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
    " H' I3 t7 l% |/ z  j7 k; H
  4. <title>客户端直播页面</title>0 L, u3 Y6 H  T1 U. w: V5 [
  5. </head>" ?5 [( i* w+ |/ A% n
  6. <body>, j- V9 _7 S1 ~$ h; Y
  7. <img id="receiver" style="width:720px;height:480px">) |. O: H' @- p; m( j& Q
  8. , o( P" z! n& }
  9. <script type="text/javascript" charset="utf-8">
    0 `/ L- _$ l. Q* W
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");* U. A4 H* S! u
  11. var image = document.getElementById('receiver');' Q4 z  @" L9 g! x: ~
  12. receiver_socket.onmessage = function(data) {
    $ x+ j3 I2 s# _4 I5 J4 N
  13.         console.log(data.data);: j) l3 p6 w& \3 q  ?% q
  14.         image.src = data.data;
    - M( N/ i+ \& i- n2 u" }
  15. }. r" x- h, ?- t- t, Z$ s
  16. </script>6 I; _4 p; Y- z
  17. </body>
    $ @1 p3 n9 \) q5 ^! x
  18. </html>
    . {' W8 N+ @, H: t
  19. 7 U' D8 [/ p* Q
复制代码
8 k8 ]6 m$ i) ^- z4 ~

# l$ w3 _( \2 b* B# w( V) W. y3 ]: g3 E9 [7 a" e1 d$ Y" n

# ?% c+ C7 K/ s$ Q" r4 Y8 M3 W7 m0 g7 D" e, B: U
9 j2 R- B4 Q& a8 b




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