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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-29 18:53:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
服务器代码
7 k) R+ K# w5 X1 O. O! W
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);
    $ w% T7 n# M" U& p4 h
  2. $client=array();
    % L# k7 g  x8 D; W6 w/ C
  3. $serv->on("open",function($serv,$req)use($client){
    9 V4 D0 z. G) ^- A
  4.         //echo 'connect'.$req->fd;
    9 y' b" A: K* g  {5 A& ]& @
  5.         $client[]=$req;8 n- B  |. P+ l8 d1 A# E* ]
  6.         //var_dump($client);3 G6 x5 @+ G( R+ O* ]+ Z& [5 Y5 X) t
  7.         $serv->push($req->fd,'aa');" c! F6 w5 e# G, F/ W! R* U, Z4 R
  8. });
    ) P: K. p5 U2 \8 X+ O
  9. 8 Q% g5 W8 X; g" F" r
  10. $serv->on("message",function($serv,$frame)use ($client){1 d  S' I- ?9 e( U7 Z; G
  11.         /*var_dump($frame->data);
    1 X  Z* ]5 v6 @3 H! l( E2 c
  12.         foreach($client as $key =>$val){* \) [6 g) G7 s
  13.                 $serv->push($val->fd,'aa');
      U, n% v5 c# v+ L$ ^( k
  14.         }*/" u9 Y$ T0 A3 Q; i. |- [
  15.         $client=$serv->connection_list();
    " P+ c: |" B5 s0 C5 v4 W$ E% g
  16.         var_dump($client);
      y  \  _+ r2 x0 ~) ~& H
  17.         foreach($client as $key =>$val){7 f3 E+ Z. n. o: K4 e
  18.                 if($val!=$frame->fd){
    2 O, h+ P& {; e: `6 ~
  19.                         $serv->push($val,$frame->data);
    $ q3 J7 L2 z4 T4 [7 _* R" c
  20.                 }4 c! p- U/ g0 e# a
  21.         }
    2 K1 {4 t+ ~8 e  ^
  22.         
    2 p8 ^3 P) ~9 j" f9 g! y  ^2 H
  23. });; K/ a  v7 B  L# T" G- ]& p7 {/ N4 j

  24. ! O$ N4 {- n# K+ }7 p4 W
  25. $serv->on("close",function($serv,$fd){+ m: H$ e1 i" s
  26.         echo 'close';2 M5 k  E) ~' E+ p) |& j
  27. });
    4 c7 ~5 w; q. F* L) k. W

  28. ! j! p5 ~6 @( h5 p
  29. $serv->start();' B8 O4 }# |# f

  30. - `2 `+ [( ]" w5 Q0 `, |
复制代码
主播客户端
0 y/ S& \. A0 ?9 ?3 O" t
  1. <!doctype html>. Y3 N: b4 q( x% |" m8 u1 y8 k0 \
  2. <html>
    # @' B) }! t+ _( d; W2 N) n
  3. <head>
    2 M# m5 S! U! {  M/ e( w" C
  4. <meta charset="utf-8">9 G, m* s: D# \; l
  5. 0 o4 u3 u3 `7 C, p
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    ' c4 |; G/ ~3 B6 E7 f2 b- s) ~
  7. <title>404</title>; i5 y$ R' y: ~9 k8 ]0 G: M* K
  8. <style>
    % o3 m" w1 i" ?1 x2 `* {0 m
  9.         body{  R# P! o) p* r
  10.                 background-color:#444;
    ; D8 b/ `. t3 r% M1 U2 S/ `; y
  11.                 font-size:14px;/ B8 Q2 C4 E2 t. J  l  F9 G5 B
  12.         }4 d& D3 O- t: {2 c
  13.         h3{
    5 B$ L8 m6 a0 M' a
  14.                 font-size:60px;7 {$ Q& D  u4 ~
  15.                 color:#eee;' _' k2 P$ @/ S+ D
  16.                 text-align:center;
    4 ]4 K* }: y- |- |
  17.                 padding-top:30px;
    $ r9 y. L) L! j$ @$ q* p
  18.                 font-weight:normal;
    - K  X! z7 }& u, p% ~7 Q
  19.         }  [: x" ~" v, }, _
  20. </style>: j1 {" b7 C' W: h9 C' z
  21. </head>
    3 x5 v0 c4 ]) \! O

  22. 5 t9 D; @) }  I% q, b2 D' b
  23. <body>( ~' ^" x3 A; y& A5 H/ _
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>0 n6 ?; y! j/ P3 a0 Y
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>
    # g$ }9 _* j3 S' _% C; m( E4 U* `
  26. <canvas width="400" id="canvas2" height="400" ></canvas>
    $ m/ d+ O  \, ~3 l8 m
  27. <script>
    2 V$ w, M& d0 \# [9 s' x  U" @
  28. var video=document.getElementById('video');
    4 Q  w4 Y/ N" r& O
  29. var canvas=document.getElementById('canvas');5 e$ R4 T. D7 V1 s: ?% R$ Y( d
  30. var canvas2=document.getElementById('canvas2');
    # O; p( P( P, y+ l4 ?' f4 f
  31. var context=canvas.getContext('2d');3 f# G6 N! C6 F# B% s- W( f$ C  q
  32. var context2=canvas2.getContext('2d');
    * t! e5 p$ S# n7 s$ v0 d
  33. function draw(){
    ! o4 |$ U3 o& Y  ~
  34.         context.drawImage(video,0,0,400,400);
    , ?0 Q0 D* B; t8 w2 I5 K
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    ' l* y; k& J8 k! x6 |
  36.         setTimeout(draw,800);
    & ^- S: y2 l6 d4 i
  37. }
    ; X3 z* `" @1 t

  38. - t$ ~0 B2 v7 g. e. j
  39. //客户端跟服务端通讯
    7 C& D7 d% s! n- U" S) L& S
  40. if (window.MozWebSocket)
    - k6 i3 `( o3 \: h$ O9 @! f
  41. {" E( j) Q8 u( ^0 m
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    ) H: G: S6 V, S# N2 d5 B
  43. } else
    ! x) S; j2 x5 y
  44. {
    - W/ N4 c) s0 A# a
  45.         ws = new WebSocket("ws://182.61.42.187:9501");. a) y/ e8 f4 @
  46. }5 Z/ f5 O: Q- d5 Y# e# N& I1 m/ ]

  47. 8 l' v/ {# }, l6 I
  48. ws.onopen=function(event){) o9 N& l+ Y3 L+ U6 |1 V
  49.         alert('连接成功');
    & y8 z) E3 m( g& @% ?
  50.         ws.binaryType = 'arraybuffer';# l/ K& I* b# g
  51.         draw();
    7 B' F. J1 ]; n' p7 ^$ ]* \
  52. }
    9 F3 \* A4 {9 ?; E0 w
  53. ws.onmessage=function(event){
    6 E5 G9 ]" H$ k2 Y- M
  54.         //alert(event.data);) q9 G" p7 x0 P# w8 O/ g3 p
  55.         //ws.send(event.data+"client");
    ) C3 s# z) K2 A9 e# }: d" S) j
  56.         qrCodeImg = new Image();
    4 r3 \: y1 i8 c. m* x" @, x/ w
  57.         qrCodeImg.src = event.data;" u) e/ L" `1 k$ \5 ^6 C
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);
    * ~- T3 o0 e/ ~8 h$ U' p4 ^# o4 e
  59.         
    ( x3 ~, G7 i- ~' T
  60. }. _# @- `1 ]0 I% k8 M& ^
  61. ws.onclose=function(event){5 B- l% [4 }* y7 |& ^
  62.         alert('close');; Y+ L( F! T6 g& D
  63. }
    ; H0 C* h( D, s. K
  64. ws.onerror=function(event){- f/ s' ~1 X2 y
  65.         alert('error');
    1 m8 c+ Q* Z6 J4 F& r8 d
  66. }1 [9 t) |0 h1 [0 t% E5 u
  67. //video,标签模拟视频2 j: ]; L% }4 M& @& V% ]' ?
  68. * v' D8 }7 c8 d, `
  69. </script>6 J: A3 A7 y* V# d$ S- c5 g/ [
  70. </body>
    ( j4 ?3 `* _* s5 K
  71. </html>' u& b! |+ q2 s4 @) A

  72. # x' y8 U4 E' a" y3 z9 o( o4 C
复制代码
客户端:; L, P, d, \! W4 l8 c9 X
  1. <html>
    2 P* Z- [. y) K: c2 V, H1 R
  2. <head>* n; |6 ]2 d' F, u/ f! r
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
    # p/ S# v' z4 |. U0 T- g
  4. <title>客户端直播页面</title>- W1 X/ Q: R/ k
  5. </head>
    * e- U( e' z) {3 |- b( G; y; Y' ?
  6. <body>
    ) |8 {; z3 e7 O: P/ o, \
  7. <img id="receiver" style="width:720px;height:480px">4 V# i9 q) P8 w% M

  8. - N, G2 t8 |7 v
  9. <script type="text/javascript" charset="utf-8">
    & g7 i/ [) P8 R" n' }
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");% u! V& Y- R3 q7 `( b9 Q' k/ I
  11. var image = document.getElementById('receiver');' ?1 g- Y% F$ x* T/ Z+ Z
  12. receiver_socket.onmessage = function(data) {8 a: j2 t% U1 W8 J; J
  13.         console.log(data.data);
    - U6 X) L7 K0 y2 m" n3 Y
  14.         image.src = data.data;/ ^3 N9 `/ }3 r: b1 f: e- @; l2 V
  15. }
    ( y0 S  k+ U, j9 h
  16. </script>$ [, V& _. [2 s/ H
  17. </body>0 V+ P# j/ Y5 a4 t* C! ]
  18. </html>4 z1 L: A7 h6 ^& ^% Z
  19. & b" `6 t3 j3 I5 g! i
复制代码

8 M* t/ r( ~7 T% e$ w
7 p" I/ v: K- A( q" Z  Q# p0 X+ J, [' B7 L$ u
% a% r4 w4 i& ~6 P! @5 {( Z/ Z' |9 Y5 u
/ |* R" U& t5 [8 Q5 D' ]8 C& d4 `

: p# |' C9 u2 R
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 16:47 , Processed in 0.054747 second(s), 20 queries .

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