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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-29 18:53:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
服务器代码
: N/ \* I; A8 f
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);2 T! V- O, k: W0 |
  2. $client=array();1 I1 M7 d& l& A; E
  3. $serv->on("open",function($serv,$req)use($client){" j3 Y" h2 t. V1 M3 Y3 C  H- r
  4.         //echo 'connect'.$req->fd;9 t/ b( V9 ]" c  Y( e
  5.         $client[]=$req;
    ' V+ H/ l7 J2 s! U- S8 r
  6.         //var_dump($client);5 U5 e3 J6 x* W4 K
  7.         $serv->push($req->fd,'aa');, H5 h2 ~: I5 w8 E9 n6 p% h* u
  8. });
    + z: V7 ?$ Y* u& t
  9. , l- h& Z. `2 f9 ^+ H
  10. $serv->on("message",function($serv,$frame)use ($client){
    4 R3 s9 I. [: q- ]
  11.         /*var_dump($frame->data);
    % H" A6 O, l" x% H" m1 d, C
  12.         foreach($client as $key =>$val){' H& [8 s/ S+ `* R
  13.                 $serv->push($val->fd,'aa');
    6 @* C; h! A, E$ ]8 ?. `
  14.         }*/( Q6 V" V0 h4 k6 G  J' o7 }! {
  15.         $client=$serv->connection_list();. q4 ], V9 _  E
  16.         var_dump($client);' \1 e4 O( B  n5 J; A" b
  17.         foreach($client as $key =>$val){  ~9 Z2 j6 r3 b! K
  18.                 if($val!=$frame->fd){% c) V; Z8 \$ ^0 H9 x6 E
  19.                         $serv->push($val,$frame->data);- n  J( t& w5 F: A7 L  I
  20.                 }
    , E8 u8 H1 z. `* t% ?0 ]- ?
  21.         }
    9 B% n9 [/ ~8 e! s5 i; i6 c+ u2 N  r
  22.         
    ' X4 q6 q5 ]. R! c
  23. });  i( |( E: }+ w

  24. 6 {9 v! y) q7 A
  25. $serv->on("close",function($serv,$fd){
    + T, ?0 ]7 v- e- ^0 x3 v9 S% @0 k! D/ f3 s
  26.         echo 'close';
    % X9 d- f7 M: j# S" z6 q' W
  27. });, Z5 W  W' M+ E- f
  28. ' }5 ~$ m3 w& O$ G. F: B: o
  29. $serv->start();
    / g: \$ t) Y5 i8 D
  30. 4 X- b1 V' a7 J: F( m
