cncml手绘网

标题: swoole视频直播（记录用 未测试） [打印本页]
作者: admin    时间: 2020-3-29 18:53
标题: swoole视频直播（记录用 未测试）
服务器代码
2 P  j, |2 ]; N) p6 ^
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);* A) V# ~6 o( _; p' {7 x1 k
  2. $client=array();3 }  E# k$ \; R& t
  3. $serv->on("open",function($serv,$req)use($client){
    4 F* ]. K# z5 Y7 a
  4.         //echo 'connect'.$req->fd;
    " w' W, I  a1 J' X( V/ s* y$ n
  5.         $client[]=$req;
    9 f0 ]+ P2 \; J) l& k  m% q2 @
  6.         //var_dump($client);
    + I: _6 f2 X. j. d1 o% e" U
  7.         $serv->push($req->fd,'aa');
    ' m' t5 z% T3 c0 R
  8. });: |" \* `/ _0 k- X" @+ d7 t2 i: G

  9. # T, i7 h2 z) F1 z+ g& p/ [! f
  10. $serv->on("message",function($serv,$frame)use ($client){4 {2 b! H( t. J7 Q7 h5 X
  11.         /*var_dump($frame->data);
    1 [& O* h+ U& k3 z, F# f
  12.         foreach($client as $key =>$val){; d( ]; O# _8 f1 F. [
  13.                 $serv->push($val->fd,'aa');! U+ E& o! u) T/ \3 ~' C
  14.         }*/
    / f1 N- U) y1 z' d! x  [; [* ?/ q& J
  15.         $client=$serv->connection_list();
    5 N3 u# j, y2 h' O
  16.         var_dump($client);
    1 M0 t( F/ f3 L3 E
  17.         foreach($client as $key =>$val){( Y' g, d' S3 ?, }' p) l$ d  H
  18.                 if($val!=$frame->fd){" `3 ^0 y5 L0 L0 S; `" J
  19.                         $serv->push($val,$frame->data);" d0 T( [/ Q+ P9 E
  20.                 }
    9 U! ?/ y% N( e! e  [. ]
  21.         }
    5 F( g2 ?% {& _8 G! W% w
  22.         ; r+ Q4 v# B/ f3 Z* E
  23. });+ s( L& E) a8 p: M5 c

  24. * _$ y, H6 l  {' r
  25. $serv->on("close",function($serv,$fd){  M# }7 L' Q- }# W6 l: r
  26.         echo 'close';
    7 c& J1 j6 E" m$ r
  27. });' j+ C9 O" f, T$ j
  28. ; k, p9 K4 P" T5 B, E( o
  29. $serv->start();
    ! I+ l' Y% |( t# f0 E

  30. ( Q. o4 K9 ]( K- ?) [/ D
复制代码
主播客户端3 G3 D& C* C& O6 _  z  u  G8 [
  1. <!doctype html>) a- c. R( r+ U0 F
  2. <html>+ ~8 `7 O4 I4 ?5 u7 U) S1 @
  3. <head>! X2 ~4 O9 V: C) ~& s: f
  4. <meta charset="utf-8">
    . f+ s2 y3 a4 d  a

  5. % D; y3 a7 R" s( a
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    * P7 [. Z4 C5 |- Y
  7. <title>404</title>
    5 X  y" {( \3 h+ c) T
  8. <style>% q% _/ {( i/ A; D1 S
  9.         body{
    1 w) z0 a, q5 Y5 w, ~$ h7 L3 W
  10.                 background-color:#444;8 L1 d0 C3 n7 |/ I1 E  M4 ]
  11.                 font-size:14px;4 V, w: V# C# `  `8 h; g  t0 V
  12.         }: e+ L" T$ V0 g9 z
  13.         h3{
    ; G0 `2 x+ i7 H+ t. F. d& p& M/ E7 L
  14.                 font-size:60px;
    , u  I$ B+ B) O8 M* N2 y9 c
  15.                 color:#eee;4 l5 m* y* R5 `8 [( L: ]  P1 S
  16.                 text-align:center;& r/ i5 t& m6 ~
  17.                 padding-top:30px;
    $ h( K9 a8 I' W5 v% G' E
  18.                 font-weight:normal;
    1 S, j/ N5 ]2 D: o5 ]
  19.         }
    4 C; T# j1 W: Y" P+ S6 L' J
  20. </style>+ x7 g1 `! H8 E- L; S2 _
  21. </head>' i5 i6 C0 ]* {2 M) r

  22. 1 C4 I  V4 ~5 W. p$ [% M# ?7 p( @$ M
  23. <body>
    4 n5 w5 K. @3 R" Q, u
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>( V8 K, ~$ A3 A2 F
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>4 a6 C0 P/ J6 l% H! E
  26. <canvas width="400" id="canvas2" height="400" ></canvas>
    5 V5 c! o/ @5 Z6 o" Z& f
  27. <script>6 b3 [+ A" k# {# q$ `
  28. var video=document.getElementById('video');6 D8 M& c8 t6 J; |
  29. var canvas=document.getElementById('canvas');: O+ ?4 T4 ?, \8 N' A1 j
  30. var canvas2=document.getElementById('canvas2');- B7 y/ Q9 ?' ~/ z4 y: ^, z
  31. var context=canvas.getContext('2d');
    3 d) g- Z8 H3 i5 u* v! f! N
  32. var context2=canvas2.getContext('2d');* H  w3 C) K  o- G0 B- S- a) J
  33. function draw(){  @2 x" U# U- _( W* J3 N
  34.         context.drawImage(video,0,0,400,400);
    3 H+ V5 k3 T' W  g) \
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    - w  L+ }; H$ v% h. X
  36.         setTimeout(draw,800);+ G" R& M2 o' k# W
  37. }3 L5 t2 J1 X! d
  38. - D3 [6 A  h2 r7 d
  39. //客户端跟服务端通讯) ^: N( s3 @, q5 S9 G4 u
  40. if (window.MozWebSocket)
    ) d- ^! T* W! }
  41. {! z2 H( t2 ~6 q( {" j; U" E" j. j
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");9 e6 R0 @* f) O& e6 c( `
  43. } else/ a' I' `1 W  E& ?5 n( ^
  44. {( o: x" o$ j) f: S
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    . S1 T' X% ^' K2 H7 L
  46. }  O2 \  p7 T1 l* V0 `7 v+ {

  47. % Z" i. G& Z: i. y
  48. ws.onopen=function(event){
    3 m: ?+ P" v4 i6 N
  49.         alert('连接成功');! n; M  G2 y9 V0 T. _; @0 o
  50.         ws.binaryType = 'arraybuffer';) t' L  u# \0 n
  51.         draw();" S) G- ^  X" N  T; \# _1 ~, q
  52. }9 X/ _  ^3 |& q) u6 M
  53. ws.onmessage=function(event){1 w( N$ j8 I9 K3 a) q( N
  54.         //alert(event.data);! n- @  L2 d8 G% t0 ~& t
  55.         //ws.send(event.data+"client");
    ' Q0 o2 w' O% U) n  j4 O; ?7 y
  56.         qrCodeImg = new Image();
    6 U5 e) Q+ {4 c8 j
  57.         qrCodeImg.src = event.data;, d2 f- T, J1 ?- p0 N
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);' Q4 w; @  j8 R3 \( y5 v3 o
  59.         ! [# ^% v( l. a* D+ Z# _
  60. }" N# E/ A& Y% G" ?, ]3 R
  61. ws.onclose=function(event){' _  v( h5 P1 Y2 c/ d" X6 D
  62.         alert('close');
    5 J* A9 L# M5 ?2 }+ M* e8 P: ?
  63. }4 P/ F, v. ?9 A. ]) _# z$ r
  64. ws.onerror=function(event){
    4 ]) u! v. |/ W4 _; E3 C0 m. f
  65.         alert('error');
    9 j4 ^, v8 N2 S, @: K: J
  66. }' q9 u2 i* Q/ h7 }+ K; P/ H
  67. //video，标签模拟视频
    8 E. }  w3 {. ?9 S: B' T0 {

  68. 6 ?1 b" U( r% R& j3 f
  69. </script>2 p4 w& ?  a5 ^3 p3 ~7 ~
  70. </body>
    / s4 y; O( O  u/ z: \( D* y. a
  71. </html>
    ! n, v& d  M' f4 j2 ^* `2 G
  72. 2 F) ~3 u7 t* U$ d1 v
复制代码
客户端：
# ]2 r4 J1 z' c- V
  1. <html>
    , d8 m3 ?& p3 @7 d6 B/ x% a+ G2 m
  2. <head>4 w" L$ F* a' A( N
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">$ l5 M- T# y/ A, m
  4. <title>客户端直播页面</title>5 p- U; v! M8 V4 c* }* D
  5. </head># n1 B/ [& h1 A. [1 D6 |* \9 H
  6. <body>' p* h$ Y# ?9 z
  7. <img id="receiver" style="width:720px;height:480px">
    7 V8 W5 \" z* a" P
  8. ( N, L  b5 M- U# j" p+ d
  9. <script type="text/javascript" charset="utf-8">4 O  y) V) c8 B8 f
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");2 _5 T" O% \/ Q/ {' T8 D
  11. var image = document.getElementById('receiver');
    " C1 ?9 R4 U5 `9 `& U" ~5 F" K
  12. receiver_socket.onmessage = function(data) {
      Y: }( A# Z% L$ _; P
  13.         console.log(data.data);
    ) A/ i( C4 ~. P! L) z; m
  14.         image.src = data.data;
    2 \' B3 o' ?+ C- @5 Q
  15. }- v6 D* w1 p  A- O
  16. </script>+ h$ P/ v8 k+ A/ K4 D2 D/ m
  17. </body>9 n. o/ O; P/ U* Y9 T/ u4 d/ i
  18. </html>5 w& f! j" ]* X0 j( m
  19. 2 K" u% V& W) H8 W) `' g
复制代码
/ I! p6 V5 T0 |5 t
: V% T! I- x* Y9 w

4 Q9 q) o9 t& R' v. t' v
' R+ n. f+ G. n
3 j( L5 |, A# `3 V$ M8 L. O1 y5 N- H2 q) K; F




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