cncml手绘网

标题: swoole视频直播（记录用 未测试） [打印本页]
作者: admin    时间: 2020-3-29 18:53
标题: swoole视频直播（记录用 未测试）
服务器代码
4 A- L. i! ~# |: h/ O- T) |
  1. $serv=new swoole_websocket_server("0.0.0.0",9501);3 ?: ^( z* q) a  T
  2. $client=array();
    ( \" G3 m: U" u) {, ^/ R
  3. $serv->on("open",function($serv,$req)use($client){
    / Z* w$ L/ ~& P! }+ \9 f- `
  4.         //echo 'connect'.$req->fd;
    " B* [) i- V' V* R: n
  5.         $client[]=$req;
    ! S9 f1 B5 y; R
  6.         //var_dump($client);, n* s. h) Z0 Q: e( W; x
  7.         $serv->push($req->fd,'aa');
    9 w8 h* h2 I/ b. z6 y' B9 j
  8. });' |! [+ g' M0 t) v6 N

  9. 2 r- [5 k! J" v2 W; y
  10. $serv->on("message",function($serv,$frame)use ($client){1 [" ~8 A, d7 A# {
  11.         /*var_dump($frame->data);6 o  N# X! B( u! h8 r& B# U2 T
  12.         foreach($client as $key =>$val){' i2 H+ W; Q4 u2 R0 h; n" ~3 a
  13.                 $serv->push($val->fd,'aa');
    - L; |8 k/ ?8 m# K, t
  14.         }*/2 O" \1 Q+ k- ^: o5 @/ l& l
  15.         $client=$serv->connection_list();
    6 d9 V" F& U3 _9 J; s9 D, a
  16.         var_dump($client);
    1 M0 G; A/ C" e% |
  17.         foreach($client as $key =>$val){
    # c2 a/ g5 i; K" H. k4 B7 j
  18.                 if($val!=$frame->fd){8 r* ^* o2 h. t) w
  19.                         $serv->push($val,$frame->data);
    - m8 D' O% O# ^( X  Y0 X- U- Y
  20.                 }) @. W$ O& b+ Y8 m' x' j
  21.         }: E  z% C8 z: d: @
  22.         
    + `( L1 S& h+ _* y# v2 X8 s4 H7 T
  23. });
    7 d" }. _7 i0 r# B+ p

  24. ! t( Z" T2 D! E9 I% n- Y  r9 O
  25. $serv->on("close",function($serv,$fd){: t; f9 V2 H% }% ]0 }
  26.         echo 'close';# o" w) x: \8 b9 e# B6 Q% A
  27. });! H' S6 p  U, x, v

  28. ; E, U1 w) t' q+ L" F, w  Z
  29. $serv->start();9 G' p& i, |, N1 \. O
  30. & x+ A: c+ C6 P6 Z7 s