复制代码
主播客户端
3 T( [: p1 _9 D% B
  1. <!doctype html>
    $ W$ ^, n( J4 g0 c' q* }- `0 r
  2. <html>3 A* h4 z" D/ \! L7 u
  3. <head>7 }1 X7 T% e: |5 d
  4. <meta charset="utf-8">
    ' H% E! m/ m7 r. y% ~' P
  5. + b" F" j: P) J' q4 z' A
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">3 T: ~* o6 b* @- j0 U
  7. <title>404</title>6 `2 R0 n" _' c# v7 Z! O0 c. c
  8. <style>  Q. e, T1 V+ A% B$ k
  9.         body{3 W$ }/ E* C' U" p( o! ~# [
  10.                 background-color:#444;
    3 e8 O' d7 C7 {8 p! N$ }8 t2 ?* y
  11.                 font-size:14px;* p+ f* P5 }3 E& e8 @- o
  12.         }
    * {2 N5 O0 L% Q% t9 F8 v4 l0 j
  13.         h3{$ D1 }" ?: `" E" c2 R+ b8 `
  14.                 font-size:60px;
      o. G" H* E- ?( s
  15.                 color:#eee;
    & ?3 V: e  _- ~' A$ Q- a3 F7 l
  16.                 text-align:center;
    4 p: W' H" ?, U7 j/ B- ?* w
  17.                 padding-top:30px;* R5 a3 p, x& K& _
  18.                 font-weight:normal;
    ; Q4 V' i4 @, J6 B
  19.         }
    + U4 k8 M* J9 Y+ ?
  20. </style>
    - a# j+ ]+ L7 w. |
  21. </head>+ }1 C0 s- K+ j% w2 ]- O' H8 n/ q# V1 M
  22. ( s6 E2 n3 ^  H2 {! `
  23. <body>  _, Y, X5 a! O' Z5 D7 \1 B0 n! ]
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
    " D% E# D+ [3 K  w, L+ a
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>
    & x: f  y/ m; r0 N; C  O9 x. e  q
  26. <canvas width="400" id="canvas2" height="400" ></canvas>
    " P$ i) f. }& Z2 D
  27. <script>
    5 J  f6 K2 ?; @* i! [
  28. var video=document.getElementById('video');! S# q. J# g, ^% \6 d/ ^
  29. var canvas=document.getElementById('canvas');
    ; j' |; c& W- D
  30. var canvas2=document.getElementById('canvas2');) C& g1 F: M8 K; ~, q5 y
  31. var context=canvas.getContext('2d');. n/ G% j- t- ], D. N3 k$ S6 k
  32. var context2=canvas2.getContext('2d');
    9 g5 v! @* H; y! \3 {+ A
  33. function draw(){4 v* p5 \! V6 ^) T- ~
  34.         context.drawImage(video,0,0,400,400);
    5 z8 `! D9 ]/ y* W( R; {5 D2 H
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    * A1 O9 J" J9 L) L( K' B
  36.         setTimeout(draw,800);% x, H# \+ N6 ]# ^2 I, j
  37. }$ W" b1 k# r/ ^, C, r2 v8 g

  38. 7 f* j% O0 d: ?8 _7 j1 D
  39. //客户端跟服务端通讯  X3 A8 |/ V$ k5 l
  40. if (window.MozWebSocket)
      ?" Q) W) C( [3 X, g
  41. {
    ) ?7 `5 {' i4 o: b' J
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");- I4 B: \# b6 i8 a  I5 P5 C1 d- [
  43. } else) A& O0 _! l4 Y  ]% @
  44. {
    3 M  A8 o' k+ R
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    $ `* [6 M; j, N8 m
  46. }9 a6 B6 g, P0 W# T/ }: ~

  47. ' E5 W/ S( B$ E% p
  48. ws.onopen=function(event){
      a3 ~1 F6 D7 |* D
  49.         alert('连接成功');. d8 i- X. `4 v7 E/ B6 O- @
  50.         ws.binaryType = 'arraybuffer';
      N9 Q6 @" L) \$ B( C
  51.         draw();
    0 N& Q( L7 s$ ?. B; q; V
  52. }
    & w2 f. H# t* r$ E6 M
  53. ws.onmessage=function(event){
    1 T$ W' U1 R9 Y
  54.         //alert(event.data);
    + i* e% v! _# W1 X
  55.         //ws.send(event.data+"client");
    2 A8 D5 R7 X: Z4 H% X8 b- Z
  56.         qrCodeImg = new Image();& K* R& p' }; J; [+ u0 }; U
  57.         qrCodeImg.src = event.data;
    4 n: L! H, x0 `
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);
    2 a" B4 I2 y4 K
  59.         % b5 r& D# B9 f( K9 C/ ?
  60. }6 J+ W4 i# i* Q5 x6 b/ S
  61. ws.onclose=function(event){( b0 m+ Y, w) M+ y0 j4 v5 m
  62.         alert('close');
    * E8 h; `5 p6 H/ {# K; P
  63. }# S  H1 G/ t+ k( k- s+ ], N9 y
  64. ws.onerror=function(event){8 q0 u5 `4 x0 a: j6 e) d
  65.         alert('error');
    , |) c1 @% A- c3 D5 f
  66. }
    3 ]0 N  T1 H* O0 |9 D% z" h: |" d
  67. //video,标签模拟视频
    + V  c0 }2 ^! C2 ?
  68. , J5 t" r1 ?' F
  69. </script>
    / V% s: U/ Q9 r3 X, \
  70. </body>. O) u' o) R# b1 [" S/ D! e$ K- ]5 S
  71. </html>
    8 N6 G; M% _) g( J8 ^6 b; B' h2 I
  72. 7 v6 j9 {" q$ n; D9 n$ `
复制代码
客户端:
; n# ]1 k4 m. M4 A9 f: J( o
  1. <html>
    2 C$ ^: @. ?7 @
  2. <head>
    - [) P! P6 o8 }: P  D
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
    # v. {4 \" L# L- q" r2 e( Y
  4. <title>客户端直播页面</title>5 Y5 q2 _& V! p. n/ k) y
  5. </head>, a" q- E7 B& H: V0 I
  6. <body>
    # N0 |& v+ o; C* Z- @" [, [' N
  7. <img id="receiver" style="width:720px;height:480px">
    0 Q: X* A8 v7 V9 i( w
  8. / S4 m; k9 v8 }# }' C% |5 I& t: S
  9. <script type="text/javascript" charset="utf-8">
    * E& Q  a# O. d9 z
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
    9 P9 Q: `* i- ?( f2 s
  11. var image = document.getElementById('receiver');
    # B2 r! e9 J: j7 W0 I3 B+ ?+ t8 V
  12. receiver_socket.onmessage = function(data) {
    , S  ~' E8 Z! I1 B) c
  13.         console.log(data.data);$ m6 R0 K5 D. g) i
  14.         image.src = data.data;! B' T4 d3 ^: P
  15. }7 m0 e9 R9 c+ w, a
  16. </script>
    6 P9 G0 d6 ~  D6 l- T  F$ e. X
  17. </body>$ r3 x. l7 U5 G, |& b
  18. </html>
    $ m3 w1 `- P6 J% R

  19. & j$ i1 ^6 E# G4 ~
复制代码
% M! Z+ D! d* G+ d. _8 W6 j& h" Q

. S7 a( m: M6 [0 h9 d) A$ v6 I  V
7 S, ~9 |9 S0 k5 N: j2 ]5 z8 T( _) Z! z

. H" d# d' b$ `5 q
: l4 @+ B# P6 Z! F! s; [
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-19 21:11 , Processed in 0.061566 second(s), 20 queries .

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