管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
服务器代码
! q/ |$ x: V* O) H, k- $serv=new swoole_websocket_server("0.0.0.0",9501);5 P* p- e& L1 R& _( d0 W( F) D
- $client=array();9 C1 v( Y$ J2 j$ _. C$ o9 ]
- $serv->on("open",function($serv,$req)use($client){2 o M( R, b1 ]8 K [5 i. f' k. ]
- //echo 'connect'.$req->fd;
6 E2 L: R& b- T$ W6 n3 V - $client[]=$req;2 E3 w: h0 L, P( Z) w: k
- //var_dump($client);2 e. N# E% X+ `. }8 u$ v6 o0 f
- $serv->push($req->fd,'aa');
+ [2 M7 f& V- }) c' {! q - });
: K" s. ^* y. U6 V
8 Z$ Y4 [! S0 {: v- $serv->on("message",function($serv,$frame)use ($client){
; l% t& Y2 ^+ J8 _% a - /*var_dump($frame->data);$ Q( I! H, r( O% Z
- foreach($client as $key =>$val){- X# U* }7 a2 L! A; x) g
- $serv->push($val->fd,'aa');
' A# ?) ~$ ^) F2 S - }*/ k9 U& p9 _1 n% Q8 e
- $client=$serv->connection_list();
3 W! `" t& C7 q' I y - var_dump($client);3 I% S1 F8 ~, d/ n9 {' z
- foreach($client as $key =>$val){
8 O* M& S/ q( h4 @ - if($val!=$frame->fd){! }6 i1 Q. H# c; w
- $serv->push($val,$frame->data);1 A/ E( ?7 F [6 l: }- u
- }0 v2 f: U. P7 \: d
- }
, c: f- G$ }- n -
; M2 Y5 `) T+ D/ T8 s2 P8 @ - });
# {- K$ |+ g* j% t0 {) I - # n' a2 D; w, k# P
- $serv->on("close",function($serv,$fd){) u, l- X! Z: }. k5 Z& ], x
- echo 'close';
9 E( z. N- ]: d% T" T2 r - });
2 O6 i4 P+ O4 d: x/ f
7 v" T2 S- l0 ^' ~ ^- $serv->start();) H5 Q4 D9 A- n# f
- . o" c9 h1 N' g
复制代码 主播客户端
X! t8 g7 }8 t- <!doctype html>
/ B- I+ x+ o7 ^. X E - <html>
5 z8 }7 x; w0 f9 b6 }! @ A J3 R - <head>1 Q$ x- K" u( `. d' t# |3 L
- <meta charset="utf-8">
O3 ~ ?8 Y9 m! u5 t6 s
, G `+ I) E! b% O) T; u' h* S- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
. X) j! C& W4 W - <title>404</title>9 Y! K( C! u4 `" Q! h' o
- <style>8 X8 e+ z% N3 l( @6 Z* b( c
- body{ q* D! f: V" \+ F9 v+ j1 i
- background-color:#444;
' U( a- ]) \" q* s: a' r - font-size:14px;
, A3 F: u. S7 c0 ~, n/ e1 \ - }
( S6 N' k2 f8 C9 P9 L: ] - h3{
2 C( c; C5 U- o% \( V - font-size:60px;
5 j7 x; P- q0 D& D - color:#eee;
' A2 ~! ]5 J; Q: `) Z) N - text-align:center;" z" Q3 U% g2 S9 t
- padding-top:30px;
m7 f0 ]* m% M4 A3 P; m1 m: z - font-weight:normal;( v* v2 }* _& y
- }- i1 q9 s1 M, E' Z L. }
- </style>
O! G3 @: M9 f - </head>9 Z( }3 M. C, \' C3 Q8 Y
- + y; ^+ X o. c
- <body>
" `5 S5 C- `& ` a - <video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>1 J7 f# E. F: t7 V9 K
- <canvas width="400" id="canvas" height="400" style="display:none"></canvas>& e p1 b- A9 E" q+ [
- <canvas width="400" id="canvas2" height="400" ></canvas>: t/ ^4 P' Z4 p$ A. K: V
- <script>5 G" Z: L/ \7 `+ b
- var video=document.getElementById('video');2 W2 q1 d9 u: ]* k, u+ W
- var canvas=document.getElementById('canvas');
- F' W7 i0 \: p1 G - var canvas2=document.getElementById('canvas2');
; x/ A: a' ^; C6 ^& E, z* ]; k - var context=canvas.getContext('2d');
0 c: ]: {1 A1 L6 b5 r - var context2=canvas2.getContext('2d');2 S h, s" z- F# A1 Z5 o
- function draw(){
4 m M3 D& E$ {, N( x - context.drawImage(video,0,0,400,400);
3 K4 d) {" r$ @- f9 P - ws.send(canvas.toDataURL('image/jpeg',0.8));4 j" s, T' i4 Y
- setTimeout(draw,800);
+ n/ B- M! X; x - }
9 s& B, s3 C6 k
! f6 ], Y' h" k/ Q" ]+ ~6 W; X- //客户端跟服务端通讯+ S$ b6 F) w) u. k
- if (window.MozWebSocket)7 E p/ n' v6 q" S
- {
4 | ~; L+ x5 ?( e% L - ws = new MozWebSocket("ws://182.61.42.187:9501");* b, J; u# D+ U! `
- } else
: c0 ]8 U7 @) b7 g+ J1 q: X3 \' U - {
$ { K- p( l0 g( [ - ws = new WebSocket("ws://182.61.42.187:9501");
, p9 M7 _& Y% l1 ^0 y - }) W/ f! f- f0 C( f
) [. V+ e2 r1 x- ws.onopen=function(event){$ ]/ N, q" P& P/ d( e1 e2 |; i2 r7 I
- alert('连接成功');
\2 D* ?0 U) N: r: q w3 v - ws.binaryType = 'arraybuffer';
. n l9 x1 M% f - draw();
& H5 s- S( V/ h) U - }( ^& X, f" S0 L$ {7 e8 t
- ws.onmessage=function(event){
) y1 ^( ?8 l0 C% z; Q# h - //alert(event.data);
& w$ @$ g8 y! D, R9 F - //ws.send(event.data+"client");+ h! a8 @- F2 Y2 K$ x7 y, |4 Y
- qrCodeImg = new Image();4 u7 Y0 S8 Y4 N- `5 f j
- qrCodeImg.src = event.data;
) J# f9 \# y8 o8 x/ d! a0 z - context2.drawImage(qrCodeImg, 0, 0, 400, 400);
2 u6 |4 \7 r! K6 {9 M/ P# ~- g2 {$ g/ ? - 7 y; G# @. ~: ?7 O e0 b4 c* O
- }
$ o. U& \& B2 F3 d6 L5 f - ws.onclose=function(event){
! @5 U9 ~6 w' B( i) O( c - alert('close');
9 q) e/ J8 n+ P$ n - }4 d& V8 E$ \$ g! y% V
- ws.onerror=function(event){/ K9 j' G6 J7 k" W% }# o/ ?
- alert('error');
( x7 V/ w( X5 }7 c! U+ ? - }
8 r4 F; K q* ^. B - //video,标签模拟视频
" F, N1 ?6 C$ C' H4 i! m - 1 g" v5 y9 m' p
- </script>- t7 U4 u8 r) J$ B' F
- </body>
9 h9 V! \- H2 R& k2 }$ E1 L - </html>. {' R" X; s& g! B
6 n1 e% W4 s! b7 z& {, D8 K/ T
复制代码 客户端:3 \* v# I! K9 K! b! r
- <html>9 @: I; \& @9 s/ ]# d! n
- <head>7 F9 p- c9 a8 `
- <meta http-equiv="content-type" content="text/html; charset=utf-8">3 @: g- ^4 n+ _! z! p. w
- <title>客户端直播页面</title>
; M' Q$ }: D2 O - </head>
, W; m/ Z8 Z! z& ]' b" j - <body>
0 d# @# d$ x+ I0 s# f! J( _ - <img id="receiver" style="width:720px;height:480px">
. @, K$ s, f5 v, S% l
1 p! f* \4 c4 l- <script type="text/javascript" charset="utf-8">' ~4 a& F) D# v% r4 g# }1 X
- var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
8 N, m& [/ }3 S, u6 |7 W9 U. w - var image = document.getElementById('receiver');
5 g6 K# D6 z9 f4 ` - receiver_socket.onmessage = function(data) {
" l) `0 g" c* s/ r6 N - console.log(data.data);
0 J7 u) Y q3 X0 ^2 {0 h$ W" c - image.src = data.data;
5 ?- ^6 v9 n6 s% O _8 C- ] - }( a, R1 x G! G: r) ~) h; S
- </script>' ]1 ]* j" F5 F! T3 i
- </body>: S7 K+ S. `! O! K c! p5 B' G0 i# V
- </html>
0 O& H. l& R! S& A+ C - ( m# ?: p t2 W
复制代码 0 q$ R4 T7 U, u% g
; J' g' G5 [! T: i8 m4 D7 ^8 g5 g$ y1 Q0 f
% F2 s6 R& H X! N
" p1 w ]. ^* a3 h r7 i# J+ M* p! b
; m" A8 B1 i! o+ K' f' c
|
|