cncml手绘网

标题: swoole视频直播（记录用 未测试） [打印本页]
作者: admin    时间: 2020-3-29 18:53
标题: swoole视频直播（记录用 未测试）
服务器代码. q9 Z: q' Z. r9 T5 s# V7 \
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);
    $ {4 c/ R# T# e7 a: X
  2. $client=array();" g. Z* |5 g7 R3 P' Y
  3. $serv->on("open",function($serv,$req)use($client){0 @# b4 j; y  V- [
  4.         //echo 'connect'.$req->fd;
    ) |- |! k0 r- r
  5.         $client[]=$req;' r6 n, l7 u" e4 O0 }- c
  6.         //var_dump($client);
    $ ]$ t& m, ?+ \! d9 g2 f& \
  7.         $serv->push($req->fd,'aa');
    4 X% P7 N4 i- s1 M9 M) Z! ]
  8. });0 E! S. {+ O: N) X1 E+ _2 |2 C3 F
  9. 5 Q  N; P' |4 y2 w+ e
  10. $serv->on("message",function($serv,$frame)use ($client){
    * o: _" X6 P1 _+ d) P$ a
  11.         /*var_dump($frame->data);
    * K: D1 Q/ o& n$ R
  12.         foreach($client as $key =>$val){8 X" `- ^' x2 ]0 v7 a& }: Y9 k: ^) V
  13.                 $serv->push($val->fd,'aa');. }* I5 Z* @8 u5 o8 N( a
  14.         }*/0 i* C" N6 G* L; U; p+ h
  15.         $client=$serv->connection_list();% I1 H. s6 g! g% Z( x. ?
  16.         var_dump($client);* |4 Z! a4 l& q7 z4 A& Z9 H
  17.         foreach($client as $key =>$val){
    " x$ Y6 {3 G( W9 Q- l* K9 g
  18.                 if($val!=$frame->fd){
    " f/ R' Y; ?- b/ M8 I/ d
  19.                         $serv->push($val,$frame->data);7 U. ]: E4 _3 a! ?
  20.                 }
    4 N* U. X0 i$ ]6 }6 o
  21.         }  Q; k$ @# N, N" t0 i+ m5 N$ e
  22.         
    ' e' F0 b3 M/ l+ f$ n' `4 K" w0 q' U
  23. });- p: j* S" Y0 e# b+ q3 D& B; C
  24. / e2 f9 U: ]% b( e
  25. $serv->on("close",function($serv,$fd){
    & F  l* Y$ o- l" x3 |0 T) D1 W5 |
  26.         echo 'close';6 Q0 S- C8 s/ `/ c
  27. });
    8 `% v- G9 C" J, D4 k

  28. 4 d! O# N2 _5 w3 j2 U; }' T
  29. $serv->start();
    8 V2 }! p, M0 ], f+ n8 c& @& ^
  30. / U5 Q# L% L- i  x+ _$ m/ B
复制代码
主播客户端' e) Y( d. k5 _. s
  1. <!doctype html>
    3 b6 Z! U9 l+ q2 c/ a1 o
  2. <html>
    5 Q0 R- O2 }7 K
  3. <head># D& ]  ~' B9 b7 m7 F
  4. <meta charset="utf-8">) {' S9 J# t" D

  5. ; e: J9 P. R: g2 n9 u: G: b
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">" H& @5 Q) b  p2 q' c0 G" |
  7. <title>404</title># I- l2 G3 M; S- F
  8. <style>
    8 v% A' a, j* X9 e8 G6 U
  9.         body{* e1 V. B) E8 W
  10.                 background-color:#444;2 `3 q$ p: Q  v
  11.                 font-size:14px;
    ( B+ n( P* R6 t0 P1 V& w/ V2 @
  12.         }
    - V; k; N6 i+ B! y4 B+ V' h
  13.         h3{
    9 q* c/ y' R2 y0 ]. \& J$ z; [, p4 w
  14.                 font-size:60px;- J  g. I+ H! l0 n2 P7 L0 I  K5 a
  15.                 color:#eee;1 o: Q$ w7 z- ]& d  Z
  16.                 text-align:center;# G9 j$ F7 ?$ w, j% ~
  17.                 padding-top:30px;
    $ n7 r0 x0 H) S0 I: e3 N5 r
  18.                 font-weight:normal;
    ( s' W& T/ ~) T! L( v
  19.         }. H% X! p0 ^, L1 U, y7 C
  20. </style>
    & V: Z7 k- R2 O9 o
  21. </head>" [7 x  \5 ~# c9 z. l
  22. 7 _3 C4 P: J7 F" p8 x, f7 C3 X
  23. <body>4 d: {6 E) J4 a- Z9 C& m( X* j
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
    5 K- v4 @6 R, z  ~5 x9 w
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>
    ' [$ o3 h1 e! J  a, t, W
  26. <canvas width="400" id="canvas2" height="400" ></canvas>, Z: n( Y. h; b2 m+ U
  27. <script>
    / f) N2 `& ]" u4 }5 f
  28. var video=document.getElementById('video');0 w3 d* }; j6 Z4 T. F+ P
  29. var canvas=document.getElementById('canvas');/ x5 ?+ @" R, S  o" v4 Q) z
  30. var canvas2=document.getElementById('canvas2');- R6 v" S/ A! l5 R: \% k# k0 l
  31. var context=canvas.getContext('2d');
    ' Y; |( M0 J$ U" [) [9 o, f9 p1 [$ w
  32. var context2=canvas2.getContext('2d');
    4 [  h. C* m& H( @) k  V. L" w
  33. function draw(){
    6 W1 v4 Q6 f- m' V& H( A8 e. f- {
  34.         context.drawImage(video,0,0,400,400);
    & o5 j% F* y# R. N: x2 W
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    3 s4 }. [- V/ r+ m+ n$ f5 D- M8 X
  36.         setTimeout(draw,800);
    # O. M9 I! q1 M
  37. }
    % Q5 t9 K% i! p) J% [

  38. + _! a  f6 T+ N
  39. //客户端跟服务端通讯
    8 @3 C1 `! X; r1 E% W
  40. if (window.MozWebSocket)" e- E% E/ x6 u9 b  b
  41. {
    , F! P+ C  n7 Y- i
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    . E. U" z$ F; m' T  ^- Q" e4 b: J
  43. } else7 Z+ }+ k8 e2 L& T& z- M1 S
  44. {
    / Q" R' ?! t2 Q& w
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    5 e* j0 U+ l; K- E$ E# U
  46. }# e* K* t8 k9 w9 r9 o3 _7 U

  47. 7 w* N4 R. V1 n0 J
  48. ws.onopen=function(event){
    , W! ]9 D: z, X4 m- m6 a" @* e
  49.         alert('连接成功');
    4 @: [3 M0 o9 b, O( k/ C  }0 [
  50.         ws.binaryType = 'arraybuffer';9 H$ h' X# l5 g4 v2 w; C
  51.         draw();
    . `* L4 D1 G0 b3 k- u
  52. }
    % F# B: |0 A( |3 P# _$ r  c/ P
  53. ws.onmessage=function(event){+ ^6 E/ R0 X) B
  54.         //alert(event.data);
    3 q$ g) \/ S" E) l  k) D
  55.         //ws.send(event.data+"client");
    + m) J' t0 z6 r1 V
  56.         qrCodeImg = new Image();
    2 p! w. }2 \0 @7 |
  57.         qrCodeImg.src = event.data;8 O' G) [' D: O" m( U$ w" K
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);8 f* f* F& \; e0 X/ L! o
  59.         
    $ U# Z$ ^* y) B- g  D$ ?
  60. }
    $ Q+ N# v% B. _0 [2 M4 B& U$ ]
  61. ws.onclose=function(event){$ m% C9 P" y2 L
  62.         alert('close');4 A, w' |3 e: R% N  Z
  63. }
    / k' ^5 M9 r) [
  64. ws.onerror=function(event){% Y2 p' Q" q+ U: _, E
  65.         alert('error');
    " v" W& A4 L2 f  q
  66. }) l9 m, B* L7 _
  67. //video，标签模拟视频* S# U* A% b% l( E- e
  68.   ^. ?4 d: M6 m$ S
  69. </script>
    3 U: {9 }* V6 ^1 C+ X  c9 n  ?
  70. </body>9 X9 M8 T3 Y- u
  71. </html>
    1 F1 Z3 e! m! p4 Q

  72. 9 ~1 d- d9 J; y- m( K/ W0 s) y# j
复制代码
客户端：7 t1 @" U+ Q" I
  1. <html>6 T- t& G+ ]+ D0 \% D& Q! [4 t. _: b
  2. <head>
    + E; Y+ Q  [% g3 U9 J9 q
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">4 e% r) ^5 I" l" d1 S
  4. <title>客户端直播页面</title>
    / g2 I8 m$ L3 ^% c
  5. </head>; R+ f1 U5 x' p0 Q
  6. <body>
    # D" [, g4 a+ L! p& w' d7 }  ]" o
  7. <img id="receiver" style="width:720px;height:480px">
    ' c$ q3 _" G/ c: P! `
  8. 4 |* b+ y$ h; w# g( a/ A0 b* p
  9. <script type="text/javascript" charset="utf-8">
    + U" ]# o$ @3 s' F
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");! D# s* a" |3 h5 `
  11. var image = document.getElementById('receiver');1 C* ^- D3 [4 x+ s8 U/ c
  12. receiver_socket.onmessage = function(data) {; Z  \% P- v) Z/ S1 L, G$ g' y) \
  13.         console.log(data.data);" t' a* B$ s4 `# z/ {- Y
  14.         image.src = data.data;
    / W, J/ H* b7 @/ _1 S  `5 x
  15. }) l/ m" T0 x( A. A# _2 u5 n( V$ l
  16. </script>
    # E4 e3 K0 o6 |$ e. J
  17. </body>+ I0 P. b& E+ T
  18. </html>! ]( H) b+ X3 M& H; G, t$ k
  19. * Z. u3 ^$ v3 G9 L! M% p6 V
复制代码
  ^5 p1 b, [- }! |
" P( J1 U7 x  G6 Q, p! K
% w0 K; U& F8 z# j! T" n
9 M' G  X2 d  z4 M9 U# T3 Z
: N, l# r* W3 o$ n8 h
# {% L- A# X4 G0 ]' v* b. e* ^% `




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