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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
3 {& B: d+ `& V+ i
$client=array();
5 T3 `1 Y* J% U( s. |6 {. [+ {, M) F
$serv->on("open",function($serv,$req)use($client){! e s6 g! c; [2 s
//echo 'connect'.$req->fd;
: Y* l4 f, W! k; E `
$client[]=$req;9 Y9 s, J" [" H0 B$ \
//var_dump($client);
* V% C; m" C* W7 G
$serv->push($req->fd,'aa');
# O+ U ]: y G9 Y: P# N. V
});) e( F2 {" W: _( a# i8 k! D7 V2 @
. Q) b0 j2 B% _' D, q' d9 T+ I% [
$serv->on("message",function($serv,$frame)use ($client){# ~0 A6 z# z& Q- |
/*var_dump($frame->data);
/ ^- ? \, P- B' f5 A; s
foreach($client as $key =>$val){. i5 G5 @% Q) w
$serv->push($val->fd,'aa');8 c8 l/ Y/ K1 u8 ~ A
}*/% C2 i$ Y# k1 ~" n! n1 w
$client=$serv->connection_list();4 m4 \( C5 Q, n$ Q9 ~
var_dump($client);: n9 k" A8 h' W" w# J5 V" w
foreach($client as $key =>$val){
. e3 g2 A; `. U: G' u3 @
if($val!=$frame->fd){, c9 q+ K7 }; Y5 B" z, |9 d
$serv->push($val,$frame->data);
2 E5 M' B9 \" \4 F7 @
}$ d+ p9 m# p3 p+ F
}
7 V$ u8 n# I) f# d" _) g. D
) q3 s0 u; X7 r$ X; k
});( u! T4 h' _( u
4 p5 Q V. m) a" y
$serv->on("close",function($serv,$fd){
# R. r) V) p e# [6 Q
echo 'close';
& [4 H' M6 }5 x1 N- w# i! G0 M: l$ b
});
2 J3 D* D1 ~# t6 G6 v3 P
2 N3 u ?& t* i3 p' f8 Q5 B6 O) J
$serv->start();4 j( J6 |! ~2 m
5 J9 Y' Z! M& F8 r; N/ w( B

复制代码

主播客户端

<!doctype html>
8 q1 O/ F1 t$ e$ g% j
<html>* B4 d/ L5 t. j5 e# e
<head>
/ x% |7 Z- z# M: y0 ~( S
<meta charset="utf-8">* H3 E) ?5 Z" Q: o4 B
3 W3 ^8 C: v% C7 r
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5 M8 h3 Q' w( [) z2 @
<title>404</title>
- }/ L2 o3 y& l! ?) ^% U( d1 E- I* p
<style>, ?; g- b) r8 |* U7 k! Z/ H( _
body{ i5 B9 ?1 U; _ {7 f
background-color:#444;
# _" [9 x1 l* ]: {
font-size:14px;% ^/ W, S3 g' S- G% u
}' E! K3 h& I2 r6 k! [, Y
h3{7 c3 U! F7 P. v! n& R
font-size:60px;- l6 @$ h1 M8 C. b7 @* {& s
color:#eee;
5 Q* a0 J4 Z( r
text-align:center;- l' e( |6 @! G% s0 n3 |3 G
padding-top:30px;
0 z! w: E0 b+ c+ O
font-weight:normal;
3 {6 D3 L1 P/ o, p
}
) I$ @ N% |5 j! }/ |8 K) a
</style>, F# ~5 n: E: d9 X5 {; r
</head>
& ?- s1 V' t, [0 I' k9 {% E
( `" Y& a. t" |3 k8 K& m- w
<body>+ v9 p* b* o. \# q& h
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
[3 E' g6 i% q
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
# {$ F8 X8 m1 P/ Z
<canvas width="400" id="canvas2" height="400" ></canvas>
/ j, r. u- l9 E' }% \" H- n
<script>1 b, A+ N5 L2 S! n) a7 @6 z
var video=document.getElementById('video');6 T: f- S8 v9 g) C' Y! e- x
var canvas=document.getElementById('canvas');, X- ~. ^# @/ V% E4 S# L2 E5 m
var canvas2=document.getElementById('canvas2');
1 }$ \$ n, X, L$ T: G) F
var context=canvas.getContext('2d');( }7 `9 r. l, ^" C# ]* A, E
var context2=canvas2.getContext('2d');2 o) r# c4 r! n
function draw(){0 R1 Z) v B$ W9 Y6 E
context.drawImage(video,0,0,400,400);
( f( X: u. A5 `) c5 J. t2 a/ n
ws.send(canvas.toDataURL('image/jpeg',0.8));, x- l/ n- I8 t. G
setTimeout(draw,800);) h0 l" o3 D W
}
+ e9 Y: k/ S/ n6 W+ p) K, D' y
# Z6 z3 C( L1 ]9 L5 l
//客户端跟服务端通讯
6 k$ h- I. m5 n. G0 _+ e- D; }. N
if (window.MozWebSocket)
4 D7 P/ K) b8 C1 {+ A
{
, t; ^) g( `0 }8 _. _! N+ ~
ws = new MozWebSocket("ws://182.61.42.187:9501");, `% l5 {! `2 g! Q
} else
5 {8 D* b b! Z$ z2 q! g4 k
{
4 V7 X$ {: e; d. e. ~$ Z& y" q
ws = new WebSocket("ws://182.61.42.187:9501");
3 K6 V1 v& o7 D6 a0 ~
}5 ?& K4 U0 Y$ T0 R" x
0 K, L p+ j# l+ V$ F8 x
ws.onopen=function(event){6 G/ o, A, A% X% |) ~% i
alert('连接成功');/ U! {: F- J/ K2 J9 u7 f
ws.binaryType = 'arraybuffer';
6 u; Z6 W; a3 U
draw();
5 e$ \. s! B c1 j
}' c( K9 w. B5 Q9 c2 s. m& E
ws.onmessage=function(event){
9 D& G. c O; S$ X
//alert(event.data);( u* L- z6 k% o* J$ [ Q$ f
//ws.send(event.data+"client");
1 b7 K, Y' n; g) c0 K
qrCodeImg = new Image();
6 V/ \7 f7 V# q0 s v2 S6 { d
qrCodeImg.src = event.data;
8 t3 X; s* q% S* _2 B: }
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
3 p" v. q: G" V, c
8 P. G Y9 Q; ^
}
4 E) y7 q% D7 ~1 p) ?2 O
ws.onclose=function(event){
- n& h3 m+ r7 V" y! Q
alert('close');& ~: v4 _6 ]+ m' ]. v9 N3 a. |
}
' \$ @. p2 r2 f' k- g9 Y8 t) x5 j7 s
ws.onerror=function(event){) f; o* [6 q2 E7 P! x
alert('error');4 c |/ A+ Z& `8 Q8 h
}4 @; Q6 n, `( U* s5 v/ J
//video，标签模拟视频
6 e% v5 |! I- ]& i2 W5 i* R$ ]
6 w& f7 X1 L- E8 T
</script>
, h: [; L' H6 u$ M; r
</body>$ X$ z i& v; d) i
</html>3 Y* U7 j8 _. z6 b2 p5 t" Y
' L; k# d% X7 `% ~1 a! \# T

复制代码

客户端：

<html>1 ?- h/ P w" f* e3 }7 R
<head>2 H' M( n1 Z, e+ s; L) Z/ D
<meta http-equiv="content-type" content="text/html; charset=utf-8">
1 M3 F8 y `& |
<title>客户端直播页面</title>- @9 K: f) P9 i( B1 }$ e
</head>! Q' ?1 ~8 _5 l# O6 u# `
<body>
" y; [5 u- I* w. v: i. n$ B
<img id="receiver" style="width:720px;height:480px"> L5 \" ]4 `6 Q
" d2 g- I% {% d$ |: F0 I/ S+ l, ?
<script type="text/javascript" charset="utf-8">: p# [6 G$ q2 q! v5 `, `1 i
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
! J+ W# X/ a; {# }* v2 u- H. ], b6 R
var image = document.getElementById('receiver');
4 u9 q5 Y; q. A3 }+ \# R( {
receiver_socket.onmessage = function(data) {
O) T0 s, V1 T" f% f
console.log(data.data);
. T5 j: J1 e' ^. X8 f8 t
image.src = data.data;
5 r0 ^7 \: ]. w$ a2 J' q& v
}, T: U: I- Z# P* s w
</script>) i% U- k4 B# W% Q
</body>! u0 w5 p( A1 ]* ?# x) T
</html>' l O, r8 \& r% c) P( ^0 U; u
$ J! z6 ^ U- k" G" T# O+ ^/ t

复制代码

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

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

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