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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-29 18:53:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
服务器代码
5 y$ e" M1 N3 O
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);% S) E( x6 e$ Y9 R7 |* ~' p, I" W
  2. $client=array();$ z5 g$ d: n! M1 d/ m2 f
  3. $serv->on("open",function($serv,$req)use($client){- E% v- h4 M6 |% T
  4.         //echo 'connect'.$req->fd;$ L- P; O; F" T
  5.         $client[]=$req;1 l/ Q; |8 ^0 D5 y8 q" ]& a
  6.         //var_dump($client);; l* n) f& l% _9 j9 I( @  a
  7.         $serv->push($req->fd,'aa');
    ) f. m" ]- k* [) F1 @* B
  8. });2 k! ^& |) \0 N, u0 l6 D
  9. ! x' M) Q+ S# ~5 k, J
  10. $serv->on("message",function($serv,$frame)use ($client){
    ! o# G9 L3 [9 v6 \& b# J
  11.         /*var_dump($frame->data);1 K% A$ }. t1 o! M" n
  12.         foreach($client as $key =>$val){
    9 y$ h1 y2 n( ?* f( l
  13.                 $serv->push($val->fd,'aa');0 ]  [. t3 A' l9 A4 [7 E# I
  14.         }*/% o) `- Q) _+ H2 ^" _
  15.         $client=$serv->connection_list();5 D+ b! g1 ]3 o1 G8 Y
  16.         var_dump($client);
    . {1 V/ f6 R# F, W+ u, E
  17.         foreach($client as $key =>$val){
    . V+ q; z- t; P3 n
  18.                 if($val!=$frame->fd){0 T3 h, b- t: D
  19.                         $serv->push($val,$frame->data);$ P$ M# t9 q6 y( F
  20.                 }
      R2 B3 e0 \7 x; j4 g! H
  21.         }
    4 z  `7 `# X( z- H; G7 j
  22.         0 a+ O$ Y. w. C/ e
  23. });
    8 y2 U4 N" w% Q" K9 T) W  A& x8 |

  24. * [; M1 a& c* s& L9 e
  25. $serv->on("close",function($serv,$fd){  Q7 H( i, ^3 j
  26.         echo 'close';; h4 K7 y- e2 p- x1 p3 z/ O0 a
  27. });* e; d9 f$ D$ y) R6 _) b. q

  28. # K! F; ^! E( i( ~  y' `7 J/ W
  29. $serv->start();1 ?/ l2 {. h& b* \- q

  30. , e0 ?: x% |1 O" H2 g6 `
复制代码
主播客户端9 N3 ]6 c! Y: g. }' H9 \: b, S
  1. <!doctype html>9 f, l) \1 `5 B% b
  2. <html>
    , _! D* E8 x$ o7 J+ _
  3. <head>: D$ \' e( H9 f" m9 z
  4. <meta charset="utf-8">; [; f8 n, ?. `. \5 ^

  5. # M- q+ f! e& q7 l
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    3 }1 W+ J. k, F0 e" ~. `; S/ H% v
  7. <title>404</title>
    ' ]" {' Y0 }; N, x8 y) N  Y
  8. <style>' Y1 N, p" v6 A! y/ r7 t
  9.         body{2 B. O* M; \% }; {
  10.                 background-color:#444;! R0 U2 N3 Z) Z% C' }% B: @
  11.                 font-size:14px;" z( ^, S" R$ Q! U! n
  12.         }
    ! n( e- B! n: g2 W- R! W
  13.         h3{7 ^  {! a. b  E# |! E& W' k9 ?
  14.                 font-size:60px;* l6 \7 `3 M" e6 |5 d- [
  15.                 color:#eee;5 B4 n- P: E$ R& v: u0 W
  16.                 text-align:center;% l- s& g. @6 R( k# _# a
  17.                 padding-top:30px;) M; g/ k3 _; f+ m  [
  18.                 font-weight:normal;( M4 M; r* x) ]; |* |4 a
  19.         }
    9 P" k+ i* e- O7 g% p
  20. </style>
    ) Y1 \+ p) }' H
  21. </head>  n5 s( C! p7 q; j5 r! E; I

  22. 5 i4 t: n9 N; x) A0 q) j5 q0 `
  23. <body>. H4 A( w: r+ _" |& q( V. Y
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>7 Y6 D, f4 c" _* K" I" x# e8 m5 d+ e
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>5 s& ?; ?- b/ y" P: I2 m5 C
  26. <canvas width="400" id="canvas2" height="400" ></canvas>9 g9 [% ?& v/ y" D- e& i
  27. <script>
    ! l9 \  u' U) h, F; Z% x
  28. var video=document.getElementById('video');+ w' C" z& g1 F% k" \% D  O+ H
  29. var canvas=document.getElementById('canvas');
    ; J) p/ G; o  \) G' w8 K: t) ~" m
  30. var canvas2=document.getElementById('canvas2');
    * L! @/ _: M9 g! o
  31. var context=canvas.getContext('2d');+ h: V1 [$ P4 {" b
  32. var context2=canvas2.getContext('2d');! h, C: l5 z$ M6 f/ n
  33. function draw(){* |+ T& a) d2 {1 V) m& m/ f2 U0 g
  34.         context.drawImage(video,0,0,400,400);
    * ^( O! M0 o+ @  v! o: C9 I- B
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));6 A9 E9 v) i1 ?
  36.         setTimeout(draw,800);8 g& S4 b  \  I- J& ?) V, [; U
  37. }
    5 q# K% O& F; Q- g7 }" n  ]
  38. ) M; u: l5 v' X
  39. //客户端跟服务端通讯
    1 s! w5 q3 X0 \: f5 o& E- V: t9 Q+ y
  40. if (window.MozWebSocket)
    . z% u: k1 M! l- m
  41. {
    % a+ i/ |. Y1 M1 F) X" }: [/ [& S/ F
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");' {! y5 P  y$ F& h+ p
  43. } else
    . p0 J/ |) t. v: U  {- u2 T0 k8 @5 k( S. N
  44. {
    - H6 ^$ H0 a) G* z( ?- E" o' P
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    $ X, e, |, B" ]& W  n
  46. }' z) d2 f; y  C- o/ x! {+ {
  47. 5 r) T. t3 z7 ]2 a& Q
  48. ws.onopen=function(event){+ j* v$ y  M, f9 P
  49.         alert('连接成功');
    + w6 \3 o, ?! T* Z- f' g
  50.         ws.binaryType = 'arraybuffer';$ a2 u9 c) D1 W  L9 n
  51.         draw();- G& n9 e3 {4 \
  52. }
    0 a  _& E  _; ~! H# r# K* y
  53. ws.onmessage=function(event){& U/ p/ [) z% M1 k
  54.         //alert(event.data);8 R. a) s" e" }, P8 O
  55.         //ws.send(event.data+"client");; t5 A* R6 A+ s
  56.         qrCodeImg = new Image();
    0 ~4 o1 V4 G4 v! |! I! x6 P
  57.         qrCodeImg.src = event.data;
    $ r+ i% K$ s: F3 p+ B
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);* A$ y4 U- O9 g, f7 @4 O7 z
  59.         ) I% ^; q' g& Y2 r/ i) _" \7 i
  60. }
    0 Y$ g! @+ r4 r% |7 C: p
  61. ws.onclose=function(event){' j- K+ u" W( S# e) M* k! C/ Z
  62.         alert('close');
    4 W- d; m  F* i2 a. g
  63. }
    + b5 u0 n+ j5 x" O5 Z6 X1 w
  64. ws.onerror=function(event){
    3 d0 e& y/ A2 b+ E; [0 K
  65.         alert('error');  {! K  \5 x7 q8 Q3 Q4 p
  66. }2 K& U5 L6 Z$ t4 h* \
  67. //video,标签模拟视频/ [; n3 g6 Z5 T5 U: r  e, a/ T
  68. " r, d" u- Q0 m9 H6 p8 s8 b& v
  69. </script>
    - o. d3 h9 R& s& v/ P: c" H
  70. </body>. D* |" c8 V* ]* }1 t. ?1 j
  71. </html>
    ! z' s1 [8 O# S1 I6 ^" D
  72. ' \" t- h$ i; J9 q% h- q
复制代码
客户端:
9 ?* ?* d) b; F9 a7 i1 `7 @" t
  1. <html>" p5 r. ?1 |0 \# m
  2. <head>8 W: }, b0 C9 o' r8 G' t- r
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">* p) v5 \- {2 ?9 t6 w
  4. <title>客户端直播页面</title>- _& E) d$ f" n8 G" @& {
  5. </head>$ l! {5 O& f* [5 n5 z. b: v
  6. <body>5 l$ \0 j) N) K  x+ M* M
  7. <img id="receiver" style="width:720px;height:480px">/ j9 ~/ @: Z& D+ ^8 O' W6 G

  8. ( Q/ Q/ ?/ B) ~. b
  9. <script type="text/javascript" charset="utf-8">8 r! v1 _, n3 D6 Y; n3 s
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
    * g( X5 M2 ?: S. A
  11. var image = document.getElementById('receiver');
    6 l2 V# b* S% n
  12. receiver_socket.onmessage = function(data) {
    0 ]% c: t) D7 N4 H
  13.         console.log(data.data);: L# ]! Z1 D, T+ J4 D- L
  14.         image.src = data.data;; \) C( m1 K1 b7 c' C" y( X
  15. }7 _2 K. ]  N6 e% S# B# w% z- t
  16. </script>
      R; ~# j; S7 z( [2 e" c
  17. </body>0 V( U0 C6 Y- j  ]
  18. </html>
    1 |! v; k' b9 A' g' O

  19. . [$ @% o) `% L3 o. j
复制代码

& x8 f7 U, w+ P
0 c# V, S: ~6 ~1 W
; }/ E- y5 N2 E: c' h$ m
& w$ {% f  r0 G" E2 W) _- g" Z' b
# D& Y5 R% Z6 _8 g' ^5 }  o+ [6 @
) W3 ~7 H; o8 ]' s# h; X1 t6 R- E8 _
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 17:21 , Processed in 0.055400 second(s), 19 queries .

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