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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);& x& Y: W# p- a% A. m0 P" k' m% o0 y
$client=array();
* j. v; i x) O
$serv->on("open",function($serv,$req)use($client){. B7 R- D7 o' b! ^% g
//echo 'connect'.$req->fd;
, b# Q/ n! u& [ k; [. E) M5 |
$client[]=$req;
% j5 |: ^# _( B) h# j
//var_dump($client);
! q1 _( l2 v3 ~" ^$ S' c
$serv->push($req->fd,'aa');; h" g" C. P5 J/ N+ `5 n) T J0 k
}); m' K" `; \& F) L3 b, A- t+ W
1 O7 @; C: J7 z3 w% \
$serv->on("message",function($serv,$frame)use ($client){9 q7 r0 J1 P$ w5 [" R
/*var_dump($frame->data);8 @, b3 s5 }3 j% \
foreach($client as $key =>$val){1 g( m1 N" {0 a+ J4 Y
$serv->push($val->fd,'aa');4 r! n1 u2 z- W$ F, r0 `
}*/
/ ?+ y. j7 J& P& V* X& J
$client=$serv->connection_list();
5 }; L( L8 u: m9 P
var_dump($client);; X1 P# `1 H# H1 j( X
foreach($client as $key =>$val){
& h) x3 U. W: H6 s0 B; ^! j) d
if($val!=$frame->fd){4 e* `8 q; S- J2 ]6 N7 _
$serv->push($val,$frame->data);: ~' I) N1 U5 W C F1 p; |
}1 @/ n" K1 Q7 a5 |% \3 @6 |
}
: y, W/ t6 ` T( _. B
* s, I: Z1 R9 j Y! e
});
, J- N3 f7 M+ F- q* R
2 i2 o( O6 C ?# Q/ s" Q" K: S# V
$serv->on("close",function($serv,$fd){
; U& i5 I' S0 K9 K1 q0 f
echo 'close';' D: H% Y) F5 r! \" g( m: |; o
});- V& g! v( R* h/ L- _. F/ s
$ K; M& ]1 W; R5 U8 _
$serv->start();3 \3 ~6 w% l' w7 Y- z
2 W c0 U* @. A5 ]: }* y6 b

复制代码

主播客户端

<!doctype html>
5 \& B( }$ f- l: y
<html>9 O8 r' Y( ]7 E1 @3 U3 ^
<head>
" p/ S0 B" j: m, G! J0 h
<meta charset="utf-8">" S# ]" Y' U0 u. J) n/ }( ^
5 |( B7 h% _/ @9 R# D
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"># h1 t: p6 e4 T; |% m+ k1 Z. h/ U
<title>404</title>9 x0 \7 ]1 }% Q2 r. G+ K
<style>; G5 [4 H0 M3 M, m& o: ^( h6 }$ }
body{
, `# l- j! M1 o# E0 K
background-color:#444;
+ {2 c* y3 s D3 g/ x. Y9 N: w7 T
font-size:14px;- k5 e( _0 y! y
}% {1 K0 D1 @2 m; g( M
h3{" O+ P5 a5 \! z/ q$ J
font-size:60px;
7 B4 M) k% L4 z5 W0 W- [ F
color:#eee;
1 P" y6 ]/ S, w
text-align:center;1 N2 W+ I, U* H
padding-top:30px;
; v& o+ k7 H. Z! t P, o f
font-weight:normal;* I0 h Y. z e, u- a
}
2 J, I$ n- W5 f8 [6 L* e
</style># y! u* K2 \# K
</head>
9 {. B) ^/ t/ ^# y; L4 g. A
% M. t; Z/ d, }2 ?! |
<body>* h1 s6 f# }6 ~; g; [
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>0 X- K; q1 F; y6 v0 ~, A! @/ w* P
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>' r' H* B$ k; ]# h8 f
<canvas width="400" id="canvas2" height="400" ></canvas>
! Y) Z3 A! r; z/ m6 h) l6 Y
<script>9 ~6 W: p" ~3 Q( \7 ]8 a# S d% D6 n
var video=document.getElementById('video');* f/ Q/ y* A5 R* n4 n! u
var canvas=document.getElementById('canvas');
. R9 O l7 h7 j' l' n8 C2 b
var canvas2=document.getElementById('canvas2'); Z! @+ H* l3 e* t( f
var context=canvas.getContext('2d');4 B* T0 S) a6 x
var context2=canvas2.getContext('2d');2 N5 _ n% G, V" I5 w: }
function draw(){
& d6 U+ Q6 g' c+ a* ^
context.drawImage(video,0,0,400,400);
% V- P) c* r7 W, x/ B! L" k8 M0 |
ws.send(canvas.toDataURL('image/jpeg',0.8));
1 c* g% y- h, C; n
setTimeout(draw,800);+ k3 k" _4 d7 _- Z) H
}% {1 `; r% K/ _ X5 t/ T
2 q2 X. P( D7 |( o+ W
//客户端跟服务端通讯# R' P% t% C; G" W! z" ^1 i
if (window.MozWebSocket)
1 [7 J) O9 e0 Y9 D
{
$ B* T1 f3 y5 D+ \' `) P% \) p
ws = new MozWebSocket("ws://182.61.42.187:9501");
2 [, g9 c7 i% Z
} else: o2 c# v. j( ~& e% X
{
8 {& b* D! {! y
ws = new WebSocket("ws://182.61.42.187:9501");6 W2 K8 F/ d2 Z3 H7 H
}/ C2 `& s! q5 z3 g s
( q2 p4 y" i2 g. I/ x W
ws.onopen=function(event){
1 \0 m4 Z8 |4 w9 n
alert('连接成功');
: N7 w% I4 C% M- r1 k3 {
ws.binaryType = 'arraybuffer';+ `1 {! J) z" x3 x$ _
draw();
9 \/ f) t5 u* P, {/ E4 M, F C/ P
}; w3 f% w) s8 H1 I0 B
ws.onmessage=function(event){% s9 n2 v. l$ Y, y" U4 z: u1 `
//alert(event.data);
; i& N8 H: a/ f
//ws.send(event.data+"client");
6 j; C5 s6 y2 d U7 \
qrCodeImg = new Image();
0 ^* t# _9 ^/ Y% Y+ Z) a8 X
qrCodeImg.src = event.data;
3 q+ e; _* J9 F k, X
context2.drawImage(qrCodeImg, 0, 0, 400, 400);, O- W4 w N# E
0 W! j) z5 p9 p1 H6 i1 o
}, F- C. [4 e& C/ x
ws.onclose=function(event){0 _ B* i$ ~; y+ m6 ]
alert('close');
3 Q( c: _6 q; ?" h* g& y7 R! x
}+ g6 H C' E: y% k
ws.onerror=function(event){3 u3 M2 Q) J. [6 p
alert('error');7 S# r& w$ g* _5 e( f) f" V L
}+ S, z9 v ` E( Q! G) O
//video，标签模拟视频 K3 a' A% Y& Y
: x5 |- u3 @8 b( w
</script>7 k; T4 @7 t! q/ Y2 w* R
</body>
% H+ W* T+ b$ k D- o i
</html>
% a" |5 k# ]% J; k
0 r( G6 {% _. D3 ^9 @4 \

复制代码

客户端：

<html>! f- C! B3 l0 g7 R, @, W
<head>
9 C* N& A# O+ K4 I
<meta http-equiv="content-type" content="text/html; charset=utf-8">
) _8 S' E! Y! w2 c
<title>客户端直播页面</title>: @( h8 D! S2 M
</head>
+ V. \6 ^8 \) d
<body>: r R9 x3 z# G
<img id="receiver" style="width:720px;height:480px">
0 m( D: q8 g2 U5 Y2 d2 n
% F& S: @! p& ~& v1 d: C9 G4 L/ z
<script type="text/javascript" charset="utf-8"># M/ D9 U9 [$ P6 k. F7 T
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");; I1 |* X+ @; x n. D) X
var image = document.getElementById('receiver');) i; _2 S, z* a. g7 g3 v
receiver_socket.onmessage = function(data) {
1 S: `: }8 W) M8 w* E7 d' |0 M
console.log(data.data);
$ f+ o3 j4 z' L0 f) H5 l( x
image.src = data.data;
1 b' A5 V, P, l/ k
}& y( N. T+ d P
</script>6 R4 Q8 u% h! B
</body>
% ~/ i: `; I% ]% w8 s0 i5 ?9 F' }
</html>
7 D9 n* }1 p5 T) \5 k* M( L |
' z+ f- D2 m: L: k5 i

复制代码

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

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

浏览过的版块

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

浏览过的版块

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