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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
; {7 ^( }; G5 ]" \/ @' r" o; [
$client=array();! m; Z8 p& Z) T) ?" m
$serv->on("open",function($serv,$req)use($client){
0 G7 E6 v* \5 S9 d: U4 e
//echo 'connect'.$req->fd;
" q) P( C, @/ d, ?. {
$client[]=$req;
8 ^, Y4 w6 C' Q7 @5 @
//var_dump($client);. y* R' G& ]" G6 e' B
$serv->push($req->fd,'aa');* B; Z- Z3 l" {# }( U, N
});/ V( M: k v- ] d
. f. Z o0 J, g
$serv->on("message",function($serv,$frame)use ($client){
4 r3 Z% i2 q6 Q5 y$ i
/*var_dump($frame->data);
) d5 a- E# g! }- A
foreach($client as $key =>$val){
8 J$ C) M. d: U' ^
$serv->push($val->fd,'aa');, c, O5 I. h2 y. b% t
}*/0 J% n2 F1 Z& v
$client=$serv->connection_list();. k4 ?1 R6 W: S, u& r0 Y; p& \
var_dump($client);! s" \: T; }% U# l( K
foreach($client as $key =>$val){
0 f( p5 X; L1 E2 ?+ f* r+ U
if($val!=$frame->fd){1 J) n9 A7 C- N( [% m* m
$serv->push($val,$frame->data);
0 b) @3 E* m5 O6 \4 t$ R
}
: N/ y# M. ]1 S% t8 E
}
3 ?+ l3 @) u4 ^0 P- s6 t
! I# t0 g3 P9 W
});7 R* ` l- P( c* J
6 \' p+ O1 k9 B7 p& D& d6 n6 O
$serv->on("close",function($serv,$fd){* z% X% Z: U, ^* M0 P% c* M
echo 'close';
- g3 [' d% z& L
});
$ ~6 m0 e; L; Y: U6 ^) Y5 z
) g5 Y3 x" O6 a$ H2 k( q
$serv->start();9 H: W; d* A6 N) u3 B. F
2 _( ]6 V% K( U8 T) R) p, w

复制代码

主播客户端

<!doctype html>
. u5 U) U% C1 t% }7 T; ]5 m( Z% l
<html>
: P0 f. Y- U. `( S5 @( f {& [2 v
<head>0 y3 M7 ]6 L+ l
<meta charset="utf-8">7 I# w& r& G" W- l6 B& B$ ?
& `. y: C5 r( R0 Q, N5 K) C6 p
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 M' G7 N k+ @
<title>404</title>
8 R0 o6 E; c5 q" \
<style>
7 B( t4 K* d7 E' ^; J; t
body{- r A& H2 Y8 k% e: \
background-color:#444;8 E' ? j8 c. j( ~" b+ ~
font-size:14px;
, g: J0 } G! Y' X1 u0 d
}0 y, S$ u. ^9 R
h3{' ?3 k3 Z: E4 g
font-size:60px;0 K9 j8 ]1 q' M6 C* ^$ D
color:#eee;
9 ^, j: ]) F% W# m! I
text-align:center;5 e! ?2 B `# |4 N
padding-top:30px;5 [" b: V1 E9 s0 Q
font-weight:normal;5 z% |2 N! H9 n% b/ |, ]
}
. O8 p( p3 f+ R- R: L% W
</style>
; M1 Z, t6 H0 J# w6 e- \
</head>9 C' R" {% O/ L4 Y. z# W9 A
, e: S. x7 D* T5 y6 w6 I
<body>6 d) y1 d! m3 O8 G5 N+ w j
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video># t4 f0 U2 w0 D2 y$ w, n. N
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>% o; d! ~7 r" u, u3 c+ G, c) X( [! n
<canvas width="400" id="canvas2" height="400" ></canvas>5 u4 @4 u2 \; { k- D7 T" ]3 \
<script>. b, H' v8 e5 d
var video=document.getElementById('video');
5 V! m5 Y9 P. w- O5 u. F% D" ~* n
var canvas=document.getElementById('canvas');* U1 S2 K4 o7 g8 r! ^- f
var canvas2=document.getElementById('canvas2');: V+ v4 N9 o* x) n) E+ d
var context=canvas.getContext('2d');
% z5 T0 h4 j* l5 |
var context2=canvas2.getContext('2d');( H2 A( j- u% p
function draw(){
) ]/ O1 l0 J) i% V+ P, ?+ O
context.drawImage(video,0,0,400,400);
: z4 ?& }$ o& R6 X* J
ws.send(canvas.toDataURL('image/jpeg',0.8));
8 P i5 l4 T, t8 @ {
setTimeout(draw,800);
8 b9 U/ {( @- a
}
8 }$ e' S1 n2 a& c$ _' g' f4 b
# }0 v6 b! W, d8 w3 W
//客户端跟服务端通讯 x& U0 n$ ?7 {( |6 p
if (window.MozWebSocket)% k6 w* K& \% T
{
2 O! e# s: t1 E3 j) c e, P, _
ws = new MozWebSocket("ws://182.61.42.187:9501");
& @, B) a1 R3 \( d) u- d! S* X/ N
} else
. V: K Y1 E9 b# X& \; } T m
{7 I$ c7 S; D' U/ V4 A# B! _- }
ws = new WebSocket("ws://182.61.42.187:9501");5 @+ v: U1 p# F( o3 z: W
}$ P" E. q( ], L6 q* E3 X' ^' p# W8 m
5 G! H; u& r+ m( Q
ws.onopen=function(event){& E" K( ?7 T7 W9 V* K' G; C: w
alert('连接成功');, w! h# s- S: t
ws.binaryType = 'arraybuffer';/ P% X3 Z ?7 d
draw();( x( L9 L; H( Z! U2 H# p+ G
}
+ R* G4 `" W" g1 x6 X' E0 ^7 ]* g
ws.onmessage=function(event){* ]' B9 U0 M2 [& S
//alert(event.data);5 Z$ I. l2 i* N- ^# X2 f* Y) {
//ws.send(event.data+"client");- K( d2 n; F& \8 c. L( C1 b
qrCodeImg = new Image();* z9 p: G& S# \- E2 E5 t+ g: K0 H. I
qrCodeImg.src = event.data;
, I3 O* g# d% e6 H+ Z, N/ T% n H1 `
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
% F* H, i" I6 g1 _6 l
6 `- |' R$ R0 M7 B6 T( ~
}
% v2 T5 _5 }0 z/ r
ws.onclose=function(event){
; m2 n3 u- ]1 o* G" N
alert('close');
) O" V. i; T( X; j: L( \( [" j g
} h4 K; ]! m4 t7 m# x; B
ws.onerror=function(event){7 \# A" `& F$ ?. J
alert('error');
+ l# j4 p: \( Y& N) h! a( n
}2 ]' r& n" c6 }6 F7 i. S$ s- x
//video，标签模拟视频5 i( s8 Y$ s) O! T+ [6 ~
; |% P- n- B7 u' B0 ?& j
</script>2 K( `* c4 r7 ^& Y
</body>
: U# B( l" o4 l' b
</html>
! ?& S+ e- h: I& o: U: B
- }' P% q n, J& ^1 ?

复制代码

客户端：

<html>$ i" w2 e q1 [ ^0 q2 P$ X3 Z: e
<head>) r7 |# H7 r. k/ O4 Q0 j
<meta http-equiv="content-type" content="text/html; charset=utf-8">
/ j' Y6 ?) {6 d6 `4 c4 l& |' H9 v* P
<title>客户端直播页面</title>2 R' P8 b, Y/ m, J" V! L8 l
</head>
+ r2 \1 Y/ A6 i2 h3 f& L, k9 P
<body>
a$ u2 n7 ?7 f& W
<img id="receiver" style="width:720px;height:480px">8 ~& q" |1 @3 P$ W
5 _+ A" ?6 N2 [* c+ f: L
<script type="text/javascript" charset="utf-8">
, M A, x! |% Q
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");4 q' u( v. i! L& C
var image = document.getElementById('receiver');; q: E1 d- M# h m8 J
receiver_socket.onmessage = function(data) {
* k4 m" m* F* Q; w: z. g
console.log(data.data);
1 W; ` m8 X! k( q/ A: Z% a9 G
image.src = data.data;
0 }# R0 q/ B8 e* y
}
: W) P$ v7 l+ W8 |- ^
</script>% J1 T- Z6 B4 Z! E
</body>* X, T1 Y3 ]+ Y: H3 x6 n- v
</html>
+ n3 D1 Q6 S: r! \7 E* p; T
+ \6 B# y5 p2 ^( e

复制代码

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

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

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