cncml手绘网

标题: swoole视频直播（记录用 未测试） [打印本页]
作者: admin    时间: 2020-3-29 18:53
标题: swoole视频直播（记录用 未测试）
服务器代码
) T4 e% F* ~* A6 I4 H8 ^6 E8 n
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);
    ( y7 ~. Q5 F4 _2 Z. [! B
  2. $client=array();
    4 ]) V! W7 H# Z! g
  3. $serv->on("open",function($serv,$req)use($client){( f& q1 @+ ^! O+ f# t
  4.         //echo 'connect'.$req->fd;! G7 Y) E7 x5 M. w/ N
  5.         $client[]=$req;
    + k; U% r# q6 m+ D7 {
  6.         //var_dump($client);/ [: _* X( x7 I1 q& O4 x
  7.         $serv->push($req->fd,'aa');
    0 d2 h# `& {# S% L. ]
  8. });
    + H9 u4 j8 s1 Q: j: P
  9. . V! V- s  _- u, h# f
  10. $serv->on("message",function($serv,$frame)use ($client){2 n1 _3 n6 S$ z3 z( U, L* Z0 M7 m3 C
  11.         /*var_dump($frame->data);- u6 q" J# i% d* i& ~: [
  12.         foreach($client as $key =>$val){
    2 H( t- k  s4 U" z
  13.                 $serv->push($val->fd,'aa');
    , f& [2 Q0 Y& k8 D
  14.         }*/  K# F# |/ U; c( B' K
  15.         $client=$serv->connection_list();  j  w1 P( G* n1 ^0 X
  16.         var_dump($client);, }2 n# l: V" Y# m3 q
  17.         foreach($client as $key =>$val){
    8 n4 l! _, |) R2 h$ c
  18.                 if($val!=$frame->fd){9 e: `( o) y3 @
  19.                         $serv->push($val,$frame->data);
    9 x1 Z% B9 T* K2 X0 `) Y% i4 K
  20.                 }. d. X3 B% s. _
  21.         }
    1 |# s% \% x2 l" ^
  22.         ! ?4 E. R, c* ^1 J' X
  23. });
    * \8 P6 O) W1 l* y0 b$ ^# h1 r

  24. . B0 D/ J: y$ C* k
  25. $serv->on("close",function($serv,$fd){- F. i0 o, f5 O
  26.         echo 'close';
    ! y/ E' |7 }. J1 }7 n  y0 U- v" P3 I3 W
  27. });( [( c! `0 R7 C) P: ~. V

  28. , G2 n) z4 w  @0 c8 B: b. b$ M& C
  29. $serv->start();
    6 q* k3 x% O' b- o6 j

  30. 3 _/ G$ w6 \( F; F- W
复制代码
主播客户端, M! _) a3 b/ n! t$ Y( m
  1. <!doctype html>
    . J9 X4 ?; c# g5 b
  2. <html>
    4 l1 ]7 q/ b% _
  3. <head>
    * r! d! I: y6 @9 ^: c
  4. <meta charset="utf-8">
    0 z- D4 }  m+ D" F6 ^/ d, H4 x6 B

  5. ) e) a5 \) @5 t5 `- e
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      B& l$ \. V" U# d" M* \* h
  7. <title>404</title>
    : X7 b2 x& ?* z6 P1 [
  8. <style>
    % }4 ]5 K; b) W" Y2 ~
  9.         body{
    0 ^  ]: D7 `# b* @
  10.                 background-color:#444;5 o! f) ~  q0 I7 R- e. z" h2 J
  11.                 font-size:14px;, i2 d! A2 _$ o2 D# Q
  12.         }3 L$ B3 E% [5 y" d8 e: j+ k
  13.         h3{
    - X! W; Y$ a" c  e
  14.                 font-size:60px;
    % x- h! N6 D4 N/ b/ [
  15.                 color:#eee;, t8 d4 }; e& S" }5 @
  16.                 text-align:center;. `/ }0 Q5 P, ^/ ?6 _: v
  17.                 padding-top:30px;
    5 R% b# u3 Z5 n( O- m
  18.                 font-weight:normal;
    , Y; a# O$ G4 g& V  F1 H5 _& i: ~
  19.         }. V" Y& `* @7 e9 v
  20. </style>, `7 V; ]# c3 X" e* e
  21. </head>; I. v# \( F' G" T
  22. 4 h- s, p9 ^  Y6 @: Z. B. V
  23. <body>
    0 ]. b& F$ v( x
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
    ' M2 k3 ~; \; N4 V; d
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>  A$ X; }+ W8 u$ t9 ]
  26. <canvas width="400" id="canvas2" height="400" ></canvas>% T4 c1 N4 K' J8 ~6 n
  27. <script>% `( ?$ l- x5 g0 u9 u$ C" R
  28. var video=document.getElementById('video');
    # o. H1 u; ^- |$ P" ~1 U
  29. var canvas=document.getElementById('canvas');# o% R( i3 w! o* T
  30. var canvas2=document.getElementById('canvas2');% O. T" i0 |' `/ g- {9 g! c
  31. var context=canvas.getContext('2d');5 x% Z! F8 a5 k  b* W) N5 @) m$ w
  32. var context2=canvas2.getContext('2d');
    . \/ |3 t: l/ N) U6 K
  33. function draw(){* S, z" H2 L; C9 {. }; W
  34.         context.drawImage(video,0,0,400,400);
    8 }( F0 m0 L. X0 ~& }6 ^
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));: w! J& c8 y; \8 e' e* Q
  36.         setTimeout(draw,800);
    + q, y/ ?5 G, t
  37. }2 x; {. t9 r. t! _/ g3 w& v
  38. # @- Z) V$ m, M* ~
  39. //客户端跟服务端通讯
    ! G# }# r8 R1 K  O" |5 K
  40. if (window.MozWebSocket)% w3 _1 f  ?/ j4 @9 v
  41. {
    - M# C0 b7 I9 w4 }$ i
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    ! M. x! V! Y# Y/ L- ?3 N" T
  43. } else
    2 G$ I8 M) {$ f" ]
  44. {
    1 d. c' F7 |( I! N
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    ( [! t( a( F+ E: e- l3 x2 l9 n) H
  46. }+ n+ j0 I) `/ c8 U
  47. ' s5 b& N: v5 w* p
  48. ws.onopen=function(event){1 v/ n$ T% Y& Z- R! G# c+ P4 L
  49.         alert('连接成功');; U3 Y$ n, B9 d  ?3 s
  50.         ws.binaryType = 'arraybuffer';( D9 d! F) d) a  G( P" X
  51.         draw();
    $ C3 Z; O) Y( f' @
  52. }
    / m6 h1 F2 I) O  h1 z) D& S9 |
  53. ws.onmessage=function(event){
    ' f0 A" \- e3 I4 l, U4 t9 ^
  54.         //alert(event.data);
    # \1 x" a( T1 M5 v3 F6 \- x9 m
  55.         //ws.send(event.data+"client");2 m* v/ }- |, l  y" P3 {' |& I
  56.         qrCodeImg = new Image();
    4 O& C. P7 S5 l# j7 r! g) S
  57.         qrCodeImg.src = event.data;* q: R3 f3 B- c8 |& K
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);$ j+ ?: d( P6 T- r
  59.         ! [( z5 F; Q8 c
  60. }/ I. I- w' N0 Y% ~: g. V! r
  61. ws.onclose=function(event){* P$ T8 E" F0 H+ S; m; f3 M
  62.         alert('close');
    $ y  Q! E6 y6 V2 d
  63. }2 \4 ~4 ^" Y; L' A2 M
  64. ws.onerror=function(event){; I( a6 ]5 w2 D) l
  65.         alert('error');
    + K; A5 x! g9 ?8 V3 @% v3 p% o* x, I- Q
  66. }, C$ F0 E# v$ y
  67. //video，标签模拟视频
    5 |" n9 r' V( S  k, V6 L

  68. " q1 _% R/ j6 {8 }% o" k1 A
  69. </script>
    $ j/ Z. D  G+ b
  70. </body>
    : R8 X$ n+ ]0 O% F. N- i$ ~8 m( ^
  71. </html>8 h! r8 @5 o0 \3 {" Z4 M
  72. % p( x4 `* C: z2 S5 O
复制代码
客户端：
$ ]) H. u% A, @" c  A( g% S
  1. <html>
    " n5 W8 B% K( x& j: a7 d& o+ {
  2. <head>- J1 t, t) T6 X; p7 U. e/ n  Q
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
    1 s) s4 f5 A& s. |9 E& Z; M, \
  4. <title>客户端直播页面</title>. G$ x  }/ r6 P! H% \3 y
  5. </head>' o8 q! d9 [- N1 d  C$ Q3 P
  6. <body>2 |$ _7 X) Z4 M, z6 j
  7. <img id="receiver" style="width:720px;height:480px">' |) _5 F/ j% H

  8. 8 |4 C- F" C* p3 F4 V7 A
  9. <script type="text/javascript" charset="utf-8">
    6 e8 k9 @/ l" x
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
    ! J! }6 z" ]0 e: |, k& e
  11. var image = document.getElementById('receiver');4 j1 }! m3 s3 @! Y) N
  12. receiver_socket.onmessage = function(data) {
    . p! F: y- E' A% A
  13.         console.log(data.data);4 @) c5 l3 Y2 p) Q
  14.         image.src = data.data;
    " s5 P2 N) n% {- C/ i' B  m& i% r- _
  15. }
    ( F( k- n; ?2 A
  16. </script>) E! L: i5 W+ b; t; u
  17. </body>" @6 {  X8 N, B# K( e9 A. L
  18. </html>5 d) c; Q  b- j4 Z( v" ?

  19. 3 \# {( x3 k. w6 e$ e
复制代码

& D) `, O. U- C
) Q* v( q7 N' c2 E3 o
1 p! F& C8 a8 N9 w0 |& g! j6 e6 [3 ?9 Q4 ~, F- @  U2 d

3 K! {2 ]5 T* J  Y, E4 h3 I/ `
. n, Y* Z  X4 S* Q4 c5 @



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