cncml手绘网

标题: swoole视频直播（记录用 未测试） [打印本页]
作者: admin    时间: 2020-3-29 18:53
标题: swoole视频直播（记录用 未测试）
服务器代码2 n. s  o4 H( i+ K5 _
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);% Y; i; V. G+ i- p/ D
  2. $client=array();2 o/ ]' ]3 M" ^& C
  3. $serv->on("open",function($serv,$req)use($client){2 c5 M2 z, V. ^8 J
  4.         //echo 'connect'.$req->fd;
    ! w( F6 y' k9 t
  5.         $client[]=$req;, ^2 X# ^: e' a6 v6 Q& {
  6.         //var_dump($client);  A1 P0 X. t6 |- M/ L7 U% k
  7.         $serv->push($req->fd,'aa');
    + G7 v2 V7 Y3 I+ b( }9 [
  8. });
    ; D3 P# L% T, K, _5 p2 g9 q
  9. $ c, r' q$ m8 X- y
  10. $serv->on("message",function($serv,$frame)use ($client){/ z9 {8 l( T$ E7 c! E5 @1 e/ {7 }
  11.         /*var_dump($frame->data);
    2 r! W) J5 r! V1 _3 W* t& P
  12.         foreach($client as $key =>$val){  o8 G# B. R0 n' x9 c
  13.                 $serv->push($val->fd,'aa');3 Q1 R, @  Q2 j$ O' n% [! i
  14.         }*/
    ) X% B8 G2 F3 r  {7 `1 W
  15.         $client=$serv->connection_list();
    , h  F6 q! s$ K
  16.         var_dump($client);
    * R" o! [0 a8 h" W
  17.         foreach($client as $key =>$val){- n- A( f; H4 r7 c! b9 Q$ G: d
  18.                 if($val!=$frame->fd){
    2 x  V% Q. z1 y  t5 D: I
  19.                         $serv->push($val,$frame->data);
    # [  o$ Z: A) Y6 W4 `
  20.                 }( t: N, v; p$ J% ]0 C; [7 {" Z
  21.         }2 s# e9 c/ P% q! ]0 k* O- S
  22.         
    4 r9 C! C( x+ W+ q: n
  23. });
    - r2 e' H* R# L" |1 I' y& i

  24.   `. @$ I+ Y1 E
  25. $serv->on("close",function($serv,$fd){8 T4 \0 n2 l# |: u) }
  26.         echo 'close';" b& p0 n% N$ Q/ g% o/ ]0 R# p
  27. });8 Y1 w# `( X2 ?5 C
  28. 9 ]; Y4 J$ m7 V: {+ W3 N
  29. $serv->start();
    % D. ]9 C$ K0 l# ], O/ _% S

  30. ( w, i+ j6 H1 X% T) K7 }
复制代码
主播客户端
3 y( w3 G" X, r* r' e
  1. <!doctype html>/ G# u2 [  w% i2 ?
  2. <html>6 z- b+ }4 a7 O1 |4 v
  3. <head>
    " e  J& W7 T. t1 f3 o4 G! u- U7 H
  4. <meta charset="utf-8">& P" O. d+ B. a2 w9 y% f7 T4 z
  5. & T7 o+ R0 M" w
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    / p2 n" ]( D! G8 r
  7. <title>404</title>$ f; s) O# K! w
  8. <style>
    6 s! ?8 J) q% h! C! x& v
  9.         body{
    ' O' A4 I, O. R
  10.                 background-color:#444;
    3 {& Y% ~7 g; h  A* F8 e, _
  11.                 font-size:14px;! a" p/ l" j7 A: Q3 o
  12.         }$ x# p2 t9 l: I9 J5 l
  13.         h3{( I% ?+ M1 o, I
  14.                 font-size:60px;
    . Z. I6 U4 m! D0 A8 o3 g9 A
  15.                 color:#eee;
    : W" w3 Y, u( r0 _# A
  16.                 text-align:center;
    & M7 u, k1 E, D; Y; z; {
  17.                 padding-top:30px;& W% l' Q& ?0 E1 j. H. h: L( U
  18.                 font-weight:normal;
      }! U/ L% }! V" L, k& |
  19.         }
    - H3 `8 ~* |/ O* J) \- z
  20. </style>
      ~. B+ R6 `2 i) J$ d* P. k2 O5 F
  21. </head>
    & D! r# g3 B$ Y6 |
  22. & I  p0 ^( X% q' f+ v
  23. <body>/ V* o! H! y/ H3 D
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>) X+ W  L! \: h5 g1 J8 X, E1 S7 n
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>( V1 \1 _5 l/ `; _/ K) Q
  26. <canvas width="400" id="canvas2" height="400" ></canvas>8 s; b; x! e- Y/ E& C2 o! q
  27. <script>
    2 R4 W2 m/ K7 J$ A) X% `- h
  28. var video=document.getElementById('video');
    ' _& k, G0 d: |) K( R2 L; z
  29. var canvas=document.getElementById('canvas');( _1 u9 C) d+ _1 i6 I; J/ `- y
  30. var canvas2=document.getElementById('canvas2');
    6 ]$ [8 c/ i4 |' ?
  31. var context=canvas.getContext('2d');  i6 h, K+ D2 Q) r7 P# p0 q
  32. var context2=canvas2.getContext('2d');7 }7 b2 f+ R, N2 C
  33. function draw(){" l2 p8 H, `% j
  34.         context.drawImage(video,0,0,400,400);
    ( {3 A& B( y# `" e, g  W
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));
    ( x$ w" U/ c* U
  36.         setTimeout(draw,800);' z0 {( @3 t' R/ S4 q2 u: b
  37. }
    * K" ^2 K2 v- q( ]5 R
  38. . ~: F' N' V6 @7 f* D4 `# z( ?- b
  39. //客户端跟服务端通讯" K3 A  o/ T3 G2 ]: y
  40. if (window.MozWebSocket)
    ! b5 w/ E) y  t3 C8 m6 Y, ?( \6 k  V
  41. {  a! N! X, ~% X8 W
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");
    / v, F$ r0 D6 P/ `$ P$ c
  43. } else) Q+ y& K4 n0 ]' X' M7 p
  44. {
    : X; n6 i; r" A0 s$ U" ~: ^
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    7 ]( h9 c7 F0 [7 ?
  46. }: x; Z& Z4 T9 I" G4 D. h1 U

  47. $ ^7 L& x2 t- E: V6 [6 t
  48. ws.onopen=function(event){
    & X# X/ e' }7 u# D' F
  49.         alert('连接成功');8 _$ F2 @: _% m; D" \
  50.         ws.binaryType = 'arraybuffer';
    : `/ b, C4 [- o. z0 c
  51.         draw();
    - w: D0 `5 {$ R, B" N
  52. }6 f( _8 @& J: K  Z3 m
  53. ws.onmessage=function(event){
    ( B: u- c  `* j2 N. n8 g1 z: I
  54.         //alert(event.data);
    2 \) u9 B, s: v' ^2 Z" {
  55.         //ws.send(event.data+"client");* h8 E8 O. M; z
  56.         qrCodeImg = new Image();
    * V: K; ]/ f5 J4 m' O5 R1 I' O
  57.         qrCodeImg.src = event.data;
    , O- C. \1 v! ~. m5 Z9 W( m
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);
    0 a' h/ X' I% C/ r8 }/ J( K: U5 w, F
  59.         
    0 [9 W) `# {6 O1 f. G& C$ f: k
  60. }2 k2 Q* m2 \& I& ~/ I8 g
  61. ws.onclose=function(event){
    ! P2 D' `# v. p1 E2 G
  62.         alert('close');
    ) g% e5 s1 r5 L% T
  63. }+ O6 t" T1 d- f( X  w6 [
  64. ws.onerror=function(event){
    9 n# O& W  v5 ~, g/ C# h4 d
  65.         alert('error');
    $ \$ ~; b, \2 W: S& n
  66. }& \* }1 I* p: D! k
  67. //video，标签模拟视频3 J, }6 P% i5 |8 r4 r

  68. 6 d3 c1 k, S1 E3 v. R
  69. </script>0 ^5 A) v( [+ w# w2 J5 [5 N( E! N
  70. </body>
    6 f# b5 a7 Q) v
  71. </html>
    , Z& t' q% g# w+ B% x
  72.   `$ w0 P& f4 O0 P5 Z9 n, v( [$ K
复制代码
客户端：
# O; u* k* S. C, d/ w
  1. <html>1 T8 M5 W+ ?9 x8 R  [
  2. <head># z' {4 N$ U4 Y# M) I; k
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">3 `/ r: \; `' D' |- g1 V# b( ?4 L+ U
  4. <title>客户端直播页面</title>
    9 P$ P  h+ S( R) x5 e
  5. </head>: ?8 ?) n1 O5 X2 d
  6. <body>
    4 m" S* X( r' q" ?1 ]/ ~
  7. <img id="receiver" style="width:720px;height:480px">2 [9 w: Z4 ?9 i' n
  8. 2 k/ T2 |0 T9 L; c# T3 A
  9. <script type="text/javascript" charset="utf-8">2 s' O3 r% l! x/ m+ Z/ H! ~
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");8 [( w2 ]) p, l/ }5 v
  11. var image = document.getElementById('receiver');
    4 ^$ D' n) k) ?
  12. receiver_socket.onmessage = function(data) {
    - j; Y/ k9 y. J% N
  13.         console.log(data.data);
    2 B2 O. N/ g7 C' X
  14.         image.src = data.data;
    $ |8 s3 j- a4 {. N* B- V
  15. }
    / \( z- v- f) O+ c5 j  H& E
  16. </script>
    3 c5 U, w3 Z6 a" x4 d' D/ k
  17. </body>
    $ V/ W$ ~6 H9 F, l2 D" |) X
  18. </html>
    8 K- ^+ R  v# O, T

  19. 0 _9 C" L' }# r! `
复制代码
% v2 J' r9 l$ G
& ~; o; I  a$ \7 [4 p# f

5 g; l) J# i- n$ |, t$ ^2 T- b
  F6 w5 K8 y- l3 R. J* A3 U6 Q" ^" {' ~# E' ?0 @

4 d" ^. O) b" s9 j



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