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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
6 N% h C4 h8 r: _5 A& i1 `
$client=array();
6 c& R; ?* n. q
$serv->on("open",function($serv,$req)use($client){
6 U# N7 f0 e; H; h
//echo 'connect'.$req->fd;: J" o; C+ h U s
$client[]=$req;" ^. w v# d, I, c( X; K
//var_dump($client);2 A- w' }1 l: z
$serv->push($req->fd,'aa');
4 V% C* B: y) `" L- ^( y6 V: M
});
( ]6 k( J4 J7 \% W
4 z& A7 r+ c1 W7 D% C
$serv->on("message",function($serv,$frame)use ($client){" F0 V+ K! V- J' i! _
/*var_dump($frame->data);
* T4 O* Z2 n; i6 f' R
foreach($client as $key =>$val){* v# G: C) r* Z+ n6 [) R7 P
$serv->push($val->fd,'aa');
, a: V0 g, B1 z- R! w( @% o- b3 e7 k
}*/* n" W$ y( w2 G' j% \
$client=$serv->connection_list();
2 k4 \! j) b: _! h% u
var_dump($client);! K# R8 z$ o' P
foreach($client as $key =>$val){* H2 e2 i* l. P$ Z* s
if($val!=$frame->fd){
3 u, U. Y) i! t: J
$serv->push($val,$frame->data);0 T, U- F0 @& o- {' _- }
}1 F) \) h+ ?6 `* n/ P6 E
}
( I4 o3 f2 R3 s/ ^9 x- q o4 Y7 o
# j0 `2 _2 |5 S* ~
});
. V9 k/ o6 P7 [& B% R* V, [& l
9 e- f7 m# G5 _& S2 d: V
$serv->on("close",function($serv,$fd){
6 | L3 m# y$ i0 _
echo 'close';
5 x) J8 Z9 J1 _' T
});' `0 W8 a |; s% {& B8 w1 I
: l3 h: E* t1 g5 R2 J, T, n7 C
$serv->start();2 F# h' V! Z f- U4 E
6 c6 {& _1 \- z- [

复制代码

主播客户端

<!doctype html>
3 G2 ~/ V' |- x9 I2 x
<html>
& D$ {5 _! ~& W) i
<head>( F' L& H0 o x
<meta charset="utf-8">
: W- M. \. q+ L. H9 k
4 G5 [. \! {5 [( C- d9 o
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">- C" \2 I+ R1 H1 a5 t) U% @
<title>404</title>8 E' b v8 f2 ^' ]
<style>) W$ u" h6 D9 J3 u' {
body{
9 e( C5 P" b& D, t% {1 e
background-color:#444;
# {1 u ]+ ], L: |
font-size:14px;( }! Z: N% N: Z0 N6 h$ p# N. W* f$ i
}2 q% A* g& E3 h" o
h3{# m1 F3 _2 M/ a! O- g( P3 F- z
font-size:60px;6 L8 z R9 ^4 L* | n% s' P
color:#eee;, j- y8 i1 w# j7 ^9 N9 H1 b
text-align:center;
- ^9 X5 R$ {8 Z7 X! O
padding-top:30px;$ q2 e. Z5 Y3 H7 Q/ d/ f
font-weight:normal;
+ N6 V8 i1 y+ @! O( J! f, P J2 I9 \
}
, E; Z( H ?5 ~' _5 ~% J. [$ H4 O4 x
</style>/ v& F! C4 O& O0 [5 g/ {" A
</head>
2 m7 @: ~+ J( S; J( S' M0 n6 ~6 p
$ F# @2 O3 J( d
<body>( U; A& y; `! w, `7 [3 V& X) ?' g
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>- X' C5 E: L# v7 e
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
2 L+ n. p0 v5 s" Q9 C& g
<canvas width="400" id="canvas2" height="400" ></canvas>
$ s/ }$ O1 X' L2 C9 q/ u+ T4 ~
<script>
) t( P( x5 o5 S2 G2 @
var video=document.getElementById('video');
; P8 A2 J5 F8 R, j- C0 T6 g
var canvas=document.getElementById('canvas');
! R+ d* L0 f. k
var canvas2=document.getElementById('canvas2');+ `, ]3 A- L: d j8 f6 D9 P
var context=canvas.getContext('2d');$ _( |$ K9 ]7 j
var context2=canvas2.getContext('2d');
4 C9 D0 ]: Z# W% J/ g
function draw(){7 q' [' E0 J' X) P: {
context.drawImage(video,0,0,400,400);
7 z N7 q& n5 [9 w) x" d$ t7 x
ws.send(canvas.toDataURL('image/jpeg',0.8));
. U' H% r- G8 R' I# f
setTimeout(draw,800);
9 [% T9 G0 Z4 H, T6 H; g
}5 }5 t' {3 i% a
+ E& D( h2 a& C8 V8 H
//客户端跟服务端通讯
! p! M. u P: y5 V7 }9 g! {
if (window.MozWebSocket)! l8 b" D" w$ i8 i
{# U/ ^8 N+ C0 F% C% a6 g. ^
ws = new MozWebSocket("ws://182.61.42.187:9501");( Y. b* N; `6 M% N/ y
} else* E; [: F- W4 W! F; R: h0 P
{! n# e6 z' Y) Q: O2 J3 J+ d9 r6 l
ws = new WebSocket("ws://182.61.42.187:9501");5 ~$ j q/ R3 B" V
}1 f8 ?. }1 b3 B8 x) D
# }, @3 z4 o& ?! B0 n! H/ d
ws.onopen=function(event){$ t$ i$ y5 e, L( x
alert('连接成功');
: v7 X# _3 d) D1 U3 U" n
ws.binaryType = 'arraybuffer';
d) h3 v( D8 U% r. a- Q
draw();& O0 S3 T+ E1 a' W" i0 \
}
- B: a5 U0 r7 n/ y6 {( w- C
ws.onmessage=function(event){
( ~6 _+ n2 R; H' Y
//alert(event.data);5 i4 V8 M" ^# t# j5 n5 [! s
//ws.send(event.data+"client");
7 X- }( V. H! ]* A' A* U8 m: a3 @
qrCodeImg = new Image();, y: H E# |2 }7 f0 n
qrCodeImg.src = event.data;
! W2 V6 n: r. B0 t' J
context2.drawImage(qrCodeImg, 0, 0, 400, 400);# H0 ^, o: ?4 ^/ n6 M2 t$ V7 v
+ Y5 z) T; c/ D7 [
}
& G) L2 ]7 Q" `4 O% k' l" B5 K
ws.onclose=function(event){9 [2 J5 O9 \ Q& ^3 Q2 `9 q. @: f
alert('close');
* J3 A+ K: s. v% ^7 H, m) f" n
}3 E8 f) y* E3 z( \1 R: l
ws.onerror=function(event){0 S5 A6 _5 P% R! V
alert('error');3 \$ g. y8 w, [9 Y3 t, n& k7 ^
}
- I# o' V4 }$ i) v4 @2 y+ d! w
//video，标签模拟视频9 p: ^: z! F6 ~! a; ]/ E0 t1 r
: l' P6 j3 N- A' q: H2 r: n1 I
</script>
: g) c4 E' v8 k) X; N
</body>
' Q7 I6 F3 ^! o- `$ j/ P
</html>$ D L( x2 |0 o1 i- k2 p
( z L5 H: N7 f% V8 Y. t/ ~2 T

复制代码

客户端：

<html>; _. b, y! O5 t" Z# n' a/ ]/ B0 v
<head>+ B1 o' W+ w* L9 A0 }
<meta http-equiv="content-type" content="text/html; charset=utf-8">8 ]- `* H; B9 O& V
<title>客户端直播页面</title>
</head>. g# Z# ?/ W1 r" x
<body>2 ~9 `3 D7 \- w& V, b6 b3 x
<img id="receiver" style="width:720px;height:480px">4 }6 ? @; n- [" n- y
( E5 n2 G3 O9 ^8 p$ R
<script type="text/javascript" charset="utf-8">
" Y0 x9 ?( }: g1 S0 ~4 J' O
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");6 ^& l, A/ q$ L: m! S' h& L
var image = document.getElementById('receiver');9 s% r0 ?, X# p) T
receiver_socket.onmessage = function(data) {, p( ?: s4 z4 Z9 J( b
console.log(data.data);$ m# w {$ Q1 k: I. y; ]$ Z
image.src = data.data;4 n: t# ]" L8 G7 v, H
}
, q! u1 S4 G5 d. q, I
</script>& o/ b: T6 R3 B- P6 S0 K% D
</body>& p$ h1 j6 h- j6 ~/ v
</html> \- ]+ q+ `* k3 o% x8 P
, [1 o, N+ C& ^4 s* B/ }

复制代码

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

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

浏览过的版块

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

浏览过的版块

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