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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);2 w% f" \9 \4 c
$client=array();2 ^1 z5 y+ V) c
$serv->on("open",function($serv,$req)use($client){) h) m" f/ U! q. O+ Y
//echo 'connect'.$req->fd;/ n% G A3 y9 [3 N# q5 G
$client[]=$req;2 P, Q6 J1 Z: c+ n; U. `6 `: ^5 w" j
//var_dump($client);; N4 W6 v& g+ m% t; X2 a0 ?$ N
$serv->push($req->fd,'aa');7 o+ ]9 O1 {+ @) d3 R. b( g
});2 B* U( s5 K+ d2 N+ H
% O6 n, G/ l5 J" P& m
$serv->on("message",function($serv,$frame)use ($client){
0 U% t, w% G6 H! n+ B
/*var_dump($frame->data);
* j1 U4 u& n; Y ~0 G
foreach($client as $key =>$val){
2 O1 C: R' i. c# ?! D9 c
$serv->push($val->fd,'aa');
& {- E7 l) ]* _/ C0 V# Z
}*/
" W' J8 l+ o! j9 r
$client=$serv->connection_list();2 c& P7 [& `; M( G+ Z8 U9 W
var_dump($client);
6 h! y' Y5 f) J h% ^- `2 y
foreach($client as $key =>$val){& q3 Q9 E5 n+ q9 {3 \
if($val!=$frame->fd){
! }9 H" @7 r0 u9 S) @& c
$serv->push($val,$frame->data);# |4 s. g' e3 I0 I7 N6 B' ~; b$ F$ m
}, y; M6 e. I, A! B2 G" b2 S, S( W
}4 g" @% S q) [7 w ]
) Y, K0 A0 _* F$ V' U: {7 w& Y
});
/ O+ v" O& x# g I; L; ^7 f: t6 Y
: k; P( ]* q" ~8 ^& @( g
$serv->on("close",function($serv,$fd){& U- Y, }$ n% x
echo 'close';) Y w( N8 {! f) d! y' t# g. Y
});! `0 K. S8 V& K$ J. v
& a L) _2 i- @% a1 Q
$serv->start();
6 L1 z5 A( I E. \
+ O n1 q4 z0 c m; t0 l# p

复制代码

主播客户端

<!doctype html>) l: P/ Y5 K$ T4 _: X: u$ P" S+ ]
<html>* ~0 S) }: `6 X- ~% }+ [& \# {
<head>! u7 Q5 ]3 X- @ ?1 R6 v
<meta charset="utf-8">4 I% @- h; |9 S( g, P4 y
8 x; _+ ?9 n7 a; i- I" C" j" k1 f$ W X
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
* B& ?+ a& E7 W# `3 \" X( U
<title>404</title>; ?: ] B- d6 }' r# H
<style>
( f' R8 n7 ^, M, @3 e6 H8 C
body{9 B3 Y; ]- @+ F( ^- }* ^; y
background-color:#444; r; l/ S; K3 Y" r) x
font-size:14px;1 r) E, R% h$ y ]2 \( g
}
; x5 ?0 t2 H+ ^/ P9 J* V# }5 K
h3{6 b0 \$ n. t2 e
font-size:60px;
! b) O# |4 H$ Q
color:#eee;
# E/ B$ I2 l9 a% Z# }
text-align:center;
, t* Q6 u# j* f0 F7 G" D
padding-top:30px;9 t, L% {, [! B6 K9 x' r
font-weight:normal;
# i. X8 n+ F f- Y6 ^; X$ J
}
- {+ g% j& Y8 I+ n! P1 w* R7 Y; g
</style>
* G2 l2 j z7 l( n& Y
</head>
( Q4 m- _: @6 L( F0 ?9 l
6 D) ~1 x; [% G# j! ` t
<body>
, [: o. J {- m: _( U8 P
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
- Q1 U: ]+ g9 T
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
6 ]; V/ e. u; s# r7 q) q$ f. \& |
<canvas width="400" id="canvas2" height="400" ></canvas>1 _8 W" A2 K5 _7 F+ v' L s
<script>4 h' S( k: O% O0 v" A& J! @# I; L' X5 C
var video=document.getElementById('video');9 A. y! C' E+ N. W
var canvas=document.getElementById('canvas');
9 e A) g) [. c6 ~0 q' i2 R
var canvas2=document.getElementById('canvas2');
$ G C* T1 D- z4 Q9 J3 \
var context=canvas.getContext('2d');: E: i, u4 n9 J4 R; \( j, @$ Z& ]
var context2=canvas2.getContext('2d');
( j p: ]" N8 X- l+ ~! k2 G
function draw(){
) O, y* L! S. f9 |- ]
context.drawImage(video,0,0,400,400);
; N% ^6 D; L: {6 o( [
ws.send(canvas.toDataURL('image/jpeg',0.8));9 F% A( o" U& P9 x0 y. B# \
setTimeout(draw,800);
0 W4 g/ Q# e1 `; ~: N) ~
}8 B. p) q# Y. T/ K# ^- G3 f
4 X8 g! M: A# V; U( [8 y
//客户端跟服务端通讯
' f0 Y* @4 u- n) K# E" W
if (window.MozWebSocket)
$ M( ^9 A$ p# J
{
V4 F0 J6 [5 k$ W' h
ws = new MozWebSocket("ws://182.61.42.187:9501");
& r6 u. W. h" {$ g2 U6 `( z
} else
* T4 Q1 R: }: Q& f
{/ a" Z4 [3 C# m3 B7 Q
ws = new WebSocket("ws://182.61.42.187:9501");" t; Q! v' v: F: r
}
5 L1 e8 _" f; c/ A! K6 v0 [
. S) T) I, [3 }3 `* d( ^4 X3 S4 V' \; M
ws.onopen=function(event){
* J3 L/ H& I! L$ z) S
alert('连接成功');
2 l' x& _+ _+ m
ws.binaryType = 'arraybuffer';
( D) d. r2 ~, t$ F% ~
draw();
2 E+ m$ _0 r/ m4 X7 t+ `
}# t2 J4 v7 ~+ B1 |8 [8 J4 {7 N+ s
ws.onmessage=function(event){! n+ ?& e8 N- |$ N5 a; H& V; D& A
//alert(event.data);
+ m2 q O* W: C& s' W" \3 w" m s
//ws.send(event.data+"client");
5 L! J- @* `0 E% d9 a& j7 X/ e
qrCodeImg = new Image();
% R! P6 e' w% J' w+ Q5 z' g+ T
qrCodeImg.src = event.data;- ?. _5 Y5 E( S1 y+ h, A! G: q
context2.drawImage(qrCodeImg, 0, 0, 400, 400);$ b* W& |/ W% F& k( x
+ _7 e. R% s( O# i9 Z/ U: O
}8 w7 y8 Y6 V, |) {2 c
ws.onclose=function(event){
, L6 o8 f3 ^8 f; e$ |) B8 t
alert('close');& |) C) w! @9 y+ M% t# r- V# H
}
: Q5 A `0 E8 ]7 s& x; N" r$ P
ws.onerror=function(event){" C: n' r ]4 W8 B7 j
alert('error');
/ J( I( [# n3 i n& w
}
) @. _7 ]/ d9 m
//video，标签模拟视频9 ?6 O8 z! U8 a) F9 Z
& ~' y0 m( S+ L9 O: x
</script>
7 f# ^; z+ {& r
</body>
5 K9 v6 k3 g1 g6 V7 o3 h1 j: H1 {
</html>3 s) ^% ?% H5 @2 m5 [; H/ R* s
* v Q8 @5 h g/ A0 t/ [$ M

复制代码

客户端：

<html>3 v, b0 X# o1 z; C# N
<head>
5 E+ T- e! p9 O8 Y) g
<meta http-equiv="content-type" content="text/html; charset=utf-8">
M! t+ d( ]- e: m, W( \
<title>客户端直播页面</title>
- x* ^) K! f# J# p& y. v
</head>/ e* y3 ]" G% _2 M
<body>( t& A/ |+ C( z7 K6 E4 P
<img id="receiver" style="width:720px;height:480px">; i3 f; r/ J0 x: D2 s
6 N* E' G1 F; L- g; ?8 N! n- y( T3 x
<script type="text/javascript" charset="utf-8">
! x1 y1 E w6 y8 A( B' Q
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");9 F( S0 b* n/ t! F+ K
var image = document.getElementById('receiver');8 I1 f. G- s) ^ e- t
receiver_socket.onmessage = function(data) {+ W# c* W) j8 X: ^; P% h4 T* p
console.log(data.data);
; a+ E" x' _2 N M- i! ^; h6 }
image.src = data.data;, S) b b: a& I+ w$ p
}/ `) ^1 k4 T" H2 G) K
</script>
8 B& F7 S9 a' A
</body>9 ]) w. n" }5 g* U* B5 { U6 b* b
</html>
( j, V3 J S' \9 L7 S
* Z6 n4 ] T4 w0 e, o s' a4 W

复制代码

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

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

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