管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
服务器代码8 \. s; P- N5 R2 z" Z* t" @
- $serv=new swoole_websocket_server("0.0.0.0",9501);, j* b8 b1 T7 p7 Z5 h/ F
- $client=array();
: d/ ]$ j- u. o" z4 p! n - $serv->on("open",function($serv,$req)use($client){" J2 L9 A8 |3 }0 }; p
- //echo 'connect'.$req->fd;3 g$ q' ?# U1 U7 r/ _; M$ Q" e4 n
- $client[]=$req;2 N" `1 d$ a4 U. G0 p, o2 m: M
- //var_dump($client);- F; @; H* H7 P; }5 R! B. e
- $serv->push($req->fd,'aa');
$ Q; s: A' v" }0 U - });$ t% x' T8 _* f; g. V% \. ?9 _3 Y( V6 x
+ @ I B$ `; @- $serv->on("message",function($serv,$frame)use ($client){0 `9 v! W2 o3 q* A! V9 r* |8 E! G
- /*var_dump($frame->data);
8 K2 b; i/ v; C+ F - foreach($client as $key =>$val){
7 P0 X/ z( o. J - $serv->push($val->fd,'aa');1 r5 ]% e% W1 ]% K- h; m
- }*/
; B* {6 d1 B6 q4 H! W5 i7 D; M% J - $client=$serv->connection_list();) D" @# ~6 _3 f( ]# S9 Q
- var_dump($client);
0 C* d ^8 q1 e B; G - foreach($client as $key =>$val){+ V l# F: y, F5 ]* |
- if($val!=$frame->fd){! I. Q# w' ~" W2 F; O
- $serv->push($val,$frame->data);6 x1 A6 Z2 X% r8 W
- }3 M) M# J3 t3 U
- }" [# E3 }2 q( O! Q, ]+ e- j
-
2 s& z9 m3 M% J* Y6 H u, F - });
4 W9 }, v/ [3 l6 T* B/ k9 z - ' I) F2 K6 T" A5 ]) O
- $serv->on("close",function($serv,$fd){
4 z* t( X9 o( x# O - echo 'close';
7 h0 G: Y! `2 |8 h6 S) E - });
# {! l9 I5 Z6 I) c1 V
6 N t, E+ ]3 M& q5 S- $serv->start();
$ n. N4 d+ [+ c8 \ - ; \" F3 A5 b, J5 G; ^
复制代码 主播客户端0 ~% @/ w$ k4 `- H2 F* K$ b. K% c
- <!doctype html>' e. g+ u- C6 U" z. V W
- <html>" d& N8 d8 [; H+ ^2 _) j. ]
- <head>& f& ^/ U% Y5 `% \4 K7 }
- <meta charset="utf-8">
4 f+ T2 Z- Q4 b! b5 M - 3 {$ D0 T" W' x1 Z' [
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">2 j' l3 J U6 r# {
- <title>404</title>
% M9 s9 T: _2 X1 B) g+ u/ ~ - <style>
6 r! a" @- `; U/ d& h$ ~ - body{
0 `' |7 m2 J7 M8 d% h2 s - background-color:#444;1 m5 p/ k6 C/ I' Q7 l
- font-size:14px;& X7 {( v1 }/ V2 z0 A U4 f
- }
3 |" H a- m# A5 \ - h3{
; X$ b' r1 m5 Y; g) s - font-size:60px;
9 Q- |; @6 z; {0 L3 g& s; u - color:#eee;. K. S3 e* m/ D! ~8 U# j2 q6 ]
- text-align:center;
' s4 y9 u+ }* N) ]! x - padding-top:30px;8 ]3 U v7 R; v: W$ m
- font-weight:normal;
* u8 H7 N/ b( x& u' ^+ s - }8 S* ?+ k. I! D0 d
- </style>
$ ?3 A9 h( ~6 s' y- L3 O - </head>
4 z1 V2 O8 w9 l* U2 t8 Z1 i
. f' }0 J' Y% y7 o- <body>
_& I3 T/ s; S- X, ` - <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>5 M* q& w, F9 G" V) R6 O. F
- <canvas width="400" id="canvas" height="400" style="display:none"></canvas>% C" i& {- s6 o. s
- <canvas width="400" id="canvas2" height="400" ></canvas>
' O! ]( m7 S& {" B' f - <script># }; m5 V, }+ F9 R# P- \
- var video=document.getElementById('video');
3 U; M) g5 i F% U# ~* H - var canvas=document.getElementById('canvas');. {2 K% h7 [& Z4 [
- var canvas2=document.getElementById('canvas2');
0 ]6 N) s4 B( S2 q - var context=canvas.getContext('2d');8 j/ B# W; ?- l4 J) L5 ~+ f
- var context2=canvas2.getContext('2d');8 g3 u& ~* g: Z0 X" h
- function draw(){
9 X6 l0 [7 [2 _" J9 Q1 z7 y - context.drawImage(video,0,0,400,400);5 z, U; r, x0 m8 w) ]4 z
- ws.send(canvas.toDataURL('image/jpeg',0.8));, p2 J' C0 b) V
- setTimeout(draw,800);
2 O- T% [5 z! n4 L! y6 [& s/ R - }
! h3 Q$ I+ u9 j' S' X
" A2 V2 Q9 U' L: v3 f0 D) K8 J, E- //客户端跟服务端通讯+ a+ b7 h. Q4 p3 x% m- o/ r" \2 |* V8 f
- if (window.MozWebSocket) `8 d! z# u7 Q$ p5 o% Z5 }
- { w3 P6 k3 \7 w5 C, D$ K
- ws = new MozWebSocket("ws://182.61.42.187:9501");4 [% j' l! y6 [6 y& u, k
- } else
9 m0 E& z( e- X E* }% m - {
- y- v0 f: d T8 A - ws = new WebSocket("ws://182.61.42.187:9501");( ]+ g% ^7 U$ k! L U/ {- T4 q/ h
- }
0 F+ N" g9 A# u; r
% F2 z/ W/ p9 A# I- ws.onopen=function(event){
. V' l6 y$ q ` - alert('连接成功');8 [( ]2 K' T; W- Z2 }' {/ I
- ws.binaryType = 'arraybuffer';
/ p" s. s1 P0 B - draw();
& R, n4 l& H4 C# k! w# t$ p - }0 d5 F+ D. X; p6 K
- ws.onmessage=function(event){1 x$ B& x5 o' [3 W+ @- y! h. C
- //alert(event.data);9 Y: `& E1 s, Q4 O4 s9 ?
- //ws.send(event.data+"client");
1 C9 z% h8 \7 E# P. I - qrCodeImg = new Image();5 ~1 D. c6 b: ~" r1 `* W: i
- qrCodeImg.src = event.data;
/ F" S! ~) i$ K3 E! _ - context2.drawImage(qrCodeImg, 0, 0, 400, 400);
( q+ J% K8 n6 [( x; o4 G3 u5 ^ - 4 Q( ~3 l; Y1 I" |6 \ H. Z0 S
- }
& }+ X8 N9 Z* p/ x7 ^" A - ws.onclose=function(event){8 v, I. Y) q$ S" R5 S. O' C' s! P
- alert('close');! ?% p' L7 F# P3 V# z
- }5 c0 @* n5 c1 y& J' {
- ws.onerror=function(event){
8 s& }9 ^, X6 u. ?. ~ - alert('error');$ p: n7 t. b$ i
- }2 h2 W" h3 J1 T* u
- //video,标签模拟视频
9 x2 P J# K4 }6 L2 n, E/ X
# d1 s+ n' [/ y) ~' P! Y- </script>* m4 \3 w/ u" }9 S$ |7 N
- </body>
/ }5 t& h5 R2 k- g0 q" Q - </html>
- V+ _0 b0 S. w* o( w: y9 h) l - : b$ p K* n' E9 \* V; Z9 E0 `2 K2 \8 h4 Z$ F
复制代码 客户端:
) R5 l; Z$ {' h, k- <html>8 @( |# \: s- i
- <head>/ X. `' i2 j6 A z/ a- }
- <meta http-equiv="content-type" content="text/html; charset=utf-8"># i% O, f3 O; |" @+ j# C
- <title>客户端直播页面</title>
3 \, p% @! R+ G* m& J0 O - </head>/ @" B" }- ?$ j/ V- L
- <body>; S# `. G9 O0 L$ l; E: k6 r
- <img id="receiver" style="width:720px;height:480px">" B) s/ U- D, H ]$ C
) c$ S X8 j4 w+ C3 [- <script type="text/javascript" charset="utf-8">" n- \5 t; d) I: K: v/ G
- var receiver_socket = new WebSocket("ws://182.61.42.187:9501");1 H5 c; r& A+ I, h+ b4 @
- var image = document.getElementById('receiver');
) F2 _5 E y/ g( S4 F# ~ - receiver_socket.onmessage = function(data) {$ f' U9 B/ V) O
- console.log(data.data);
2 o% y1 J, Q) A* D* f0 O/ g F( E4 | - image.src = data.data;
# M6 H! E' r) H- E- \ - }" \0 c B2 v5 F- Q
- </script>
9 X" c' H. a4 ]7 L# Z - </body>, {" N9 _4 i$ `: R
- </html>
: X/ f9 ]- G. C; n6 k D
$ \! t6 Z! ?2 M! z Y& F
复制代码
% g8 \( W; s- q2 `) f( P/ s* r
# l* X; q/ R7 b4 S: {( y9 E' \* u+ a# @: s& N6 s7 `# C1 `
2 E7 d6 O: n @7 ^, [) b% U# G! b4 U' S# N& z
/ F1 z1 f' V4 { T
|
|