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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
% {8 h- E$ T; x% B
$client=array();) D+ E; o& b+ y7 `5 M3 Z
$serv->on("open",function($serv,$req)use($client){
1 f' j6 }# z. l( S* \0 p) G
//echo 'connect'.$req->fd;) m$ R$ \- u8 I" l8 f1 q( T
$client[]=$req;2 U2 h7 [7 N8 @1 w$ c8 b
//var_dump($client);% e! d5 {( o* g3 w' Q# M" ^
$serv->push($req->fd,'aa');& J4 ^6 C% u" p7 _: e |7 \) V
});
" C, I% f* x, K9 B5 w
7 e1 Q) H; E* u6 p, h4 ~ ?
$serv->on("message",function($serv,$frame)use ($client){& S& q9 t+ f- f! ]
/*var_dump($frame->data);$ c7 n0 l6 ]- @0 z" o; O* j
foreach($client as $key =>$val){
9 e: g1 B9 G% }$ O3 e/ }9 w7 F( x
$serv->push($val->fd,'aa');! L# H0 k6 R. R3 \; e
}*/
: L- P$ C; S8 O
$client=$serv->connection_list();
! z. ]8 H4 C9 f0 @1 r9 c
var_dump($client);
5 c4 G9 t+ C7 u3 J, E; L! r: G, f
foreach($client as $key =>$val){' S s. u6 p5 |
if($val!=$frame->fd){& W2 l% M5 v: P4 o# b* Q. t
$serv->push($val,$frame->data);
1 |! r3 o; R7 T# k0 Q/ Y9 D9 @
}0 v, C& f, T: M7 ^5 u
}4 H1 L9 Q% l: K1 Q Y
. z9 V, e6 F# _& T) i2 _
});" r% M. x0 S ^2 m% [* o) a f
. B! o1 t9 ^; L7 b; Z
$serv->on("close",function($serv,$fd){
# m" Z; B0 z/ v8 J" W2 ~' l
echo 'close';$ s1 `; O5 K ~9 {7 ]' |
});
" k$ C& h( {$ t/ ]
' a+ ~3 w; a. U7 ]" A# }& }; c W
$serv->start();
5 m! y; N( \: D
; {5 C3 Y! a3 `0 y/ p! C8 k# ~

复制代码

主播客户端

<!doctype html>, Q2 V4 ~6 I5 M2 v' a% Q$ Y- {) w
<html>$ N# V* l& y) e6 x- f9 e
<head>' o0 l1 M2 K' @( E3 b, d
<meta charset="utf-8">
$ [: P2 p* Q* E1 d
, F! R. \* O$ q$ _6 d
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- [1 p6 F% Z- L6 h& p
<title>404</title>4 Q" J2 T) e% J) l. G& q
<style>
7 a: p( f: `* G- [7 Z
body{! M7 s( U" N3 V# X& U: k
background-color:#444;
' k5 G: T0 f& i8 x0 l
font-size:14px;
9 O! F N* V! }5 L5 X# d
}: T K! O; X( o8 F) P
h3{ ~. U4 u+ |4 s* v4 b* q! I# D. [
font-size:60px;
. z$ ]- i! l. M6 A. x5 `
color:#eee;0 U/ T/ l% s& ^
text-align:center;
1 H( w2 N! `) [* r
padding-top:30px;
: q8 ?" b# R+ N: M- x2 [3 O' u
font-weight:normal;
1 p/ M) P6 Q* V" w
}4 P( p4 f' A+ ~0 J5 ~7 L* n# k
</style>7 w) r3 E) ]8 g' [' [1 R$ j
</head>% h* N C7 O/ W e+ s5 L+ y
" P* W1 f/ c- L* u; f+ T. Z4 B8 l
<body>9 {9 D0 Z. I5 Y% y
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>2 |; N- U9 s# l3 i1 a# _) \* ]
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
. W- [( ]$ }5 N9 q7 E' J" _6 g
<canvas width="400" id="canvas2" height="400" ></canvas>
$ r, p7 S6 b$ v$ S6 }, [4 ^
<script>! p; q4 }% m: i! h
var video=document.getElementById('video');
9 P5 O2 a. [% h: D# m3 M; M
var canvas=document.getElementById('canvas');
' F* o5 |7 J* G7 d
var canvas2=document.getElementById('canvas2');: v& A4 \: K# q3 W- o
var context=canvas.getContext('2d');
) P/ P" Q- g5 ?6 {2 M7 A
var context2=canvas2.getContext('2d');
2 j0 c8 k8 F3 ^' F( J7 O1 M
function draw(){% k) R* {* U4 D7 \3 Q
context.drawImage(video,0,0,400,400);+ w. Y# Y. N' G! N) @
ws.send(canvas.toDataURL('image/jpeg',0.8));
; W p$ ^! |6 f( ~
setTimeout(draw,800);% l* t" ]- a" w' U" d' s+ s N
}* k" G4 |! d/ H c) k9 [' a
- A* a' U1 m W3 e
//客户端跟服务端通讯8 C/ G5 `( C w. @
if (window.MozWebSocket)8 E0 h' W. p" b6 }
{
) r7 V% I% }$ M+ n& g/ W# Z( H& {5 G' G
ws = new MozWebSocket("ws://182.61.42.187:9501");
$ c7 p. X+ y( U4 L, @ X) C
} else
. h# ]+ C* w" k- v
{: Y! P, w6 \; b+ u4 P
ws = new WebSocket("ws://182.61.42.187:9501");, E, B+ _9 }' K& Y( a' o
}1 Z7 D# T& _: J* M- \- S; j' s
, d1 d. Z( z9 @- W7 W
ws.onopen=function(event){: ~7 i* |# y. m% _
alert('连接成功');5 j' F- D- }: q1 [
ws.binaryType = 'arraybuffer';
9 ~0 g& f9 v$ M! x4 Z6 ^
draw();
: r" k) W0 C) U3 {
}' V' a2 n/ O- R6 B* y7 h
ws.onmessage=function(event){
9 V5 ]; q% J$ s( u: J9 F
//alert(event.data);" b. [* j- x1 ] l* l8 r- B9 ?
//ws.send(event.data+"client");3 K6 c% E+ p) ?7 @2 ]$ E2 ?! n
qrCodeImg = new Image();
! \8 m8 S( a( @" W0 V+ R
qrCodeImg.src = event.data;$ {' z1 D5 V' u4 S: Y* K
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
: i- A" `: u' U4 H( \: t
+ \" F" P( ]- W7 X: N+ h
}' k" m M1 d8 x, ^
ws.onclose=function(event){1 C' H1 w/ r3 ~, }: N# v4 J: p
alert('close');
; B; z2 o/ g- \4 S
}
* Y9 k4 z! i6 C8 a: k8 U
ws.onerror=function(event){
1 {+ Q. a5 T. ?; m$ H
alert('error');
}- w+ I+ |! W, {1 T) g3 a
//video，标签模拟视频
2 h" y9 `( F& d
: W9 a* P+ y+ ?6 O F ~& {
</script>
5 K% r0 |& d. X/ ~6 _3 ^/ M" D
</body>
@3 v$ m8 E) s# W6 ]
</html>
; l9 E0 z4 V4 S# r
6 W' `5 @) O# S- z* Y: H, R# G

复制代码

客户端：

<html>$ J' A7 j3 S2 i( U
<head>% O# w& Z: ~8 Q! L6 B. H' T
<meta http-equiv="content-type" content="text/html; charset=utf-8">
7 @+ w# P# C6 W- J, x5 k
<title>客户端直播页面</title>+ y& n" `' t+ \/ D
</head>
) F+ t, M" N2 ~% i8 |& _ P9 g" e
<body>
* ^5 C) \* N" O- g
<img id="receiver" style="width:720px;height:480px">7 I0 D. n3 v' M7 M" T: x' e3 u7 u# {
2 y( @' T p3 u$ \+ b
<script type="text/javascript" charset="utf-8">
! y0 F) T) h. U( V) r2 b! g
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
3 b! |1 [& [! x: S, _8 i( B9 H
var image = document.getElementById('receiver');% ~0 I2 H! C# r9 [% ?: z' ?0 V% t* \6 k
receiver_socket.onmessage = function(data) {9 m$ K$ h+ q( T
console.log(data.data);
+ b& V3 f+ s) m& }! \& \3 M2 v$ h
image.src = data.data;
: T2 k# Z" J m+ F9 q' _
}
# j) s7 q& C7 _: v3 K. l
</script>
0 ^( Y$ c2 H$ W# t9 ], L
</body>3 G5 L2 K! r! X7 [/ ^5 C- ~
</html>
: I2 G& j' _ W& }8 `. T
! e. {! l% T8 p8 I6 C3 X

复制代码

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

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

浏览过的版块

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

浏览过的版块

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