您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 13891|回复: 0
打印 上一主题 下一主题

[swoole] swoole视频直播(记录用 未测试)

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-29 18:53:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
服务器代码* E) g7 f! F; g, G: M/ m5 w
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);# Y( K/ L; j. `, S. k1 r: D
  2. $client=array();
    ' x0 E+ y7 ^; M2 q. b5 _7 y
  3. $serv->on("open",function($serv,$req)use($client){% R( _! t; A. D. `6 H: m
  4.         //echo 'connect'.$req->fd;
    : A- R* H% S- ^: L! l. j
  5.         $client[]=$req;
    9 P' c" F' N+ @9 W. q* U4 x( d
  6.         //var_dump($client);5 l" N+ |! ~+ [: i) z
  7.         $serv->push($req->fd,'aa');
    & n; J) U! X5 ]% {
  8. });
    * m3 Z) G( R7 w# @1 g3 y

  9. ) B& g$ O: w2 L: [
  10. $serv->on("message",function($serv,$frame)use ($client){0 m9 f6 i6 p4 U$ A6 Q
  11.         /*var_dump($frame->data);* o% i! j8 `9 J! ~7 \) E% c
  12.         foreach($client as $key =>$val){
    & z, d5 x* Y; b( g# g+ G
  13.                 $serv->push($val->fd,'aa');
    - N1 ~& F/ o$ d  T' {
  14.         }*/+ ]+ d; u" B# t4 I
  15.         $client=$serv->connection_list();
    ) O: C0 @8 Q2 N/ s5 T! ^
  16.         var_dump($client);
    : G. B  L# I, @, c4 m3 k) g) c
  17.         foreach($client as $key =>$val){" u8 g4 |& ^0 ~: Y5 a
  18.                 if($val!=$frame->fd){
    4 X& d7 U. q3 z9 B" F- F- u
  19.                         $serv->push($val,$frame->data);% k% c( g  D- H2 B. ~' p; O
  20.                 }
    7 [6 v  s1 w" e; q
  21.         }
    ! M6 V% a  E5 ~8 A' d5 Y: _5 U
  22.         
    * R; f4 T/ T4 \7 C
  23. });& z; d. V! y! M2 }# X
  24. ( M- k- l4 X, k' p( b! c
  25. $serv->on("close",function($serv,$fd){
    , D$ Y$ n8 r) M8 G7 O8 ?
  26.         echo 'close';* e: d8 \. D* s5 o8 {) e
  27. });
    1 [# }) n( U4 O

  28. ! ]& g" ~7 M/ R% |8 N
  29. $serv->start();4 z- t4 d, r8 @: R+ m8 Q' D7 H
  30. 3 W: d0 H7 t* X8 {! L' Z1 o+ Z8 q- @
复制代码
主播客户端  Q. @; k, t# _! n2 p, T
  1. <!doctype html>" f7 l+ d' `  k  x# f8 b
  2. <html>; _4 C# l0 n" s) H8 t4 E
  3. <head>
    , k$ g7 w- P4 m2 K9 i
  4. <meta charset="utf-8">9 ]+ L% n$ u5 [6 b

  5. 9 N9 o9 h9 v+ c  x4 V) n% A
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    ( |  a* o1 U0 Q9 \" b7 t# A! L( O
  7. <title>404</title>
    . q, P, I0 L: t1 M2 r& X6 u) m
  8. <style>
    1 s* v8 }: C! v& ~4 j2 _# w
  9.         body{
    ; @3 P1 v8 f. m* r2 `& |
  10.                 background-color:#444;3 _+ I, q. W! f6 C* C& p0 W, S
  11.                 font-size:14px;
    ) `* J/ N1 Z+ g8 `7 f9 D. f* E1 c+ v4 k
  12.         }" D. G0 |- L, x) A
  13.         h3{& I# }" `6 w1 `$ }
  14.                 font-size:60px;/ C9 _( u% g* P" b
  15.                 color:#eee;
    5 v; B+ F2 q9 @( x/ K
  16.                 text-align:center;
    ) E) V$ P: S, b) T! [
  17.                 padding-top:30px;6 J; c0 F$ m% i# ~
  18.                 font-weight:normal;2 W: v0 l! d2 W) g/ U
  19.         }
    , N8 z0 }. a& V2 @
  20. </style>/ K0 h5 T5 T" w. e4 D
  21. </head>0 j: A/ [- X* o, z4 n; b: X  R9 X/ f

  22. $ G+ ?% U* W. ?1 c, Z, b* B6 S
  23. <body>* U8 L5 K4 `, M1 }' Z/ U
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>5 Q3 R  W4 z3 i  m. d
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>
    9 D% M  X3 C' j2 }( d
  26. <canvas width="400" id="canvas2" height="400" ></canvas>4 w6 Y7 l* D! x' N; B3 W4 |
  27. <script>7 L% p$ [: q, h6 k! f. z: g
  28. var video=document.getElementById('video');
    : }: h! t* Q9 w: N9 d4 s- |3 w- S3 ?
  29. var canvas=document.getElementById('canvas');: K7 j: O9 J4 y5 t
  30. var canvas2=document.getElementById('canvas2');
    ; G+ U% R. g# [5 [9 {1 D1 U
  31. var context=canvas.getContext('2d');
    0 o3 n8 P, E* u1 }* f
  32. var context2=canvas2.getContext('2d');
    # {, g4 w& i$ s$ e9 g8 O/ U8 W
  33. function draw(){+ Q6 D& p7 @$ p- x  V6 b
  34.         context.drawImage(video,0,0,400,400);
    % T& v9 |* Z* j6 K0 a3 Z' \
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));- z+ \: m$ e3 Q, m6 J- d  ^4 T
  36.         setTimeout(draw,800);* D: Q. K% @7 i: {
  37. }
    8 F4 D( H" a" N2 t/ z

  38. * _9 v; }. E/ t- w$ W( B  X* k
  39. //客户端跟服务端通讯4 z! h: F4 y" b8 W0 J' X) }, Z
  40. if (window.MozWebSocket)
    # k2 Q5 Z7 V! u
  41. {
    * D+ a5 F3 i) g  q
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");5 w$ S$ P2 r3 u% K3 Q2 Z) e
  43. } else
    3 l; z# V0 `4 }3 V# q
  44. {, P/ p; Q; a; O- j
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    $ o: l9 ?6 s1 s5 e9 m: ?% K
  46. }
    ! |. t, J3 l+ T1 `- Y' U
  47. 9 A* _0 h- F2 t. e7 c+ ~. s; n
  48. ws.onopen=function(event){
    # B. h+ C( f" V8 y- A6 m
  49.         alert('连接成功');4 n$ a9 u9 U- @9 R
  50.         ws.binaryType = 'arraybuffer';
    8 j0 J- |! P4 W+ J' k, n$ B: ~
  51.         draw();
    5 Y/ X; y- ?' W) \
  52. }: S* N. f9 M) i1 w1 r! S, L& ]
  53. ws.onmessage=function(event){5 t& v$ Z: C3 F4 M5 V- V
  54.         //alert(event.data);
    % ]  x; r/ o8 z. {, [. b% a  {* x
  55.         //ws.send(event.data+"client");1 ~' X$ \" l- S9 N# Q
  56.         qrCodeImg = new Image();
    , J2 e5 Z) b7 K% k
  57.         qrCodeImg.src = event.data;
    1 P, b' Z7 C. n3 h3 C6 H1 ~) E
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);& w) q. F) y- b, X$ R
  59.         ( Z8 ^0 V; g( k6 M, o# F8 o4 s% G
  60. }/ W# _; L! C7 V$ Z9 e+ g; j6 @, g! ?
  61. ws.onclose=function(event){# A* U5 V+ J4 }) r+ v/ j" H
  62.         alert('close');
    4 u0 P: C2 ~: v
  63. }
    * `# \$ j" Z- o; o5 R4 H
  64. ws.onerror=function(event){7 B# [6 v8 M0 r
  65.         alert('error');2 e# @5 \8 b  n) x4 b1 V5 Y! w
  66. }, N* P1 O4 S" g2 }$ K+ W
  67. //video,标签模拟视频
    % c* n% |0 L* O, x0 s

  68. % a1 r7 @) O& @& w- T0 y
  69. </script>; Q, l- W! r+ t' D; A2 L8 B
  70. </body>) o) f: [; S# h6 ^/ D2 j
  71. </html>
    ! K( d+ W8 \" T. j( C
  72. ! t& t! _3 O" d5 ?: b0 w
复制代码
客户端:
. a" E( z  ^) n" p. B/ L: k
  1. <html>
    * J4 \% Z  j" o; h) ^
  2. <head>
    0 X2 d0 L. K9 e- f  X' V
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">% t' v( A( d$ W8 |7 F) p
  4. <title>客户端直播页面</title>( w$ A, d* d- j
  5. </head>
    " A! r5 y( b8 E" S+ b
  6. <body># h3 E: K( \, k. d, \$ ]- D
  7. <img id="receiver" style="width:720px;height:480px">9 \" z' S' J6 V" e* O

  8. 4 t4 u3 q2 J" ~) R! b) Q0 R
  9. <script type="text/javascript" charset="utf-8">
    4 q+ m0 U) u0 b( ~! C( C
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
    5 j: t8 r" p+ w) i) ?9 Z4 w
  11. var image = document.getElementById('receiver');
    8 J% T# |  Q/ v* J/ T
  12. receiver_socket.onmessage = function(data) {; g8 v3 m. h# l! _
  13.         console.log(data.data);4 C1 s0 ]+ r2 [9 t) l  D$ ?
  14.         image.src = data.data;
    # J+ h  U7 k8 ]. E* I: l; j
  15. }
    3 y4 v3 V  F5 L9 Z$ Y
  16. </script>
    ! _7 |" ~. S5 Z6 e0 F6 ]1 L3 n
  17. </body>: @( G7 j- r1 ?
  18. </html>
    . o: {: p. d! O; D2 p: X5 h
  19. : E0 D; V) Z; ]' s& M4 S) E
复制代码

. s' Z# u$ C0 o: J
# s# _. F' |) J
/ q7 T. v5 m4 y+ p9 S1 X
) x- T, A. \' x9 s& L$ j( c4 E' u7 f# {/ Q3 R

1 @& x/ I/ R! K# [7 F1 v
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-1-30 14:47 , Processed in 0.059039 second(s), 20 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!