cncml手绘网

标题: swoole视频直播（记录用 未测试） [打印本页]
作者: admin    时间: 2020-3-29 18:53
标题: swoole视频直播（记录用 未测试）
服务器代码
1 [4 }# i8 _' [/ H$ f' i& f
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);+ Y( `: j0 _& k; X1 g; p
  2. $client=array();, |) a, w# ?; l+ w; Y3 r7 f- O- S: p
  3. $serv->on("open",function($serv,$req)use($client){
    & g/ a+ M- X2 g& w$ C
  4.         //echo 'connect'.$req->fd;  X3 C) \3 a& L, A& c
  5.         $client[]=$req;5 Y7 S/ g5 m# H' g  _% q+ {# d
  6.         //var_dump($client);
    . X* h* u# h) y& _& q" B
  7.         $serv->push($req->fd,'aa');3 ?0 L) _+ m* l8 U7 _1 n
  8. });2 C8 m3 c# G7 Q2 |* F4 r8 p( N" m

  9.   h" O+ M6 _6 ]6 Z8 |
  10. $serv->on("message",function($serv,$frame)use ($client){
    ) r% A! u, s" X8 P" c1 o1 A: J
  11.         /*var_dump($frame->data);/ M7 J3 q3 u* Q: W! {2 _; Y& H8 j, q
  12.         foreach($client as $key =>$val){- {# E, H7 }: p4 X8 g* R# Q+ n
  13.                 $serv->push($val->fd,'aa');  v' O+ a- Q+ Y. k
  14.         }*/
    " D6 _4 |1 g' A2 G: l
  15.         $client=$serv->connection_list();
    ! i) ^* M0 B1 l- v/ s
  16.         var_dump($client);
    / V2 U) G/ t: a: l" h
  17.         foreach($client as $key =>$val){
    % o* L9 u# V9 F7 {% q
  18.                 if($val!=$frame->fd){( L4 P' }, u/ E& x; C" N
  19.                         $serv->push($val,$frame->data);
    ) h0 |4 _% ?+ v7 @8 f
  20.                 }
    , D& O& P( k  e" O7 R# B
  21.         }
    . j) Z2 A( \. h! W
  22.         
    $ h  @2 k% k: m6 d
  23. });5 t) t; q* t0 P, @1 G  ]* N
  24. 7 e& Y& y; }/ p0 b+ I$ H
  25. $serv->on("close",function($serv,$fd){
    4 R& M- D# b9 ~% W4 k0 u
  26.         echo 'close';% j$ P6 B/ k6 r' {$ p. p, a
  27. });
    4 L( c& Q0 N7 S; c' q8 ?
  28. 1 e5 s) i. V: Q6 U" D) h$ ?: H
  29. $serv->start();5 p6 r# c5 _! z' ]

  30. , C6 v/ K0 |- A; B1 }1 h* I
复制代码
主播客户端( A9 M( r* L! \: g5 C. G
  1. <!doctype html>: {6 x: n: j5 ?  O) B4 _0 f% {
  2. <html>
    % e/ e3 H3 A) o0 V+ A' q
  3. <head>
    . Y, h7 t, W( @7 y% h2 e
  4. <meta charset="utf-8">
    ) q; a% q; E- H+ ~1 \

  5. ) I0 S9 w! H3 a
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">. D8 l9 `* W8 R; ?' ]1 ^6 R
  7. <title>404</title>) f9 U* m, C  P6 \: j* C
  8. <style>8 J$ B! w% C6 O4 j# ~/ Z
  9.         body{9 z4 K. ]1 ~6 q$ ^1 b% S( y
  10.                 background-color:#444;
    9 l8 t4 E. F7 i9 o
  11.                 font-size:14px;1 G! B5 z3 E& X  P1 Q: y' r) F  \" b
  12.         }' s6 }2 Y* j2 X4 Z, O. ~
  13.         h3{
    % F# W$ c4 e1 G9 z# t
  14.                 font-size:60px;
      G; |& ~+ U) Z! z; [: p
  15.                 color:#eee;" d" w; k" J% N/ q  l0 a5 {
  16.                 text-align:center;
    " s' |5 d- H/ _7 z, s& H2 I: F7 X
  17.                 padding-top:30px;8 Y7 ]3 Q1 a' w1 T
  18.                 font-weight:normal;. f/ r3 q) c7 L. V9 D  i8 I
  19.         }
    2 x* }' N) q  z1 w
  20. </style>/ k" v4 A6 u7 s  A, ]
  21. </head>
    : P( G# S8 E1 G6 C4 Q

  22. & ~, ^& n% e( a( \* ]1 I) y
  23. <body>
    * L: N2 `$ w5 [- ~& w
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>$ Z2 W7 b( V) U
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>9 Y$ p8 B3 Q8 ?, c" {/ l
  26. <canvas width="400" id="canvas2" height="400" ></canvas>& }/ I4 F; e# P, h1 w
  27. <script>
      Y. D7 h9 B, f; C$ ]
  28. var video=document.getElementById('video');
      j# P, d3 h# ~; }
  29. var canvas=document.getElementById('canvas');, |3 H% h' W8 E3 _6 u" l
  30. var canvas2=document.getElementById('canvas2');& F& A4 t9 Y% x4 o0 u$ r4 H
  31. var context=canvas.getContext('2d');
    & d; T; T( l6 `& g2 Y/ k' C0 s
  32. var context2=canvas2.getContext('2d');
    3 y: H* A) V9 U3 x/ A: |
  33. function draw(){0 ?* }2 i$ \; n; v& i
  34.         context.drawImage(video,0,0,400,400);
    : W" k6 }" i. C/ `
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    7 [. w& L& N1 h# A, ]# I+ T
  36.         setTimeout(draw,800);
    6 `8 E, [) s1 s) a8 O
  37. }
    . c- f" c  f4 c$ L6 U

  38. ' }' Q+ ]9 Y  D& a9 ~7 @1 J
  39. //客户端跟服务端通讯& y. ^3 }' }7 s9 T2 {; r8 E
  40. if (window.MozWebSocket)  w  C" ^: x: L
  41. {
    & \9 G- Y% T" [8 y! n5 h
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");" T7 X# S8 D  B" h( M9 S/ c+ Q: d
  43. } else
    . s7 _8 H1 ]1 V' r9 E. _; _
  44. {
    2 o& B. K. K1 K0 G1 I% W
  45.         ws = new WebSocket("ws://182.61.42.187:9501");+ o  S2 B* w1 |4 ?2 b4 B) D! M& |
  46. }+ c6 Q9 U9 B; N; X% D
  47. 2 t' {+ l1 U5 z$ X: Q1 ^$ m" ?3 G
  48. ws.onopen=function(event){
    ) o5 ?- J4 J4 V! C
  49.         alert('连接成功');+ n$ b) C: p! D, Z. w
  50.         ws.binaryType = 'arraybuffer';, J+ C; o0 i/ u8 ~( K6 S
  51.         draw();/ f% r  \7 Y' R2 P
  52. }
    $ Q9 ~/ ?; d+ _! }4 r
  53. ws.onmessage=function(event){
    + O3 P0 Z4 l4 H4 v4 m. g9 h! A
  54.         //alert(event.data);
    : y% X6 M8 Q! e
  55.         //ws.send(event.data+"client");
    & G8 s' V2 c& z5 S1 [9 H
  56.         qrCodeImg = new Image();' E! H1 H: u$ q& ]
  57.         qrCodeImg.src = event.data;
    ) Z  c/ i7 `7 ~
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);
      ^1 Q) b( U: K+ ?' l; D$ ^
  59.         
    % H; ?( p) V9 u) O7 U2 z; `, v* l7 N
  60. }, a! @2 p! N) V& ?
  61. ws.onclose=function(event){8 X" i1 \" Q  s/ b) [. B" S6 G7 T/ A
  62.         alert('close');
    / T' m; e3 c) R) ~, t5 Y6 \
  63. }8 }/ H- T& v2 t3 J# K
  64. ws.onerror=function(event){
    5 ^+ M& u" n' f  H  I
  65.         alert('error');- ^$ m0 Q! F2 |) j" c
  66. }
    6 U. u% B4 s& {) T  l/ m" S8 Y
  67. //video，标签模拟视频/ {8 p, x! B1 d+ v
  68. : t$ E( V; }5 Y: t% B" P
  69. </script>6 |: e: G$ g0 {
  70. </body>$ ?1 A6 N1 K7 Z# T3 i! n
  71. </html>0 D+ I0 Z& M# X& |

  72. 0 p  |+ d' U" I  z% y( M! r7 r
复制代码
客户端：
, `. j, K6 P" a: Q* @
  1. <html>
    * ~: y4 M6 Z7 i. L# b
  2. <head>  F: |! x" x* M
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">1 v+ F: Z8 F2 L9 F5 U3 W
  4. <title>客户端直播页面</title>* j; p( o- h5 _- y+ C1 M
  5. </head>2 K! E5 w; a$ N( R. R2 e
  6. <body>
    ( o6 n1 l& k, c5 X. q, j
  7. <img id="receiver" style="width:720px;height:480px">
    ; e" I5 R+ T) O9 X% A

  8. 7 j( o+ f* m$ @$ i1 m
  9. <script type="text/javascript" charset="utf-8">
    1 l; m5 p6 U" f$ R$ n
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");  y3 S& ]" v2 U9 g' f
  11. var image = document.getElementById('receiver');+ r0 E% \8 ~8 ?
  12. receiver_socket.onmessage = function(data) {
    ' `: }$ U3 w$ B1 }3 o3 L, R% b
  13.         console.log(data.data);
    , A& B: A5 h2 W6 B$ ]+ x
  14.         image.src = data.data;- x1 g& }0 G3 V- g
  15. }
    * p& N" c- |$ U
  16. </script>! K0 I5 s3 ]! e8 T- l( d
  17. </body>7 o) v! q; g3 t% _
  18. </html>; l5 E4 M- b/ y! g* J+ X* B8 R

  19. 3 E! a  h1 C( Y: U5 z% Z' q
复制代码
$ n2 _, N) g5 I: b3 @
" d: j" y) V; t  H0 }% L

( T) x2 a& h; [5 a$ v/ C" Z8 d( h3 E; N1 k- S
' M& [. B2 v1 {7 r( ~" B

: j: n( q1 r, n2 l



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