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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
: d$ H+ u( L w( i9 B2 R3 |& `
$client=array();& f6 [3 K' c' N
$serv->on("open",function($serv,$req)use($client){; r% P& G' O$ M$ X' U4 ? b
//echo 'connect'.$req->fd;" R4 ^, ^* Q$ X9 t/ h* U( u8 z
$client[]=$req;
0 k! F. B* }' M5 w1 L
//var_dump($client);
: i8 O5 i" o4 w" x" c# j3 o4 }
$serv->push($req->fd,'aa');
, W$ G% g0 u# s% Y$ I4 O( X! c
});
/ h# n% r% t$ T4 |, G1 h0 N
$ R3 e. v; X& @" {0 ~
$serv->on("message",function($serv,$frame)use ($client){
! F- U% ^7 }& n1 p+ l6 p3 o* S- w9 ?
/*var_dump($frame->data);
) i2 o! h/ W7 E% H5 x( X! G- I
foreach($client as $key =>$val){$ Z+ V4 ^- n" i; Z# Z
$serv->push($val->fd,'aa');6 a* z6 V, } s8 f: `3 o. N) \+ t
}*/
3 F* R- H4 f! s2 _# X6 p! \7 E
$client=$serv->connection_list();
& u& [/ d9 R5 x) {- }
var_dump($client);
$ B7 v- l" S5 |9 r y8 `: `, @
foreach($client as $key =>$val){
7 g/ V) T- P! Q! |/ `3 o, D; g/ `
if($val!=$frame->fd){
7 ]* S) o( Z5 {% ~5 ^! E& ?
$serv->push($val,$frame->data);
- D) _, L+ N4 Q- s: X: E
}3 q& [& d$ G9 A3 X; m* n
}+ ]- X5 a% s3 J# O4 T$ Z
9 Y' j8 R. A% \! t0 }+ S
});1 ^4 I% k$ K& M7 w& y9 r3 W5 N
Y3 q; ]$ }, r. [8 H* Y7 W7 u
$serv->on("close",function($serv,$fd){
6 ?/ O- U$ H/ L% j4 V- u. r
echo 'close';
! h1 X* ~" s: |6 R5 z0 P" g+ L
});5 R. g2 o4 `5 ?3 [3 A+ y; g6 a
. z5 o+ o4 `4 B1 {9 I
$serv->start();6 k ?$ g; |/ G0 s: R
2 O7 z8 a5 Y1 V* e

复制代码

主播客户端

<!doctype html>
5 l" N. l4 g3 s/ U2 [
<html>6 u0 U0 V- v5 F F
<head>
. z/ ]4 ]. v9 [, m9 K
<meta charset="utf-8">2 Z8 H; \9 a/ I* \. |& J1 T
0 {* k) H- A$ P: @5 H
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
]) H* D) f1 G1 T; `" }9 L, r
<title>404</title>
! D& I* T$ y* I& @0 c- n
<style>$ V: u$ [4 i' L O6 V
body{; F7 E" d6 r: b8 e1 R) M& ?. j
background-color:#444;
* K, A: w, T" t& Y0 _
font-size:14px;
1 D7 e: F$ X+ O/ Z
}
8 n T6 m% R. Y% ]# c
h3{% }. V+ [, c5 c) C
font-size:60px;5 H, |" g6 i/ |% ~
color:#eee;6 T& R7 h+ l0 H7 H: R4 U+ S) p
text-align:center;
# n; b( }3 K o6 E
padding-top:30px;* \1 G7 c; U8 j4 z
font-weight:normal;
& O* f9 F5 k. ~& J7 X+ E
}- l: @- b" i# ?' A: e% k4 `: x
</style>
, _, i/ _/ W" K% V" X$ X" @
</head>
% d+ D9 F9 ]. f+ p: |' ?
* z: m& W) ]4 d" _
<body>" ~1 j* r' v- F0 m$ P
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video># [: q S+ }; v
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>( a, e# _7 i8 s, v+ [, X7 U
<canvas width="400" id="canvas2" height="400" ></canvas>3 d7 J+ G& |% K, z, Z9 _# n
<script>
) F$ ~) _4 Q/ r4 y
var video=document.getElementById('video');8 A9 c" U' C& v q- [
var canvas=document.getElementById('canvas');
0 Z5 k! ]8 m. _& l
var canvas2=document.getElementById('canvas2');
) q+ I3 p2 P9 ^
var context=canvas.getContext('2d');
* R7 K- h9 g- H6 F, @& F! u
var context2=canvas2.getContext('2d');+ t% j& u7 y" C6 T" P+ `/ D% j' }
function draw(){
3 R- g! c/ S) M% d" d3 r8 P ~% v
context.drawImage(video,0,0,400,400);1 n6 p- {, j8 ?. ?$ P
ws.send(canvas.toDataURL('image/jpeg',0.8));
$ p' u q) c/ ~0 Y4 S
setTimeout(draw,800);
0 v6 ]4 b) {$ _+ h/ ]
}
& @& g' l. R O8 r9 t" z" _$ v, D, t
8 ]: a1 k( G9 R3 R- p7 k& Q
//客户端跟服务端通讯2 H) J7 T; `1 K# u. H3 s
if (window.MozWebSocket)( Y& j% F' y" p
{+ |* a/ R2 S; D: V
ws = new MozWebSocket("ws://182.61.42.187:9501");
, B& i$ u0 p- Q; P
} else
9 N, w% }/ c+ Y0 ^9 L( _8 M A% y# g
{
& r7 `! g a8 I/ p
ws = new WebSocket("ws://182.61.42.187:9501");
& p; \& s' n& L4 Q/ O, E: V! B
}+ K8 b/ l* {" S/ t [1 J. a; M
8 S, I/ N- b( N8 B
ws.onopen=function(event){
" D$ k3 b6 ~3 ~5 G: s" d* l
alert('连接成功');' E8 }6 Z- r, P: u5 O+ H5 i l0 |+ S
ws.binaryType = 'arraybuffer';7 G8 Y" D0 o) b
draw();, C8 V) I9 ` H/ @8 M+ H
}; `) C8 {8 M) F6 |0 Z: i- P7 C
ws.onmessage=function(event){* V% ~- f Z" t( k4 y+ g) h
//alert(event.data);- W# u( G! e1 }" f. q
//ws.send(event.data+"client");
/ k- b$ K# A/ a6 G5 Z
qrCodeImg = new Image();7 I$ @$ s% x! W- Q) E# e
qrCodeImg.src = event.data;$ x. l' [1 I6 e- Y
context2.drawImage(qrCodeImg, 0, 0, 400, 400);- a2 y! \4 Y7 W$ d! O
4 Y" l. ]4 l- M% Y1 k# U" H
}6 ]% c0 ` g& P
ws.onclose=function(event){1 C7 G7 E, M7 A( J
alert('close');
N/ N4 d- `; G9 d' f1 a8 l+ k! e
}! i! v0 w+ R9 I
ws.onerror=function(event){
( W% O; W3 j4 a2 t' ]
alert('error');) Z# c5 Y4 }( y, P6 v; \
}
, [9 b' R, Z {1 J
//video，标签模拟视频6 D2 v& ^5 h3 s, g0 T' `9 O2 f; T
' t+ q' R: o9 |0 b: s5 e
</script>5 M6 V! t3 j2 c, G; `
</body>
: ^+ q. E* N- X/ }& z& r8 \3 P- k
</html>6 R- \6 T1 P& I7 Z% M
: }- ]0 A# Y9 p3 U

复制代码

客户端：

<html>2 J7 v& V, o' c( m2 O; o( x* }
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">& n2 }0 M$ \$ U( w* M. {6 _
<title>客户端直播页面</title>6 U4 \ N9 M$ b
</head>4 ^, b' c' G" w4 F1 l$ L2 H" j: N( R
<body>
! k q6 G8 V) R$ n
<img id="receiver" style="width:720px;height:480px">/ h& V; P1 j/ q1 h( C- b
) r) F. q/ e+ s/ Z( {
<script type="text/javascript" charset="utf-8">
- V; S) q5 T6 s4 j
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");) q5 k {) c5 M) k' w6 _$ r" f
var image = document.getElementById('receiver');8 _5 y1 [+ M7 N
receiver_socket.onmessage = function(data) {( j1 Y7 ~8 c7 n# h
console.log(data.data);, C9 o/ T; u3 ?, j' U' ~
image.src = data.data;
6 K4 @3 L H2 i5 F y! h
}4 y8 q4 s4 p$ Y3 i; ]
</script>
- {7 y- F; d* F
</body># J. S9 E; ~& E: d! X: z, I! e
</html>. R9 h: \# \. _: M) n. ~% P9 d, K
! h" S; Z* R# M8 H# T( q S

复制代码

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

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

浏览过的版块

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

浏览过的版块

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