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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);8 j9 m4 t4 |" X- q. c
$client=array();& c0 t2 t9 y: R$ \
$serv->on("open",function($serv,$req)use($client){ u Q& H& w' q1 _2 @& r4 S
//echo 'connect'.$req->fd;- l( h5 p% ?/ @# z1 z8 u
$client[]=$req;7 l2 m2 I2 r$ ]2 d/ Y
//var_dump($client);6 y- G$ \, R1 _% J9 n
$serv->push($req->fd,'aa');. f) y& [6 S& _/ y. h
});$ K) A' q2 F! U8 [
1 M; ~ U; P% { X
$serv->on("message",function($serv,$frame)use ($client){; q: }- i. D' u7 \, i- t8 z
/*var_dump($frame->data);1 D* h0 {5 _9 c- E
foreach($client as $key =>$val){( j1 ?' z5 m8 S8 d$ h3 [* \
$serv->push($val->fd,'aa');
1 t* C+ x9 n/ I0 l& v' q9 |
}*/
' n/ a; s5 }5 _' w' L$ m
$client=$serv->connection_list();2 \; R) d, g3 M. E
var_dump($client);9 Q7 R; I, ]7 l! {+ J. ^* l
foreach($client as $key =>$val){. J) x8 A/ P" j+ P6 w: b
if($val!=$frame->fd){
. j5 R" r1 O$ P% T: E0 j
$serv->push($val,$frame->data);
' |# @ E* `8 H2 l6 Y& u7 n
}9 t U( I8 c: J; j" E" e- f* c
}
v, ^# X# P, W
4 _* [) T) X( W7 L3 `
});2 B: D9 \! i6 j
8 s2 F; _; F1 ]( W! f3 a
$serv->on("close",function($serv,$fd){
5 M% j7 [+ C( p: U+ o
echo 'close';
4 N0 q( R) V# j; |5 g7 i
});8 F0 l1 j4 C5 M9 e$ M
+ Z3 o7 c2 F# v4 x
$serv->start();& N1 q. k4 Q- X- w$ P4 v
' ?. ^& N) M. C

复制代码

主播客户端

<!doctype html>2 `1 [* B( [# N8 P, v' ~5 w
<html>( x$ H9 i2 F$ b
<head>- I, t q, p* S1 j
<meta charset="utf-8">% b% _, T$ [6 o' C
4 f& A1 |7 i- }
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"># V2 [( j( d( e8 q5 p4 e. G! ?; A
<title>404</title>
) g' e; V* ~& E! R3 q* y2 \+ Q
<style>0 n a; P7 O6 f8 ?+ ~& M& `3 J
body{
/ B8 J" c8 n* R2 q9 q, t5 ~
background-color:#444;' g! G# R5 L, ?- v# S) v u, A& o
font-size:14px;
8 [- I/ s( R x( G V# W
}
6 L* c1 p& A; w2 e1 e1 M
h3{' z S% Y! L/ p @* V
font-size:60px; N2 Y" c) }1 s* O
color:#eee;
! N1 P1 a2 ~, h4 x7 u0 e) k, F
text-align:center;0 N" a" E/ N% p
padding-top:30px;$ S' E1 P1 k1 |, f) N
font-weight:normal;+ D9 c1 _3 }% p5 U9 Z
}
/ p+ b6 D# K3 d* `
</style>
* i$ j* O1 e; Y, w7 D' l$ T; }
</head>
4 H m, \9 a7 S+ b
7 `. Y4 m2 V/ E$ s9 H4 ^
<body>; o" _# [- p3 r {9 M; f& w
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
2 V2 h9 B) K" o6 c) ?( a9 C
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
* p8 R/ v B$ A9 X9 P# v
<canvas width="400" id="canvas2" height="400" ></canvas>4 } C) ]+ P! {7 r
<script># _7 G E+ o+ I0 x. t ^6 b. }0 u O
var video=document.getElementById('video');
0 |$ Z' `( m" R9 `0 z
var canvas=document.getElementById('canvas');
. p; M7 U4 X+ {- |9 ^( \- l; W
var canvas2=document.getElementById('canvas2');5 a H% y8 q {& t
var context=canvas.getContext('2d');! g3 d! Q$ J* T& B, l) }, r" I
var context2=canvas2.getContext('2d');* t) p( X6 Z* ?, H' O# h
function draw(){# z7 v- e2 \; H `& J
context.drawImage(video,0,0,400,400);* t9 J6 i2 {* U% d9 Y
ws.send(canvas.toDataURL('image/jpeg',0.8));% _+ j% Z2 x7 j1 |- n) C
setTimeout(draw,800); m! b. }" j0 F0 [5 n8 K! w! a
}1 k3 I2 ]0 g. e8 y
" z6 R& @; A S; u7 A6 }! J! \
//客户端跟服务端通讯( d, ?/ b! |( U7 }' y' ^
if (window.MozWebSocket)
( n( T/ x" i8 ^
{
1 X1 k$ a2 U3 Y
ws = new MozWebSocket("ws://182.61.42.187:9501");
6 @; z/ O7 f) T: y
} else
- Y5 i( ]' G" R/ a) D- e+ h' [
{$ t7 i! R2 \# Z5 p7 z
ws = new WebSocket("ws://182.61.42.187:9501");
" \/ }1 m- }9 L4 {# k
}6 S7 M' z( T. z; G1 i4 x
$ T: }: ]6 ~" ~) w
ws.onopen=function(event){9 k8 |, i Z. x0 O* D! N# C
alert('连接成功');$ I9 ], z: {& {+ P
ws.binaryType = 'arraybuffer';; L% M& c% W$ \. f7 h% w% J- @
draw();
- ^* ^) q: D, e6 \0 D# R; U+ w
}
0 {+ V+ a1 J7 K1 g( i
ws.onmessage=function(event){3 f8 [0 i ?7 M) K5 O
//alert(event.data);
* q1 I% r7 |8 I( n, Y
//ws.send(event.data+"client");
& f( V$ l( l5 K& O
qrCodeImg = new Image();
/ F: P% D H2 Y6 t
qrCodeImg.src = event.data;
( K# u0 C, R% U( d$ \$ i
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
: t7 V. a1 L) d6 X, T1 s/ M
) M, {3 k* G" T, j4 T
}/ W7 B) S) N2 o& x9 U
ws.onclose=function(event){* ?, p6 _1 U" j5 T, g; {/ ~0 E
alert('close');1 P2 g' z9 x$ j2 B
}, N/ k1 H7 o, F$ ]1 j0 E
ws.onerror=function(event){
- x n: \! Q1 l. a R( ]# n. j
alert('error');
5 k x }2 a* @6 H; x0 K; K: A
}# U- u0 h4 S0 w E
//video，标签模拟视频( J2 J) v+ P% |0 X! m& L6 ?5 X8 b8 Q3 E
) m" s' l( F V* ^, R& s
</script>
/ k4 N) @/ A/ o; c8 j( o
</body>, `' m- m6 n/ f |2 ?
</html>
: J% [9 Z5 P, X* l' [) z
' k+ P& K. r. Q! P0 V8 |

复制代码

客户端：

<html>
. W4 M+ m- _+ R( P, |: _3 `
<head>
& X# C' I4 A* Z, @; I% h ]( I
<meta http-equiv="content-type" content="text/html; charset=utf-8">1 K1 X, Z% }) a9 } z5 A
<title>客户端直播页面</title>
# }6 `* G3 `7 z3 g
</head>
2 a9 K3 a0 F' B0 i7 z1 w2 ~# U ?
<body>8 D9 e; E3 q! H% t$ ]; q5 r
<img id="receiver" style="width:720px;height:480px">4 S Q% E s2 a/ Q
5 p# W1 ?/ v9 j# Y% ^+ i' s
<script type="text/javascript" charset="utf-8">7 ^; [" I, ~" N
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");: i' m) P$ @, e7 P2 W1 S- g
var image = document.getElementById('receiver');
# s8 V% l& @' _2 `6 t: F
receiver_socket.onmessage = function(data) {
& a1 U' o6 W, E) A. L
console.log(data.data);7 d& f; b& V' Q4 k5 g5 c
image.src = data.data;; l2 \7 L/ B6 \" n% E4 ^
}& @* i0 r% A1 D" P2 e0 S
</script>: m3 `" z7 w' D$ k& _6 s9 ]
</body> k- H: Z& \* q9 }) q: m* i6 ?& |
</html>
1 K; @- d" \& A# M
3 O+ z* ?( u H4 f6 C7 R7 K, z

复制代码

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

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

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