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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
. c7 `# \! S) {" }6 f
$client=array();
]6 R! s, c) j/ ?4 X [9 {$ b
$serv->on("open",function($serv,$req)use($client){9 q' }2 `/ P8 }# I9 W# J
//echo 'connect'.$req->fd;9 D( V5 h f1 _) ^0 k! j
$client[]=$req;
; f: I7 b, Q* j% F& I
//var_dump($client);
- P, ] c) U8 a( {$ J6 ~( H6 @
$serv->push($req->fd,'aa');0 I7 v$ O5 }9 a
});5 K; E# S5 q% \/ |9 p- G* S* W
4 _1 ~: Z' O ]: m
$serv->on("message",function($serv,$frame)use ($client){! _% d6 e, c1 a7 c% q0 f6 U9 E. |
/*var_dump($frame->data);, |" ?+ J; `: b" ?
foreach($client as $key =>$val){8 J! t$ R: z7 y8 W% N8 s
$serv->push($val->fd,'aa');
% S& M4 B" i5 s9 l$ Y$ B
}*/$ g! T( o7 U( }: F. c
$client=$serv->connection_list();
' n7 C0 n) A) \! Z
var_dump($client);' ]+ Q9 K$ K* h- q2 K
foreach($client as $key =>$val){% @( i; U3 i# g8 p3 R, W( O0 a
if($val!=$frame->fd){
/ }6 C' E+ C z% @9 ~* f* t9 `& k
$serv->push($val,$frame->data);, _1 Q4 m7 y2 S& I: b% @! Z8 Q
}
6 e8 s# R+ _- r
}
- ^4 F: {) n- c7 Q
. U' ]- z% ~: B5 V( }% i
});; N* y2 K, P, f
& \. h% ?1 Y# ?1 a% ~- n: o# A
$serv->on("close",function($serv,$fd){) r8 r4 V0 c6 S% C$ n/ q
echo 'close';
/ H! x) V* t$ V* o2 s8 @, I
});7 {! J3 k/ P: ]4 G0 d
8 Q) h* l0 M& u( Q1 D% D
$serv->start();
; H( F5 K u( B* U8 s! _5 Z
, X' M- D0 E. K% e- S

复制代码

主播客户端

<!doctype html>; R- s2 h) t7 J9 D9 t
<html> J* J3 A; K, Q# h7 |" [' j4 @
<head>
+ h Z2 B S4 C' T) _
<meta charset="utf-8">9 t" T- C) `( |9 B! k4 p
0 Y! M) E4 s2 b9 R
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">* T: }0 |1 [5 P9 Z3 ^
<title>404</title>
/ s8 I# T8 B5 q; ~1 O% x0 T( Q
<style># o: r! h \+ ?8 `
body{7 `3 ~" j, ?. w! e& v' x
background-color:#444;2 ~+ x5 `" X: ]
font-size:14px;2 I! E. a7 B* s
}% i# f" u) Q8 {- a. |
h3{8 m, Q: I5 q0 _0 D- g, ^$ C+ r
font-size:60px;
8 H9 P5 ^) _4 N. _
color:#eee;
3 R& {; K: X+ f1 k
text-align:center;3 V9 h; q" i$ [% [. O4 ]. {
padding-top:30px;9 Q# s; W# E5 @1 J& ]: b% K2 t2 ~
font-weight:normal;/ z5 h K, _. Z$ z8 ^9 w/ s
}
% Z4 T2 @0 e. \: K1 a* J$ U3 p# W1 ?
</style>
& m6 w+ m. I( z
</head>
! B% E8 f: f; e% M/ {) ]7 Q" q2 Y
6 k% i4 l! I$ s9 F4 o v
<body>
X; a! d! [, \5 Y' d) ^: Z6 ~8 w' D
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>- r7 l9 e2 n9 S( q- ]
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>" {, p& K& V8 ~: G
<canvas width="400" id="canvas2" height="400" ></canvas>
0 r% S. a. E5 O6 r8 z( `: U6 w
<script>, W8 g" \3 E+ E
var video=document.getElementById('video'); B9 j# n4 F) n1 V# ~, H$ s
var canvas=document.getElementById('canvas');
2 F2 S' T7 K' m/ w
var canvas2=document.getElementById('canvas2');
# S/ m) x' k: r& o! w
var context=canvas.getContext('2d');) C" G9 [6 Z2 F2 y6 ^) R' O" W
var context2=canvas2.getContext('2d');, E: H w8 |4 H+ Q4 R! {* o
function draw(){
6 q8 t: {; s3 s
context.drawImage(video,0,0,400,400);& t2 f: c J* \1 R
ws.send(canvas.toDataURL('image/jpeg',0.8));7 k1 m; q. H; m3 U4 ?0 m( {
setTimeout(draw,800); k" t8 x) o, X: ~: a k0 m
}& n; Z# T$ | u" b
% b4 t7 f8 j1 w( M4 `0 n9 `
//客户端跟服务端通讯
8 X" e6 T( p! o+ Y) P0 U1 Y
if (window.MozWebSocket) I7 G1 Y& e- M& e. \7 _* q0 f
{# Z1 B/ [3 `; f
ws = new MozWebSocket("ws://182.61.42.187:9501");
. y& c% n: L7 V
} else
8 l0 y" P0 }) z1 ~; ~
{2 V/ L- c! l& x. e9 g
ws = new WebSocket("ws://182.61.42.187:9501");2 X& T4 E; w/ b. |% ~' A' I: ^
}
: i2 L- B' h' d# ]
! ~: C- {/ ~% B# W
ws.onopen=function(event){
: g* X7 k' Y0 S& E! T* M) d/ w
alert('连接成功');( l; X# g) N# u; U( t9 N8 w( g+ F/ {
ws.binaryType = 'arraybuffer';
3 H0 s* T5 O! O8 i
draw();; m# K7 t/ W0 ?3 d+ V1 Z. h
}- I- A$ \+ G4 ^7 x
ws.onmessage=function(event){ h# e: ~; z. Z: `5 F
//alert(event.data);
- c" V; O: g' t' _) q4 x
//ws.send(event.data+"client");
9 ?5 C5 U7 T; F- _0 d- a5 P f
qrCodeImg = new Image();" r+ p& N1 M: u$ Q) ?3 g
qrCodeImg.src = event.data;! `4 [" [+ ~: |: Q/ Q3 W. N. {- {9 V
context2.drawImage(qrCodeImg, 0, 0, 400, 400);, l& F- ~+ I7 I% S0 U, Z
/ _1 }9 {3 E: `, _! r
}; J( i/ \- P9 H% j
ws.onclose=function(event){
, t0 i, A4 h% D4 y6 N O
alert('close');" J/ y- y' Y) A6 C; b( W
}) G- L: B' ~& F2 h8 m* O% z1 r
ws.onerror=function(event){: x: D! Q9 y8 A- Q
alert('error');/ _5 b+ h0 z4 ]" f4 I+ a
}" m2 y* x+ ^8 [& v4 f% Z% J- [7 g
//video，标签模拟视频7 j% h+ y# p0 |* I7 M+ t
7 C$ R6 X+ M/ }
</script>
+ i7 K3 S6 [. k5 g) T8 V, t) R3 E
</body>
# E7 T+ M9 r5 ]; B$ S; W
</html>6 x( u0 h# C9 T1 y
' D/ R* F2 w: W" c4 a5 I% W- y, o- j

复制代码

客户端：

<html>5 x" [/ m) l( ?
<head>' e2 C0 g. U( J
<meta http-equiv="content-type" content="text/html; charset=utf-8">
0 Q/ }9 ~+ l( n9 Z
<title>客户端直播页面</title>( L) l$ j, e5 x, D2 V
</head>5 {- `2 Q ~/ J3 T
<body>+ p6 {7 P! o. k4 d5 E9 x, C+ P
<img id="receiver" style="width:720px;height:480px">! h( s( Y4 N# m$ c8 u; I
<script type="text/javascript" charset="utf-8">- H7 ]' d' x7 u2 T7 k" ]7 B% S; {4 q
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");6 t6 `& Y- g. b4 \7 @3 N( {
var image = document.getElementById('receiver');
$ v/ Z! p/ j/ \" Q% ~# b
receiver_socket.onmessage = function(data) {+ ^% U6 ^+ G! r0 Z
console.log(data.data);
$ i+ u3 H0 [+ C# k7 G
image.src = data.data;$ ^+ g' M2 S) |' M7 C
}6 N$ g; z4 y+ h2 p& c
</script>
! V8 ]! _9 ?4 q; }! c# w
</body>
/ J9 O% O0 ~2 F+ Q+ U
</html>- o! R9 T, L/ @3 o0 Z1 A! @
7 D7 ], Q. P/ v V

复制代码

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

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

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