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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);. x0 z, }! n! ~+ P* C) V
$client=array();5 m$ J( I, l6 J( U7 V
$serv->on("open",function($serv,$req)use($client){8 t9 N6 h1 m0 ~" w4 g
//echo 'connect'.$req->fd;
) M/ |( y; ]0 b0 K2 j
$client[]=$req;
1 D8 w; e; \- v6 i
//var_dump($client);" W( S+ |, P5 [ S
$serv->push($req->fd,'aa');
9 {+ C/ U# W. \7 a( @$ Z
});* T+ \: J! G6 d8 {
" ~3 S6 V" @1 V2 y
$serv->on("message",function($serv,$frame)use ($client){
e3 U% K) V: G3 _, t
/*var_dump($frame->data);6 q5 @+ p' h/ r1 L, h
foreach($client as $key =>$val){2 ^2 H) m' M, j/ F) Z1 H
$serv->push($val->fd,'aa'); B; _. Q$ q% B; Y; V4 a* v
}*/
9 R$ e h6 y6 D7 M* j0 i
$client=$serv->connection_list();" @! ]/ }! V; H4 i% X; t" y0 S0 D
var_dump($client);* G6 c$ D7 t$ U
foreach($client as $key =>$val){
, P" J) Y+ o% J1 W3 E# ]
if($val!=$frame->fd){
) N5 P/ Y' A8 q1 i
$serv->push($val,$frame->data);. B* @; k' K. g6 s3 z* E& }
}) [+ ?8 ^" m# g, `& F' B
}( y) t, R6 i$ ^- g4 x% |) `- L
$ D& Q; m' h+ l5 g& Q/ a
});
# N {6 @9 Q+ e
2 w4 z, N" o% J
$serv->on("close",function($serv,$fd){5 ?6 C/ e) A" b( R. _% \
echo 'close';. E* x4 I. d' X* E/ ]& g @0 ~
});
8 y; P4 n& O/ ^7 d5 f/ q j
2 G3 d; X( @* I2 a- P0 ]/ S+ z
$serv->start();
* z: i, d$ }( q4 ]
' I2 G8 K, `7 O+ D, b

复制代码

主播客户端

<!doctype html># ^! K) V. j% l1 [3 O
<html>1 u" s% i' `7 j7 t, y
<head>
. b! P$ v' g1 Z. j; m; t
<meta charset="utf-8">3 X9 d- ^6 I7 C1 a X% c
% |3 l$ ?6 O; ?. b& G ~
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">2 c2 G2 |6 Q# `( _; n8 t3 T
<title>404</title>. \/ H& H+ n# s, i) H6 e
<style>
0 p4 Q$ f- J2 r! S
body{
]. h. G% w% J7 @( v+ I. D
background-color:#444;0 C2 M c/ m' m% Q
font-size:14px;
: C( p, y% A' m- k9 r1 J' X+ G
}# Q$ V! R/ ~ F4 u3 n7 h% W, p
h3{8 n! c; n: }# c9 g& E
font-size:60px;- J# a1 K1 d8 i
color:#eee;, A3 R5 e: Q6 |
text-align:center;
1 H# k) F! t8 K- u+ _& c' k
padding-top:30px;- m* x9 L: [" r' M& Y" x2 S
font-weight:normal;
" E: j4 T& j2 B9 k# f
}
8 X$ J# q( x# n/ T: U0 B* S
</style>
( H- ?) F! a' d% }% x
</head>
- x5 B' `" m5 x) X- T
4 O6 P. d: H: {( _) r9 O8 l- s
<body>
! A4 u- \3 p! L- ]1 u' L/ q0 C" R
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
& p3 o/ f- v9 `1 g2 F. r0 _ P
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
' D, ^4 a2 w! r4 t! {5 d( V
<canvas width="400" id="canvas2" height="400" ></canvas>" |9 E3 ?! G& L7 H/ U6 ?) `
<script>
1 i; ^0 ~# v9 T( U1 \
var video=document.getElementById('video');7 q, q- i t/ w! h
var canvas=document.getElementById('canvas');
6 p+ ]7 e5 X D7 }4 _% Y
var canvas2=document.getElementById('canvas2');
. a: I q7 i; Q+ q8 b' Q
var context=canvas.getContext('2d');
/ k2 W( H, l3 X6 s- M4 x/ u$ B' G1 T
var context2=canvas2.getContext('2d');2 V/ M( R7 k6 W! J# a/ U# V; I; I. v
function draw(){% {: ~, t7 M) Q$ t9 f0 |+ E. {; o
context.drawImage(video,0,0,400,400);
) B8 f( c. r: B- T" q: x1 L
ws.send(canvas.toDataURL('image/jpeg',0.8));" ^) q- u, M, J* a5 {
setTimeout(draw,800);
$ p% q* o% B( c8 b" q7 J
}' A, h& E, }3 B% Y) b; H Z
4 f0 _+ i& E: X( n I$ L3 q0 P
//客户端跟服务端通讯" S e+ ~3 o% T" ^4 M+ S" B
if (window.MozWebSocket)7 x$ f; Q8 s; Z6 A
{
; F. [& j$ |4 Y+ } r, i+ p( K
ws = new MozWebSocket("ws://182.61.42.187:9501");# Y* ~ B4 i5 {3 z/ y
} else
. ?0 ^; w9 ?% w+ j* F
{
' r9 y! o+ ]8 M3 G0 |. W
ws = new WebSocket("ws://182.61.42.187:9501");
3 Z( ]6 E$ H# k1 ^
}
( ^, H8 P( T; g9 V
, i! G. l6 _6 D3 B
ws.onopen=function(event){
3 i+ q; q$ c$ o( q: J+ e- F
alert('连接成功');
& h# L. ^8 l- y' x
ws.binaryType = 'arraybuffer';
2 o% I) Q4 l9 _$ B. j
draw();
& ]- u; \0 @& f! l! B3 I, U
}" r+ ?6 ]& S& p. b
ws.onmessage=function(event){
& X: f U V9 d# V6 d4 R
//alert(event.data);5 A# i" w% H3 t! D
//ws.send(event.data+"client");
5 L* D: f2 x" K& G
qrCodeImg = new Image();* N) \& x) ^0 H& p2 E
qrCodeImg.src = event.data;
& S% v" C. C) O x
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
! E, z1 s$ ~1 V& R9 i7 ~; V* y
9 }" ]$ S4 o% z7 _/ P9 \
}
. \% }9 l* S h# s0 V) d5 u: e; A4 D
ws.onclose=function(event){
) }. w7 X, E$ E
alert('close');
" {1 W- f9 W) q- |3 X' G
}2 x% i: K3 Q! n& x' A3 F1 y" t+ m
ws.onerror=function(event){
4 t- ^6 u9 K. h( s+ L
alert('error');6 a- l( s' z2 P% O
}
; o$ r) p8 O1 m( o: O1 f
//video，标签模拟视频
; U' G: B* V2 x, l% o4 m* g
& Z/ e! K" \ z! H2 _( K
</script>+ h2 f0 X6 |$ y) P
</body>! C+ M/ N5 @+ F9 b. f
</html>
9 i% W- |3 A, q+ J) U
# w K1 J7 S9 j8 F7 n d0 h

复制代码

客户端：

<html>. A/ N7 s8 _/ e9 l" n" j
<head>% o9 z2 R% ]% z2 H1 d
<meta http-equiv="content-type" content="text/html; charset=utf-8">+ N) I! @: A9 G2 m; R' n' k
<title>客户端直播页面</title>+ A6 K: V2 p U5 u
</head>
% z1 }7 w: Y( s) Z, l
<body>' ^0 z' L9 ~ X, H: S; h7 m- ^+ D
<img id="receiver" style="width:720px;height:480px">* K! H* J, l5 P: y- Q0 r: G. Z( Q3 ^
3 ?0 A7 j0 f7 I* p9 J& ~
<script type="text/javascript" charset="utf-8">) \2 J5 j( C$ S6 o1 V; E, b
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
" ]! ?$ b; h: g6 g) k
var image = document.getElementById('receiver');! r4 v$ N/ O& c5 G8 X* X3 @
receiver_socket.onmessage = function(data) {
1 w5 ^7 S; [! r9 A( g* a: i& y
console.log(data.data);
! l( k b& _: ]! E
image.src = data.data;
5 G6 R1 j4 ~$ \& [/ I. u
}7 e% c% _7 N# C4 B$ |4 V6 n
</script>
J; ~5 s; G( K. z* w$ M) e
</body>/ B' \( H2 Z. p0 \, f9 b; c/ @& l5 [
</html>7 l0 r0 k) S7 ?# u2 v+ }8 j
" M0 P4 k" t& F" G# g

复制代码

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

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

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