管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
服务器代码- T+ i2 U5 H- t9 h4 C
- $serv=new swoole_websocket_server("0.0.0.0",9501);
; {7 ^( }; G5 ]" \/ @' r" o; [ - $client=array();! m; Z8 p& Z) T) ?" m
- $serv->on("open",function($serv,$req)use($client){
0 G7 E6 v* \5 S9 d: U4 e - //echo 'connect'.$req->fd;
" q) P( C, @/ d, ?. { - $client[]=$req;
8 ^, Y4 w6 C' Q7 @5 @ - //var_dump($client);. y* R' G& ]" G6 e' B
- $serv->push($req->fd,'aa');* B; Z- Z3 l" {# }( U, N
- });/ V( M: k v- ] d
- . f. Z o0 J, g
- $serv->on("message",function($serv,$frame)use ($client){
4 r3 Z% i2 q6 Q5 y$ i - /*var_dump($frame->data);
) d5 a- E# g! }- A - foreach($client as $key =>$val){
8 J$ C) M. d: U' ^ - $serv->push($val->fd,'aa');, c, O5 I. h2 y. b% t
- }*/0 J% n2 F1 Z& v
- $client=$serv->connection_list();. k4 ?1 R6 W: S, u& r0 Y; p& \
- var_dump($client);! s" \: T; }% U# l( K
- foreach($client as $key =>$val){
0 f( p5 X; L1 E2 ?+ f* r+ U - if($val!=$frame->fd){1 J) n9 A7 C- N( [% m* m
- $serv->push($val,$frame->data);
0 b) @3 E* m5 O6 \4 t$ R - }
: N/ y# M. ]1 S% t8 E - }
3 ?+ l3 @) u4 ^0 P- s6 t -
! I# t0 g3 P9 W - });7 R* ` l- P( c* J
6 \' p+ O1 k9 B7 p& D& d6 n6 O- $serv->on("close",function($serv,$fd){* z% X% Z: U, ^* M0 P% c* M
- echo 'close';
- g3 [' d% z& L - });
$ ~6 m0 e; L; Y: U6 ^) Y5 z - ) g5 Y3 x" O6 a$ H2 k( q
- $serv->start();9 H: W; d* A6 N) u3 B. F
- 2 _( ]6 V% K( U8 T) R) p, w
复制代码 主播客户端- V6 M+ B& E+ M1 U) Z8 E
- <!doctype html>
. u5 U) U% C1 t% }7 T; ]5 m( Z% l - <html>
: P0 f. Y- U. `( S5 @( f {& [2 v - <head>0 y3 M7 ]6 L+ l
- <meta charset="utf-8">7 I# w& r& G" W- l6 B& B$ ?
- & `. y: C5 r( R0 Q, N5 K) C6 p
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 M' G7 N k+ @ - <title>404</title>
8 R0 o6 E; c5 q" \ - <style>
7 B( t4 K* d7 E' ^; J; t - body{- r A& H2 Y8 k% e: \
- background-color:#444;8 E' ? j8 c. j( ~" b+ ~
- font-size:14px;
, g: J0 } G! Y' X1 u0 d - }0 y, S$ u. ^9 R
- h3{' ?3 k3 Z: E4 g
- font-size:60px;0 K9 j8 ]1 q' M6 C* ^$ D
- color:#eee;
9 ^, j: ]) F% W# m! I - text-align:center;5 e! ?2 B `# |4 N
- padding-top:30px;5 [" b: V1 E9 s0 Q
- font-weight:normal;5 z% |2 N! H9 n% b/ |, ]
- }
. O8 p( p3 f+ R- R: L% W - </style>
; M1 Z, t6 H0 J# w6 e- \ - </head>9 C' R" {% O/ L4 Y. z# W9 A
- , e: S. x7 D* T5 y6 w6 I
- <body>6 d) y1 d! m3 O8 G5 N+ w j
- <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video># t4 f0 U2 w0 D2 y$ w, n. N
- <canvas width="400" id="canvas" height="400" style="display:none"></canvas>% o; d! ~7 r" u, u3 c+ G, c) X( [! n
- <canvas width="400" id="canvas2" height="400" ></canvas>5 u4 @4 u2 \; { k- D7 T" ]3 \
- <script>. b, H' v8 e5 d
- var video=document.getElementById('video');
5 V! m5 Y9 P. w- O5 u. F% D" ~* n - var canvas=document.getElementById('canvas');* U1 S2 K4 o7 g8 r! ^- f
- var canvas2=document.getElementById('canvas2');: V+ v4 N9 o* x) n) E+ d
- var context=canvas.getContext('2d');
% z5 T0 h4 j* l5 | - var context2=canvas2.getContext('2d');( H2 A( j- u% p
- function draw(){
) ]/ O1 l0 J) i% V+ P, ?+ O - context.drawImage(video,0,0,400,400);
: z4 ?& }$ o& R6 X* J - ws.send(canvas.toDataURL('image/jpeg',0.8));
8 P i5 l4 T, t8 @ { - setTimeout(draw,800);
8 b9 U/ {( @- a - }
8 }$ e' S1 n2 a& c$ _' g' f4 b
# }0 v6 b! W, d8 w3 W- //客户端跟服务端通讯 x& U0 n$ ?7 {( |6 p
- if (window.MozWebSocket)% k6 w* K& \% T
- {
2 O! e# s: t1 E3 j) c e, P, _ - ws = new MozWebSocket("ws://182.61.42.187:9501");
& @, B) a1 R3 \( d) u- d! S* X/ N - } else
. V: K Y1 E9 b# X& \; } T m - {7 I$ c7 S; D' U/ V4 A# B! _- }
- ws = new WebSocket("ws://182.61.42.187:9501");5 @+ v: U1 p# F( o3 z: W
- }$ P" E. q( ], L6 q* E3 X' ^' p# W8 m
- 5 G! H; u& r+ m( Q
- ws.onopen=function(event){& E" K( ?7 T7 W9 V* K' G; C: w
- alert('连接成功');, w! h# s- S: t
- ws.binaryType = 'arraybuffer';/ P% X3 Z ?7 d
- draw();( x( L9 L; H( Z! U2 H# p+ G
- }
+ R* G4 `" W" g1 x6 X' E0 ^7 ]* g - ws.onmessage=function(event){* ]' B9 U0 M2 [& S
- //alert(event.data);5 Z$ I. l2 i* N- ^# X2 f* Y) {
- //ws.send(event.data+"client");- K( d2 n; F& \8 c. L( C1 b
- qrCodeImg = new Image();* z9 p: G& S# \- E2 E5 t+ g: K0 H. I
- qrCodeImg.src = event.data;
, I3 O* g# d% e6 H+ Z, N/ T% n H1 ` - context2.drawImage(qrCodeImg, 0, 0, 400, 400);
% F* H, i" I6 g1 _6 l - 6 `- |' R$ R0 M7 B6 T( ~
- }
% v2 T5 _5 }0 z/ r - ws.onclose=function(event){
; m2 n3 u- ]1 o* G" N - alert('close');
) O" V. i; T( X; j: L( \( [" j g - } h4 K; ]! m4 t7 m# x; B
- ws.onerror=function(event){7 \# A" `& F$ ?. J
- alert('error');
+ l# j4 p: \( Y& N) h! a( n - }2 ]' r& n" c6 }6 F7 i. S$ s- x
- //video,标签模拟视频5 i( s8 Y$ s) O! T+ [6 ~
- ; |% P- n- B7 u' B0 ?& j
- </script>2 K( `* c4 r7 ^& Y
- </body>
: U# B( l" o4 l' b - </html>
! ?& S+ e- h: I& o: U: B - - }' P% q n, J& ^1 ?
复制代码 客户端:9 I+ f; z& F P: I/ D- H9 _+ f
- <html>$ i" w2 e q1 [ ^0 q2 P$ X3 Z: e
- <head>) r7 |# H7 r. k/ O4 Q0 j
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
/ j' Y6 ?) {6 d6 `4 c4 l& |' H9 v* P - <title>客户端直播页面</title>2 R' P8 b, Y/ m, J" V! L8 l
- </head>
+ r2 \1 Y/ A6 i2 h3 f& L, k9 P - <body>
a$ u2 n7 ?7 f& W - <img id="receiver" style="width:720px;height:480px">8 ~& q" |1 @3 P$ W
- 5 _+ A" ?6 N2 [* c+ f: L
- <script type="text/javascript" charset="utf-8">
, M A, x! |% Q - var receiver_socket = new WebSocket("ws://182.61.42.187:9501");4 q' u( v. i! L& C
- var image = document.getElementById('receiver');; q: E1 d- M# h m8 J
- receiver_socket.onmessage = function(data) {
* k4 m" m* F* Q; w: z. g - console.log(data.data);
1 W; ` m8 X! k( q/ A: Z% a9 G - image.src = data.data;
0 }# R0 q/ B8 e* y - }
: W) P$ v7 l+ W8 |- ^ - </script>% J1 T- Z6 B4 Z! E
- </body>* X, T1 Y3 ]+ Y: H3 x6 n- v
- </html>
+ n3 D1 Q6 S: r! \7 E* p; T
+ \6 B# y5 p2 ^( e
复制代码
* U( d5 T7 G# x' i2 Z" A( Y$ j1 E
Y- b4 h1 {9 e7 F+ t' V! X7 {- R( N! H1 M+ Q& e A+ v
/ o( L' Q9 ?9 R/ s5 C4 n, L
3 m+ \4 U7 s+ _$ _* N
& `: y& ]8 S& z9 ^ |
|