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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
: y9 s# W# B' {
$client=array();9 |% S8 g# z9 d7 l b. @
$serv->on("open",function($serv,$req)use($client){
( {; b* ^4 H' ^+ @. T$ w1 `
//echo 'connect'.$req->fd;: _9 w& {3 q; |% F3 t2 r
$client[]=$req;
. s! V1 G' A! @2 C3 c* ]
//var_dump($client);" [8 m; }( `3 n8 |
$serv->push($req->fd,'aa');
7 L, X! S2 Q& l$ {6 w: q
});% o% d$ m% T& ~/ Q- |' h
% X: l) G7 @' O2 Q, N) T, e
$serv->on("message",function($serv,$frame)use ($client){
8 J) o7 N/ I* _9 Q
/*var_dump($frame->data);
8 C: A% W9 z- E4 K7 k. d" a
foreach($client as $key =>$val){/ A9 G4 Z5 ~! h
$serv->push($val->fd,'aa');! K; \; B- u) \9 n C
}*/4 b' _% Y) t5 R$ q. T/ p+ m
$client=$serv->connection_list();( C: O3 j8 c0 I* n1 `% z3 o
var_dump($client);
* m& ~! x; r; n$ W6 e$ e% t8 O
foreach($client as $key =>$val){
) k) [% p- Q$ }4 l
if($val!=$frame->fd){
: G( p) |1 \7 z. x& K
$serv->push($val,$frame->data);4 V5 z+ N* X) \( m# L C2 P7 d+ B
}4 D- H$ A% g+ Y4 h5 G) P
}" D) a& r! M. K& |1 _4 i0 j
9 @8 l8 j; i6 ]. c0 D
});6 e ?8 z' p$ L5 o. p1 p
) }' K$ N1 t$ d( f) w# Y, n6 Z
$serv->on("close",function($serv,$fd){3 a0 v( P4 z) H4 |& _# N8 X
echo 'close';
0 @) k# g- s6 ?' S" M9 U
});
$ d7 c/ K' e- R+ g
, ^# V$ v& e5 f8 S' P+ w. i* c
$serv->start();9 b$ v. m' X7 D; m! l
$ ?/ M7 U) U" h I( T% E5 K7 ]

复制代码

主播客户端

<!doctype html>
, ^4 g0 I3 L8 O
<html>9 b7 d" g. c! A k
<head>+ b" {9 X* I$ g+ _/ u3 L
<meta charset="utf-8">) Y% o8 I5 M/ A
7 m, K1 I3 G) q# R
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
$ `$ r7 L# {6 d$ O9 Q
<title>404</title>
" A% @; a3 E2 b- X0 z/ n
<style>
1 k6 x L# k7 z _9 l; z
body{) ^. t2 T+ ~4 y3 V" [
background-color:#444;0 r: j; ~4 h# y( k k
font-size:14px;
2 ]8 e- R/ ~1 T6 J' W* D7 ~# j
}* D# @9 `. Y) y2 d! K* G
h3{
4 Q8 ~9 z5 w( V
font-size:60px;
$ O0 l( \1 T: \% b& p* g7 r
color:#eee;. S. n6 y, ?+ g" g$ P# f
text-align:center;: I7 h! G$ d6 k7 i" L' a& g
padding-top:30px;
$ y2 `, [) k( @" {, q
font-weight:normal;" q0 r) Z/ f4 x u. U
}
! b9 w# [, |. _( o7 I* `
</style>
) K+ i! x% k2 t
</head>
6 k: H, V9 D5 ~: p
& i1 t& o7 ]* W) \9 v. r8 X
<body>* D0 e9 c( a5 W9 }
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>$ @0 ]* T* K1 _% y$ R# Y
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>1 w ?: f9 w1 L0 B5 R* U
<canvas width="400" id="canvas2" height="400" ></canvas>& b! [: I {3 t" ?) S2 n# Z
<script>
% A& V$ F9 Q" n, ^3 T3 Z
var video=document.getElementById('video');
3 z0 F; X- h2 ?8 ^- W
var canvas=document.getElementById('canvas');
2 a4 z S; M- @6 K. ^5 {4 G
var canvas2=document.getElementById('canvas2');- i: b. q! _# C. E* m
var context=canvas.getContext('2d');
' o h: G: ]4 U1 b$ @! c
var context2=canvas2.getContext('2d');
+ I- c( N: Q2 |# f
function draw(){* U1 x3 y. M- o, {
context.drawImage(video,0,0,400,400);
7 y+ f: Q0 H7 K# _
ws.send(canvas.toDataURL('image/jpeg',0.8));
6 z3 t* f ?( k% Y! }: l
setTimeout(draw,800);
5 u* e8 ?# { I9 {
}3 f" {0 |/ C1 D
# L4 {3 E8 K: w1 ]
//客户端跟服务端通讯
9 k4 j( I4 q& H2 L( a
if (window.MozWebSocket)
. \( M4 l m- n5 b3 j
{, N* M5 f' ^8 S5 P) M- B
ws = new MozWebSocket("ws://182.61.42.187:9501");
; T! X( h2 N* Q, h/ d& F1 J# V
} else0 M% L) b0 {9 Y
{
" Q. x1 U3 @, Q; H
ws = new WebSocket("ws://182.61.42.187:9501");
! l5 `7 r. h ^
}* w' G6 W& j3 Q# L! Y4 u
% L1 J2 @& w/ I! I- D* b4 b$ R; |: f
ws.onopen=function(event){
& z9 S# P$ x* ]3 ~6 {4 R3 X
alert('连接成功');
$ _ `' K! o' Q9 M" {* \; y$ u
ws.binaryType = 'arraybuffer';
8 y8 E1 W8 U% V* M# y
draw();* `! s% T4 v' H; d5 X
}
* v5 `5 N! I* _1 h$ w& x9 z' f1 V: f
ws.onmessage=function(event){
# A0 T& o+ o4 J8 W% v2 X& ]5 Q$ Q
//alert(event.data);: F" K. c; e( c" {6 X
//ws.send(event.data+"client");
! ^- [7 m4 B" Y/ g, d
qrCodeImg = new Image();
/ I2 ?, H( ? @3 N1 n4 a- U
qrCodeImg.src = event.data;. J" v. E/ L7 `: R- q( v
context2.drawImage(qrCodeImg, 0, 0, 400, 400);, j% P! _, k9 _ c: x, V# g2 O
2 |( Y- l: `9 K6 q! N5 l7 ^
}8 k. m7 Y* I6 z- F5 U1 d
ws.onclose=function(event){
) y$ A* p) R. ~* @2 e
alert('close');
* `" y! M- D( N4 E! V- ]
}
( f6 S: p0 u6 j& `/ @
ws.onerror=function(event){0 G6 j( G1 q' K/ h# q# [2 d
alert('error');
' S$ }7 i# R/ D' t
}
6 u7 j. [4 `# O5 V
//video，标签模拟视频
8 H" V4 k: N" I* n0 ]" L
. S. {1 K9 M& e; l. C* ~7 T Z
</script>) |7 _7 G8 L/ s
</body>
8 [2 ]3 ~% K' Z
</html>
4 ~ M$ P! r/ I7 j B/ T2 V
, ]% U: s% {. {4 s

复制代码

客户端：

<html>
i8 V+ Q0 C- N/ ]9 Z
<head>
- }. U! ^ F9 M! Z0 a
<meta http-equiv="content-type" content="text/html; charset=utf-8">
' U4 N6 h& A) _
<title>客户端直播页面</title>4 V. h* r$ e7 |3 B# n( W
</head>
/ f. P7 u5 B9 l2 j' B0 [# E
<body>1 i3 w9 a* ~' z! H$ n( @
<img id="receiver" style="width:720px;height:480px">9 d- v1 {2 ^' R8 V* t
9 u# G# q# o/ o0 _: C
<script type="text/javascript" charset="utf-8">3 h$ ^$ h, A! [3 L- M
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
: |. y5 G ^% G3 _) W4 P
var image = document.getElementById('receiver');
* q9 U. V( k9 E! n# o) e6 x c
receiver_socket.onmessage = function(data) {2 }6 K# b9 {: V# w4 U
console.log(data.data);
7 d, Y- f2 l- ^/ {$ H/ p9 M) d
image.src = data.data;5 A: F# b( f: A9 j1 `8 N
}
1 i" {+ ~' x7 J8 v
</script>5 }: L3 F2 Q! J, k8 {" R
</body>/ R3 M8 t* }, w: z3 `- i
</html>9 P, @3 }" \3 { L( h2 z
: [: N' _. w& S0 X" Q

复制代码

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

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

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