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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
5 N, \$ u8 \4 M$ F! t! P6 ~" ?6 [
$client=array();- [# s1 Y/ w8 h5 S- D. g3 f
$serv->on("open",function($serv,$req)use($client){; B% \, j( I+ x0 B. R7 ?- M- e. }
//echo 'connect'.$req->fd;
) H# U" u) I% V5 {+ g; d9 s9 F
$client[]=$req;
0 c' L& a9 M X. }. D
//var_dump($client);
4 e; `2 k2 P% W4 `7 c) A
$serv->push($req->fd,'aa');4 V2 M2 A# W# ^4 r+ U2 V
});
) t. B, b0 V; D' ]4 t: }! B
! ^/ H& X5 t! p: N# ]
$serv->on("message",function($serv,$frame)use ($client){4 @+ u% Y* D; e- z
/*var_dump($frame->data);
2 h5 `& d: G- M+ v5 C! K Z
foreach($client as $key =>$val){2 c, f: R2 ?( O1 H3 k! v7 O" J2 T
$serv->push($val->fd,'aa');- ?7 w% O4 B% @% S! B3 r
}*/ ~2 O2 X8 {* N f3 O% E
$client=$serv->connection_list();
) L1 E6 g, X# \2 F0 }* Y4 G" }
var_dump($client);' w& k+ R: l7 ^4 h: j4 U# n/ U
foreach($client as $key =>$val){
7 V6 X \' d5 X2 j' _
if($val!=$frame->fd){
. ~( V, m% H( |* ` I1 P9 n G
$serv->push($val,$frame->data);4 ^/ B6 \3 J3 p/ z8 \
}0 C# M/ l6 p1 O& D1 h
}6 Q) F# ~* [5 a. B G
) k3 B/ x3 T, c) _; V' Q( ]
});
4 p! U4 \9 K5 H8 r- K7 H0 r
* @7 d1 M' O" h, r% w0 s+ q1 n( h
$serv->on("close",function($serv,$fd){. `" @% o" w0 b7 @- c" _" @
echo 'close';
) N( ]4 C, j) [+ _: O+ E
});
, I! \0 J" r& O- D3 {1 e
/ w4 X+ B! }7 L& P" h: D
$serv->start();
9 i" Z* y( s, B3 e0 g" h! p
) q1 {3 N" M7 J- |2 f

复制代码

主播客户端

<!doctype html>' a0 L R8 Q; i* [2 o
<html>' V- G+ \/ R7 J% s$ u2 `( L3 [* N
<head>8 B9 W- S5 u! L5 o$ l
<meta charset="utf-8">+ ?2 C: D* P! _& O3 a8 t
7 r* }3 x5 P; Z1 N& H
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
( r& t& D3 D0 ]& D; x; I) O
<title>404</title>
2 j9 E# I) t! |# j% T3 U! x+ j
<style>; L+ H. i! t& f, {
body{6 y y. |; b: z7 @$ t, H9 @
background-color:#444;
% e4 f! l* M2 W# r, Z
font-size:14px;6 s- [4 q, s' K6 G+ D8 H
}
2 P! {" K* W! |4 Q- j) j4 k
h3{0 i8 i( [+ P4 S g; o
font-size:60px;6 H( t1 |9 ?7 P$ w/ u
color:#eee;) v' G8 a. ]4 t9 O+ \$ i$ l
text-align:center;
5 C) p7 o! l$ `4 ^, _
padding-top:30px;- W- r' q+ H1 M5 R5 N
font-weight:normal;, Y- ?, k E5 t' S
}+ }6 x' f5 T. p) G' e- A7 R4 e
</style>6 _* C4 Q! b; a i/ {! [4 c
</head>; Y# X2 f3 s) Y. F, S
( V+ \0 u X1 \4 b- G8 L
<body>
& \5 A: z; f7 c4 x
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>: Y) R3 X [1 F, o9 t$ ?
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>$ z: O2 K7 z" F: T* h# _' d* n
<canvas width="400" id="canvas2" height="400" ></canvas>6 I5 x) H) U3 `# _
<script>1 h' C" S5 c5 {6 G
var video=document.getElementById('video');& W0 [, L; F- \0 u, { x
var canvas=document.getElementById('canvas');
+ E7 `! o( ?3 {% \9 x
var canvas2=document.getElementById('canvas2');
* X1 }" a' K% d0 i* b
var context=canvas.getContext('2d');
' ?3 t7 a* ]. n/ J
var context2=canvas2.getContext('2d'); J5 D0 Q3 r+ D" [ }
function draw(){9 |0 z' t- _% M. x2 }3 d ^# f
context.drawImage(video,0,0,400,400);7 Y4 Z Q! C) z. o
ws.send(canvas.toDataURL('image/jpeg',0.8));, \6 v7 j$ \6 ~; A6 y8 {
setTimeout(draw,800);
7 V9 g; D# n. s \6 M
}
/ w! ^7 B: ]" }4 `3 H! }5 R
0 }8 { L% c- o7 r: u6 b ^9 L9 F
//客户端跟服务端通讯& ^! k) N1 L' @' l1 K
if (window.MozWebSocket)
5 K, a( s3 L3 N/ Y7 u; X
{' c% X- F& Y' M' v; q
ws = new MozWebSocket("ws://182.61.42.187:9501");: R3 C1 t4 V9 Z0 ~' z `2 j$ X
} else
" e8 c6 e9 z4 c/ f, o# l
{% Q% M4 o. S' h/ P2 i+ s
ws = new WebSocket("ws://182.61.42.187:9501");; P- \% y4 F( G0 |. v6 u
}
* H/ s2 W) I( `% ~, h! N8 o ?
% ^# T, R( T: |- i" [& V6 |" N. X
ws.onopen=function(event){
) v0 m8 F9 l! ~' {6 @
alert('连接成功');1 @) u( M2 i* X/ P$ `- N3 m
ws.binaryType = 'arraybuffer';
8 Z- m- Z3 w; p7 F* k' k
draw();
8 G& \$ ?; s. J8 v" Y" D9 d
}# _, w) q( N% x/ Z' a
ws.onmessage=function(event){
! o. E1 i0 Y& G2 ~
//alert(event.data);
N+ W- I2 |- c
//ws.send(event.data+"client");2 e: j2 Q* [' `+ e' h# N
qrCodeImg = new Image();1 O# m+ ?* N7 z7 H
qrCodeImg.src = event.data;
; a% u+ T: M2 b6 j3 I, }6 v
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
1 V# A1 K% W- x( G7 U9 ^
8 y% I4 @4 }2 q& @
}) t! ]) b6 e; V, p3 [6 ]* p
ws.onclose=function(event){& U0 [; l" g0 q8 i' @
alert('close');
3 n7 D0 u: ]: M. g) P, E' I
}
# p) V* y! I& a# U `% |/ e
ws.onerror=function(event){
2 C O/ \1 L4 [$ `* {& j, Y
alert('error');
' Z6 y7 A3 w8 W* m9 P8 o
}3 z- t( I ?+ r+ _6 ~1 y
//video，标签模拟视频
2 H4 e2 Z5 ^- D+ x. U8 p U6 }$ j
! m, K7 M1 ~- S H9 Y0 d( D, O
</script>1 _. S9 c- P6 G& N$ V
</body>
) `0 C% n9 _9 g2 L K$ J4 d
</html>, p, C; A; L' a- F1 n: Q
8 R8 |; }" r# x& H! B8 L# u. L

复制代码

客户端：

<html>. Z+ F( I' `- M1 z. Y I# N3 ^# H/ m
<head>; U/ B- b3 b0 m4 E! y+ h
<meta http-equiv="content-type" content="text/html; charset=utf-8">, @. W) b) l- {, a* v! q- w9 |
<title>客户端直播页面</title>5 | g5 A* n! e* [# d3 x- o
</head>
6 g1 v7 T. f8 _$ K: b
<body>( }6 S% j& @' C+ k
<img id="receiver" style="width:720px;height:480px">- l# l% G( D) U, J# c+ p
) H/ k6 p" H" d% F
<script type="text/javascript" charset="utf-8">
1 E, ^" Y+ r1 i& c
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
( i* E# S* P/ ^: i
var image = document.getElementById('receiver');
) j. n" _) W. a6 R) Q7 v. `
receiver_socket.onmessage = function(data) {
! K/ P- |! R3 F! F6 l9 c2 T
console.log(data.data);
$ j Y9 y8 G, I8 j+ I
image.src = data.data;
$ D3 K j# ] R$ C S" u
}& y: U! r& F# u% E9 R- q
</script>
. j4 x. T6 i _6 u7 @- w3 Z( P
</body>3 I: }4 }2 |3 f! \( n
</html>, A1 v0 J1 A; l
4 Q5 f7 Q. H4 N' b9 l# A- b

复制代码

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

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

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