swoole视频直播（记录用未测试）

admin · 发表于 2020-3-29 18:53:53

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
8 g) I- j% \6 o' J& y
$client=array();9 H7 ]# a: G2 F8 x' W1 i
$serv->on("open",function($serv,$req)use($client){% o0 M9 L4 h; Q3 n+ D
//echo 'connect'.$req->fd;( q( m6 _3 T1 x. C7 n
$client[]=$req;2 \, A: @9 d* O5 U F* Q2 e, a
//var_dump($client);; N5 d0 B/ m. a# P. D0 O
$serv->push($req->fd,'aa');# j0 @$ W5 U0 D9 i% U. x* L
});; f7 h; M! |% A, U
$serv->on("message",function($serv,$frame)use ($client){
- m. t5 \; Y, c8 A1 l
/*var_dump($frame->data);: ]/ O2 y+ p7 j5 ~3 ^
foreach($client as $key =>$val){ U8 S- N+ B% n$ r
$serv->push($val->fd,'aa');( e( }0 [. {" T J G2 Q& U" v
}*/
7 x7 u, `* R+ Q( O ]) a
$client=$serv->connection_list();
+ `% V4 L% p- `5 R. b/ o. V: a0 C$ V
var_dump($client);1 t+ \- K# a/ _3 l2 b' L1 b
foreach($client as $key =>$val){( I! a* a) z: X& ^; i s
if($val!=$frame->fd){
d' P p& X" D% m) a" @" Z
$serv->push($val,$frame->data);
; `0 ]. c) c2 h& D0 O
}
3 L( y9 o* C ?/ @! h
}( \1 d- A1 u r, E, |" H, D
2 o% D, Q! g6 [! w
});$ x( ]' H9 `5 A% ]. N- F
: L; Q$ w4 ~0 Y: R" S! X
$serv->on("close",function($serv,$fd){, y. Y* Z. f2 P& b* v
echo 'close';
( {' t; o9 o; i/ K9 S) \
});3 V' K8 G8 P! m, k
% `5 a. R, t7 a s7 Z
$serv->start();" a: z. \. _& B( h, c
# m5 T: p0 K* O2 l# o8 z7 ~ m( A

复制代码

主播客户端

<!doctype html>5 N) @: w/ I. H
<html>
9 j4 U+ z6 S9 x3 l. R
<head>
& f& ^3 `+ I4 ^ x! S
<meta charset="utf-8">; o* _; z' k- L6 c. ]1 s$ S0 R
; H- s, F" c- x3 e, }6 C$ m
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- x/ Z9 i h: Z# k/ \1 p& r4 h
<title>404</title>
2 h' L- V9 O, W3 ]! [/ E! b& _: B; g, B
<style>) B# }3 e) `- ^# A( I# Z
body{
1 D0 N; |4 Y/ N; K
background-color:#444;
8 x2 {8 X6 {; o. A: n J2 H
font-size:14px;
4 K% t* r+ h3 n. E
}) U1 @, X% i6 n. `
h3{
! L% O; Y' F3 [$ X0 [: u
font-size:60px;
; @4 O$ j! [6 N# Z d0 J
color:#eee;
% n: L# a% u6 B7 u. J1 P
text-align:center;8 z3 Z! b* o y1 v1 l9 j l) e
padding-top:30px;5 F) B: X7 i2 @
font-weight:normal;2 f$ a6 G; U4 _# s, y A- t# G* s
}
" ^* Z& o; D+ T3 a7 `; V4 H3 @
</style>
9 M3 Q( V: U/ r1 s& X. \4 c" s+ y
</head>8 T! A: X/ U( u
; u2 y; H% I, w4 W' c) m
<body>" A% L/ r- V* t: x
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>- ~8 t& q* J, Y; L# ?9 L
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>6 L+ u" _* A0 G5 f( c0 `
<canvas width="400" id="canvas2" height="400" ></canvas>
% F. p8 s; V, V2 H R' D# e9 K
<script>4 i+ ]: e/ V0 H# L/ K. K1 P
var video=document.getElementById('video');. X( a7 y2 B: n5 Y: Q) h
var canvas=document.getElementById('canvas');
( i) N& h& h! L) m# K4 z
var canvas2=document.getElementById('canvas2');
% o! l( N* u* l/ P+ \: D; d
var context=canvas.getContext('2d'); e3 D) `1 c9 u8 H; s
var context2=canvas2.getContext('2d'); |$ `, ^: V6 V; `2 {0 Q6 q
function draw(){
2 Z* R& P% M6 a/ z
context.drawImage(video,0,0,400,400);
4 E* i9 f R- e: C/ w
ws.send(canvas.toDataURL('image/jpeg',0.8));
, l$ q$ C. y2 j; Y
setTimeout(draw,800);
! x1 V! l5 y5 e$ g6 K% Q8 i9 \
}
7 c6 m5 C6 s1 u4 h' p: P) q
5 ~8 _9 U9 n+ K4 \( o) D2 k
//客户端跟服务端通讯
7 S% F1 h4 N$ F7 n& B; \
if (window.MozWebSocket)# ]9 Q5 g( {+ ^0 z2 |& e% h( M
{
5 m4 J u. o1 j- J( ~2 `
ws = new MozWebSocket("ws://182.61.42.187:9501");. `4 h y" j2 O! X k j0 B
} else
; g3 j& ~- e0 i; @6 q r
{
& \. d& L8 J! s. D
ws = new WebSocket("ws://182.61.42.187:9501");0 N+ V% Q6 h E' p
}+ Z1 a- F' H& [4 L5 T2 Z0 z4 J7 M
' p& `- u) H7 B& Q6 Q" a$ i1 ?: \
ws.onopen=function(event){
( d Y2 O& k' o4 d
alert('连接成功');
; C! D1 [7 h, ^; h5 O
ws.binaryType = 'arraybuffer';
5 n" {- J2 w! J0 T+ _$ U K) q
draw();+ C+ T6 |$ O- k' l* L t$ [8 [* ?
}; n$ v( k/ h% g
ws.onmessage=function(event){+ n/ W, ~! \& V) m6 E
//alert(event.data);! t5 i2 R9 f) C Q3 }8 M c2 ?
//ws.send(event.data+"client");+ `2 I( @* @4 @7 Q. x' a' U# \
qrCodeImg = new Image();$ q' F0 K2 o# U3 ]. ]7 _; A
qrCodeImg.src = event.data;
7 e. p* W9 r9 x* w5 g+ @
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
/ Y0 R9 j; h T& ^! M% i
0 h) }8 K: M) b* C
}
* y" E$ u! o& P+ ?) E
ws.onclose=function(event){8 b' d. R' C; U; `
alert('close');4 ?5 d% x& K- @# K9 Q
}
# t- R' h7 b, l4 R# \
ws.onerror=function(event){$ I; N2 @& m0 G0 P
alert('error');
$ ]. [' L; o% h( Z/ P- V+ Y
}# y8 h) {, h' O0 I
//video，标签模拟视频& b/ a, U9 x8 c {4 m
8 b% [+ G' D3 X: A
</script>
2 ^1 L' S: f0 W' [- X+ r! }
</body>2 A8 l; m, V' l, P( G! j
</html>- a7 v$ ]9 u$ o# ?. x$ }. o
: A. L/ r* r, W; `$ F8 S1 A/ r4 o' O

复制代码

客户端：

<html>" G% J5 Q; d+ e2 g
<head># Q3 a5 r" x( m- l; W& u, R- c
<meta http-equiv="content-type" content="text/html; charset=utf-8">& V! j4 H" K: B# {" x5 L
<title>客户端直播页面</title>
( M, n7 }& k/ r
</head>
5 _" \. l6 ^! I
<body>% g' h. x( G( t+ \3 I# c
<img id="receiver" style="width:720px;height:480px">
y& G. @- A7 E0 I
" k& {+ ?; L- I
<script type="text/javascript" charset="utf-8">8 Y" x5 |0 Q% l: l) S2 T5 o
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
V1 q O5 v" t
var image = document.getElementById('receiver'); k+ o9 A R( m7 T' I; R ^
receiver_socket.onmessage = function(data) {/ l# f/ J' n/ S% [5 t' d: b
console.log(data.data);. B- Q; D/ ?+ z' i" U
image.src = data.data;
& |$ j% g8 h: k5 U% Z) U
}
3 i$ |1 K9 i+ K( K8 C
</script>$ D: U) g* _3 |8 u
</body>) w* J* x. V* E, u+ Z/ N
</html>5 I) k Y& j6 n0 t( z4 Z. `4 k
" h) b8 _. _; b3 x; |) v9 g$ e3 S

复制代码

帐号		自动登录	找回密码
密码			立即注册

[swoole] swoole视频直播（记录用 未测试）

[swoole] swoole视频直播（记录用未测试）