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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
2 D! l" Q4 t# Q8 M2 H) ~ m
$client=array();1 B, P" c1 S: G- y
$serv->on("open",function($serv,$req)use($client){
3 T6 T7 U1 \# Y, i$ r
//echo 'connect'.$req->fd;6 B- i; P+ _6 E# B9 o9 L
$client[]=$req;
{3 g8 \* F3 a7 d6 N
//var_dump($client);1 ^8 W) f) a/ A* A6 Y
$serv->push($req->fd,'aa');
$ e& p2 I$ k* q, R7 h$ e- z
});
/ K0 E$ Y5 Z1 ~* [7 m% E7 Q+ v6 V
$serv->on("message",function($serv,$frame)use ($client){
+ ~; C0 b5 g+ H9 m5 Y1 y" w
/*var_dump($frame->data);2 [4 w L [ B& u$ p5 U
foreach($client as $key =>$val){ j+ H6 v3 H0 T; a3 X& Z
$serv->push($val->fd,'aa');
7 G0 n7 E6 O! N
}*/" J1 k/ r' {5 Q
$client=$serv->connection_list();
! ?5 a- i+ h7 w4 z4 M9 x4 k
var_dump($client);$ M8 e% L; S1 d1 x- }5 ?
foreach($client as $key =>$val){
+ \& O2 h9 z4 } Y2 b: i0 F" `" `
if($val!=$frame->fd){
; t j, j9 V- d" H" z; ]
$serv->push($val,$frame->data);4 l. q" P- k! ?
}
* Q9 {& V; W6 @5 B0 j! F8 Z
}
+ O0 f4 e) H: j3 O+ e
7 r" w; N+ J' l) d6 g
});
3 [) y9 r5 L9 O0 m8 k( L
! X& `/ ^* a7 U) b4 R
$serv->on("close",function($serv,$fd){
) I4 ~$ _* B3 Z# V6 D: K0 Q( h
echo 'close';1 ~ L0 H) K9 X/ `
});! r8 _$ ]5 G: M& Q; X$ @
2 P' O* d6 P# f4 |/ A1 f
$serv->start();8 ^5 F6 X, V5 Q: v. M7 ~1 p
, S' l3 ?6 @% W* Z; k$ k0 ]- f

复制代码

主播客户端

<!doctype html>
) d* v8 l+ s6 D* e8 l) J$ @
<html>
1 h# m/ @. J' o( V
<head>! s# O q' V z/ V- k
<meta charset="utf-8">
0 ?# ?8 W4 t' H: K' v+ _9 P
+ q0 {' P7 H) n; h K! v; ^
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5 E3 e7 e- ]7 n9 R( @" r5 f
<title>404</title>
# h e( R d& F1 g9 u
<style>+ X5 y0 e/ Z- e. x$ O2 H$ q, Z
body{3 ~) Y$ m9 `/ @ K% ?$ o
background-color:#444;
+ Z9 g' \( G" k% E' t7 b1 _
font-size:14px;
/ u: K' |8 W! Y+ _* |
}8 G3 c! W" l% A6 Z4 ]
h3{
: q! I' a0 [2 @, H. U
font-size:60px;0 L1 a0 |- c( G8 c
color:#eee;; Q& _$ A' t1 S' y" f
text-align:center;! t3 d! }; }5 e) M( E
padding-top:30px; H: Y" |6 B' |! q3 ~( y0 i1 G
font-weight:normal;
4 X* y" a* s7 ?" W2 m2 b5 n9 n
}
* i% K& V2 `: Q* m$ x
</style>
$ v9 l6 z/ c+ ?" l
</head>
L" m$ }% C" n1 Q4 v/ A% i
0 _* p$ e4 L" s
<body>1 z) p% |& M& @% N( a
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>5 e. V! w* m/ i3 }' s0 X. G
<canvas width="400" id="canvas" height="400" style="display:none"></canvas># u. x& l( P8 [) G4 `
<canvas width="400" id="canvas2" height="400" ></canvas>1 B+ O' V1 E. O7 \' q9 t ~
<script>
) I' f& q9 N- M9 {) ]4 |9 p
var video=document.getElementById('video');- ]5 c1 @' \9 q- B$ [ B; y
var canvas=document.getElementById('canvas');1 |) W0 @# ?7 V- |+ V }
var canvas2=document.getElementById('canvas2');" H+ {; n4 }- k7 L. l
var context=canvas.getContext('2d');
, ^8 t8 |- C9 t# S; B
var context2=canvas2.getContext('2d');* k1 q0 O+ Z' {" l
function draw(){
% W; w T& X9 v. G7 F
context.drawImage(video,0,0,400,400);
2 T: Y* f/ k% h- h; K
ws.send(canvas.toDataURL('image/jpeg',0.8));
1 r+ v e- @6 i" E
setTimeout(draw,800);: N7 b1 ?& e% P' r! G# j$ ~
}3 G& J7 ?9 F3 o9 n
9 l' y- |) E& w0 U# V) W0 J) X
//客户端跟服务端通讯
( q' z/ F1 M# L/ t5 B F4 @
if (window.MozWebSocket)
! R( Q! d E# s
{
; F& W5 b7 c) W5 ~8 O2 P2 y5 `6 }2 y4 }
ws = new MozWebSocket("ws://182.61.42.187:9501");2 C: | S* n' b& \! k
} else+ Z$ T! K# }$ Q( i" f9 X
{6 l, p8 o! `3 q$ g
ws = new WebSocket("ws://182.61.42.187:9501");
_9 _7 r8 i; u6 z& ~) ^0 [2 {, q, Y
}2 O Y8 C! Z, `6 X' b
/ r- B$ S1 p2 y0 s' m" `( P
ws.onopen=function(event){
( C0 O; D s8 M( r @
alert('连接成功');
$ m: f, X* j1 x; O1 F- u
ws.binaryType = 'arraybuffer';
; S/ H; c2 R# x9 L$ T6 g, Z5 E
draw();
+ r. ]$ t2 V% c( R. S5 N9 X& f
}
/ V6 T- z. {! G% R3 _+ U: c/ _2 y
ws.onmessage=function(event){
3 w# k& A; y% [" K5 R6 r# w
//alert(event.data);
+ D: B; A- i* a- ^6 t' z& n/ V
//ws.send(event.data+"client");
1 w, F' b1 z( w# x F9 [5 b. g% z( A
qrCodeImg = new Image();
, v; ?9 ?) f, @, t) }
qrCodeImg.src = event.data;
0 I' \: t8 ?% k! @
context2.drawImage(qrCodeImg, 0, 0, 400, 400);& M. h) U/ |+ z3 l6 g
3 v& r& i. S6 {' V, }. P' D4 _
} @: l, O s8 s, ~+ b1 s
ws.onclose=function(event){5 s) I; T# D( p I! p* ~
alert('close');/ F6 _% H7 A3 r( {( x" ^; R+ i
}+ U$ D' }2 H" u- b/ |& G$ K/ @ E1 y
ws.onerror=function(event){
; F3 U( A+ I4 g3 F& c6 _( [- a
alert('error');9 o$ }' \, X1 J( b+ W
}) A% x/ K5 a4 U3 a5 m( S& b
//video，标签模拟视频
1 K, G8 m, b8 ?$ Z9 \2 `2 v8 ^
1 O0 C* w5 m- A: l
</script>1 B4 y7 O% {3 s' w J9 L, d
</body>; ^2 c2 ]3 f6 @( r9 V9 z5 T
</html>
# [ y% z. G- @
( k2 C7 ~+ G9 _; E( H* C8 H9 I

复制代码

客户端：

<html>
/ C$ b- Q4 X6 ?3 v
<head>' Q, J4 ]. `7 i! r; X. R
<meta http-equiv="content-type" content="text/html; charset=utf-8">
& q" }% k, G& N; ]; C
<title>客户端直播页面</title>( B7 ]% s; L, _! W0 d! ]( O4 w
</head>
8 c7 r/ q; R( _
<body>5 ?6 x" B- T& k- }1 Z3 a, ]: @# j
<img id="receiver" style="width:720px;height:480px">7 b, q( k- e2 }+ |( Z% G
6 }6 @( k) A9 H) B% r) x5 \1 }
<script type="text/javascript" charset="utf-8">- D$ Y' b' ~2 K1 y. q3 h) R
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");0 s; B5 ]' Z/ G
var image = document.getElementById('receiver');
( j- a* w) q* X" s( V4 ]: b
receiver_socket.onmessage = function(data) {4 M4 ]. U7 I. y3 L) ?0 g
console.log(data.data);
% I4 B) B( @, T+ x1 n4 y( e2 O
image.src = data.data;$ d8 [+ d8 M, Q# r9 z
}/ h0 t e a$ G
</script>
# Y9 X9 G) {" [* A: e* G
</body>$ p+ G) g. Z* ?5 q3 i9 I# ~1 E
</html>, J* U/ v/ Z8 S+ }
$ S8 W, t! a$ }# h% S- p# \

复制代码

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

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

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