复制代码
主播客户端
' `+ N. z) Q; N/ ?, Z
  1. <!doctype html>
    ; ~" V/ {9 X4 R5 p3 r6 _
  2. <html>
    ! o# [; _! I4 N4 |
  3. <head>
    8 w& q9 \% A& u1 p
  4. <meta charset="utf-8">3 O+ k, w) t7 A1 B9 X7 v
  5. ! `0 ?$ G! {) ?3 B2 c
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    4 ?/ g+ g' a# v, F8 T! p7 D
  7. <title>404</title>
    3 z5 _2 q0 ~: `( i
  8. <style>
    " _% |5 g+ s1 d
  9.         body{
    " o4 j: R& o- T+ T8 H
  10.                 background-color:#444;& u( f, X9 ?: R) i, ?
  11.                 font-size:14px;1 h& `( z9 V1 G. G9 q& D& C
  12.         }# R( J9 P) L. k
  13.         h3{
    # ?) Z  s) c7 \! T1 s( |, V. {
  14.                 font-size:60px;5 m- i0 h3 R0 w5 |5 m4 }
  15.                 color:#eee;' |$ k$ x. M. t+ s
  16.                 text-align:center;6 [4 k" U( i& B! v' k# v
  17.                 padding-top:30px;; l1 @. G& B/ ?1 N) D2 }  M
  18.                 font-weight:normal;5 ]9 K. i0 Y7 G1 n; F
  19.         }6 n* ^4 f2 `% ]% L: k/ }( R
  20. </style>
    % G/ O6 Z/ z% s/ D: F& v. s
  21. </head>" x) Y5 g3 S2 J8 c' l) g
  22. ; p' L: N# U  Y
  23. <body>
    ' b; r0 p, P  A# G$ H  e* t+ m3 m: p9 N
  24. <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>% \* {  E( y0 u( C  O
  25. <canvas width="400" id="canvas" height="400" style="display:none"></canvas>4 `  D9 ^0 k2 e' G! W6 p
  26. <canvas width="400" id="canvas2" height="400" ></canvas>
    , `* M; y6 J7 e9 ~/ ]' d
  27. <script>
    1 m: s9 x( x1 |# o' g( n
  28. var video=document.getElementById('video');" u$ n& V  B4 @( s  t& U3 F1 Z% K
  29. var canvas=document.getElementById('canvas');  w) I1 Y2 q% J: o+ f9 d) g  `
  30. var canvas2=document.getElementById('canvas2');
    $ s* p$ _0 E  E- P% H* V2 N; r
  31. var context=canvas.getContext('2d');
    , i: N/ _6 w0 M+ C8 P2 [1 J9 [
  32. var context2=canvas2.getContext('2d');! A9 d& \& A" O: Z
  33. function draw(){
    & F" b' O" o1 j) L/ H$ B) O0 C* `
  34.         context.drawImage(video,0,0,400,400);( C9 X1 B, H) k5 I4 A" |
  35.         ws.send(canvas.toDataURL('image/jpeg',0.8));# P4 R; T" B# ?0 S0 j* n
  36.         setTimeout(draw,800);! E4 H1 g' O+ Y
  37. }
    8 w1 a/ I6 h1 y# o2 H$ A3 p

  38. . a. N& d0 I1 Z. J( g
  39. //客户端跟服务端通讯
    . L5 j" _( c+ @# H
  40. if (window.MozWebSocket)9 k' C" v& D; G3 z! B8 y  ?6 B
  41. {
    $ p! e7 u& K1 j5 k( P
  42.         ws = new MozWebSocket("ws://182.61.42.187:9501");" H4 }, K7 G3 D& _: D  n8 m. M6 U
  43. } else
    & H# l6 D( \+ T. s  h- I, P
  44. {
    5 z5 z' D+ O. W$ {' k' l
  45.         ws = new WebSocket("ws://182.61.42.187:9501");
    # J# h$ X3 p( c
  46. }
    ; r% A) I# D; u! w0 n
  47. & Q1 c7 f2 Z6 T7 T: e% Z
  48. ws.onopen=function(event){) l' t! R* V& o/ L
  49.         alert('连接成功');
    & o2 R# E$ M' ?2 e9 Y7 C8 a7 g
  50.         ws.binaryType = 'arraybuffer';
    8 V2 S7 ?! e% ~% }* v
  51.         draw();
    + L0 _: r4 {: K' N1 d% w; v
  52. }* \( Z. G. J" B. F6 W, y( E/ x
  53. ws.onmessage=function(event){
    ) p6 I8 c3 ?) \  \
  54.         //alert(event.data);6 R1 u% o& y, r8 D' v5 {
  55.         //ws.send(event.data+"client");" u6 q' g) ~0 |/ T5 I6 E
  56.         qrCodeImg = new Image();
    & O* Z) W& ~, l1 h
  57.         qrCodeImg.src = event.data;
    . [+ f; n. ?4 L
  58.         context2.drawImage(qrCodeImg, 0, 0, 400, 400);5 u6 y0 p: b& d  X( R
  59.         . m( w" n2 e( @! C9 A
  60. }
    $ H4 K$ U8 L& ^0 k5 }
  61. ws.onclose=function(event){
    5 \, _/ P8 ?" C" y0 e
  62.         alert('close');5 `" z  ~" H4 B' L' E5 R
  63. }% H" x. g$ T+ D
  64. ws.onerror=function(event){/ {* A9 E  Y6 Z  E! O
  65.         alert('error');
    , L& U& N' X/ m3 ~
  66. }
    ( q: f. w& m" r6 ]6 `4 S
  67. //video，标签模拟视频
    3 T. ?9 g* }# ^' x" k  [6 Y
  68. : V+ b+ g9 z+ b% ^, {$ [! Z
  69. </script>6 h; B7 h/ N1 \& s. ~  ^. _6 J
  70. </body>
    7 L6 z+ _5 U+ b7 a, _. n
  71. </html>
    $ ^+ m3 c, E; ^: _: y+ K; ~

  72. 7 j0 q5 z/ E5 \* X/ ^* e
复制代码
客户端：& T, z5 Y/ Z. g3 L4 [6 _
  1. <html>
    - j* A. A( ^* A/ V  M6 V
  2. <head>
    & \) F4 s3 I( @1 f0 p) B
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">( j9 v, T. v8 t6 U1 z+ A+ N) H! g
  4. <title>客户端直播页面</title>. i. L- p  \- ~! T& z
  5. </head>
    9 x  y: l6 n1 x
  6. <body>( U7 n( O* C* @+ o7 D  i$ ]
  7. <img id="receiver" style="width:720px;height:480px"># P' o7 c& Q( h
  8. " d- L' j1 [1 v$ M& @* y( m; H: h
  9. <script type="text/javascript" charset="utf-8">: [, V6 ^4 [: M7 c3 m( K% v9 P
  10. var receiver_socket = new WebSocket("ws://182.61.42.187:9501");7 T, _" H% P" M4 a. c
  11. var image = document.getElementById('receiver');
    0 v2 a- v. {$ T7 B; R. R/ N7 j  t
  12. receiver_socket.onmessage = function(data) {
    ) _2 N8 g* E$ F
  13.         console.log(data.data);- g- {" q7 c; z# x
  14.         image.src = data.data;1 K: A% n' G5 V
  15. }
    : K! Z5 b, o' t) ~" Q4 T
  16. </script>1 Y" a2 o5 s6 z: K6 G) @! S- U+ D
  17. </body>+ |9 j' x+ d) d6 b/ C2 S
  18. </html>8 X/ v8 g- X4 T! A8 G
  19. 4 u' w: C0 L4 d! B( Y- V% h
复制代码
$ `$ Z! X( ]6 M9 v0 ~

  m  b# r5 m1 i' i
; Y/ R6 Q( X/ r5 Q
$ F& E1 m  h- z: |3 t. {$ a* {& x. I
0 e9 V3 B$ W3 X




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