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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);) z6 {8 }( @4 Y5 x
$client=array();
) }3 T0 M6 o" E: |
$serv->on("open",function($serv,$req)use($client){
9 ]$ o" D& B( x4 c: H0 _7 @, H
//echo 'connect'.$req->fd;: R+ d6 I, \) f7 O
$client[]=$req;
5 S5 p% q+ S* ~8 R& Y O
//var_dump($client);0 a" o; c( K# ^) V' B. |
$serv->push($req->fd,'aa');
$ ]4 o& o" I; O5 l6 E8 J: u: K8 b" u
});
6 a! t( O1 Z3 \6 Q, y1 v$ C3 d
3 w! a4 \. B+ F% q% ~5 P% |
$serv->on("message",function($serv,$frame)use ($client){
. w' G/ [7 _4 v
/*var_dump($frame->data);
2 m P7 S8 k8 q+ z/ u6 B; [# T
foreach($client as $key =>$val){
0 b7 {0 r/ ^8 H8 w: j1 ~* x
$serv->push($val->fd,'aa');8 B, P) K2 b( B2 @
}*/, E+ X" I% S( q" z( h0 |4 Y
$client=$serv->connection_list();( h+ `( N, q0 Z8 G4 W6 d. X& ]
var_dump($client);
! O& v3 L& a. ~2 z) n# p5 @) W7 S
foreach($client as $key =>$val){
+ Z3 k& I) E/ M: b0 U- Z8 r2 U: \
if($val!=$frame->fd){
1 l! H9 h9 g; g7 f- Q( H
$serv->push($val,$frame->data);/ K: N4 S* y' n# P% q3 m
}
" A9 T8 X* v# Z: e/ N( ~
}. P; @/ y) ]& [+ ?6 k( ~
5 R0 W. Q `* ^& }, E' _ k% L
});
3 c1 o( K! B( e
; H* u9 U O( j/ ^: F( p
$serv->on("close",function($serv,$fd){9 Z8 S y" i3 A# w5 Y( J
echo 'close';1 l/ r* [+ U' f- V$ n! C. a
});
' \2 b$ q7 W. R5 \* u; ?/ r; l
& h6 m) q% j! T1 |$ s2 l) M
$serv->start();5 l5 U0 j$ L7 P" C* s
8 F j Q) W% \9 T! ^

复制代码

主播客户端

<!doctype html>
/ [9 f) s# `% H& n/ E T
<html>
6 u" l) {3 S: ?, b1 V: A
<head>* y. _! u% x! d6 Z
<meta charset="utf-8">
2 d/ C# O1 v- y3 C/ a
: ]& ?: i: O+ ?9 k. h6 w2 B! Q
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">$ \3 r& h& q# s" T" m
<title>404</title>* D- ^( I% x- J7 `; |. y
<style>
/ X. H x1 {" i8 h* r7 a! b- o
body{
; s! d2 }+ K( l' M
background-color:#444;
9 T8 U, u9 Z# } O2 E
font-size:14px;
$ ]' B% I: E0 }9 s2 ^8 z" O
}! P( d/ Q; |- k6 `& x3 E3 x
h3{
' t7 T* O% P5 Y, S3 j2 W
font-size:60px;& a: Z0 l' `. W
color:#eee;9 C( e4 o/ O* @7 B; |0 \& P
text-align:center;( F1 J9 `' F3 ~! \9 j! m- K3 }
padding-top:30px;+ L% |! P) d8 N, B
font-weight:normal;7 z3 }) J& s- x1 ?0 I! A* f
}
! e" s! G/ z& {. ]- U1 a
</style>
5 ?- I+ ]: l9 }. O; @+ X6 \
</head>
1 ^4 `0 N: b2 |; x4 b# y
4 D" R. a2 U6 k% _# _# _ Q. |) ~
<body>4 r+ Y6 j/ Z6 w- Z
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>" {0 s* K$ e2 H( \* D: D
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>& s& L% t7 `9 i: V
<canvas width="400" id="canvas2" height="400" ></canvas>
% w* p2 A( `0 H9 R& e8 t
<script>$ h% X7 z5 V) B" _$ u
var video=document.getElementById('video');- K0 V% a2 f4 j: g2 d
var canvas=document.getElementById('canvas');
! {9 I& c- g7 {$ W1 K [& z+ V
var canvas2=document.getElementById('canvas2');( V% G2 {, k3 V. w& @8 d1 m( X: a
var context=canvas.getContext('2d');( s4 j" a a& d( {4 @8 L( ^
var context2=canvas2.getContext('2d');6 ~( A+ N8 o. i8 c$ S; @
function draw(){
" @ ^- _# o; \+ X! ^% N$ L
context.drawImage(video,0,0,400,400);, h& Z4 m! k8 g# k; B& s- i
ws.send(canvas.toDataURL('image/jpeg',0.8));
$ k+ m+ o/ X3 i" T* q
setTimeout(draw,800);4 w/ o/ H8 a1 j( S6 ?
}
) t! t7 b _7 L- w, E1 ?( ?) C8 _6 |
' e9 x+ b+ t: F+ Y; v
//客户端跟服务端通讯; o8 Y8 @( T) ?- d# t( w
if (window.MozWebSocket)
& x$ d) H) X7 t* R8 w
{" n8 M- J/ E7 \0 B
ws = new MozWebSocket("ws://182.61.42.187:9501");- l1 |1 K7 A1 v* h \
} else }$ j# X" S- A0 }2 \% k* j/ G/ f
{8 U0 K$ O3 q0 t1 L k- R7 K! q) w
ws = new WebSocket("ws://182.61.42.187:9501");
& z! |- V( j4 {" g
}
. f. y% U1 x e
7 s9 {" ~" I1 W1 |# |0 w
ws.onopen=function(event){
/ E% a" L2 ^; \- ^2 O1 k
alert('连接成功');
( f6 G" t/ `& o3 A$ Q( H) W0 }
ws.binaryType = 'arraybuffer';
" J( z' y: H9 h; L2 [% m7 D- g/ R
draw();
, l. }3 K8 x+ @$ f4 E
}; S, Y% p) H+ L/ [+ g, z4 ^8 {4 z
ws.onmessage=function(event){4 o# O7 p; H3 ^3 r3 _8 D2 _3 x
//alert(event.data);
! I! M( k' A( b! ^9 Y0 O9 ]: f
//ws.send(event.data+"client");; q* M" k8 u9 }. a: O9 m3 u
qrCodeImg = new Image();% W# L% X& W, d0 S
qrCodeImg.src = event.data;. J y2 Z9 r6 [) X4 F) z& @- X# ?
context2.drawImage(qrCodeImg, 0, 0, 400, 400); L" \* P" m" ?+ O, ?! O
& u! s1 V1 O% A- X3 J- p
}
7 ?& f: l) T" \3 t/ G
ws.onclose=function(event){9 E, b; l9 h. a' g5 T1 D. D" r
alert('close');4 @; G* h8 X+ f5 n+ f0 o
}
: Y1 f, i7 m O7 p: g9 l
ws.onerror=function(event){
& ^, I5 i! S- G/ Y2 v0 U
alert('error');2 n6 U* U( q5 z! I3 Q) d
}
3 @9 x; h8 q! T4 n
//video，标签模拟视频9 ^, H: R: R5 G
& T8 e8 J# I# T2 u* o. \" ~, F( m
</script>6 X3 F% q- b! W: c8 F9 s- T- u- H
</body>
2 ]) n" T, k/ P! Q9 T6 f0 C. c0 N$ H
</html>( o g( q V+ G3 `; i- h2 U
( o0 i; F5 l! X8 l P7 M& s n

复制代码

客户端：

<html>! V6 p, P% ~7 |% G' Y
<head>
) b+ d$ X4 i9 |0 g
<meta http-equiv="content-type" content="text/html; charset=utf-8">; a/ @9 a8 E U& M% q9 u" z8 p
<title>客户端直播页面</title>
% w6 N( R! T7 U) Z* h; e0 g. }
</head>
' r$ F4 p3 f; @: R5 @' e( D
<body>
1 a. l4 W/ C4 B# B/ L- x; f8 }; j
<img id="receiver" style="width:720px;height:480px">" ~$ Z% O/ F6 T k E: d- K
) e4 X1 p* m# W+ H
<script type="text/javascript" charset="utf-8">
8 H/ c/ n9 i+ p1 m
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
+ ^9 r% v. c; j& D0 I
var image = document.getElementById('receiver');8 j7 {4 Y6 ]3 _- m, C1 d6 h& h
receiver_socket.onmessage = function(data) {' R- V3 f+ h! Z+ z# M$ ]
console.log(data.data);
, o& l* H# u8 O- k0 m# R0 O! a2 G
image.src = data.data;
( p. l! z& u6 \4 ?. B4 F, Q
}8 c' |, J) z: b9 O1 K$ g( _, w, Q
</script>
3 I6 }( I3 X. k9 `" p% G; ]
</body>- B) F2 n; A |5 L) h
</html>9 }8 i! I( {( U5 p
. V5 A) ], b2 z: k) o0 E" D; e

复制代码

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

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

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