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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);6 T+ l4 N4 g6 D/ I! U: j; D
$client=array();
& B7 X8 H8 ~* m1 S
$serv->on("open",function($serv,$req)use($client){! y+ Q& T6 e: Z5 l# N' @0 I8 W3 s
//echo 'connect'.$req->fd;
* _9 n7 q7 t& |7 A! G
$client[]=$req;3 ?7 k+ x% Y& l: ~8 @: N0 O
//var_dump($client);! n, M9 f2 r/ k( i; u5 J
$serv->push($req->fd,'aa');$ i5 t k/ S: Z" s9 l1 S
});! J' z4 f' [1 u2 M5 R
5 U& r/ E' G- b$ ?4 \
$serv->on("message",function($serv,$frame)use ($client){3 }+ G5 m8 V, ^
/*var_dump($frame->data);
9 H3 e6 {* m& Q1 `* N/ T
foreach($client as $key =>$val){
6 M0 t0 A+ r) F w2 P+ W+ p- M
$serv->push($val->fd,'aa');, P( d1 e3 m9 b+ Y3 B6 b7 x
}*/
9 f y+ P1 t4 x/ b
$client=$serv->connection_list();
. H" D8 t, S. D$ g# B, ?8 Z/ C
var_dump($client);
1 f: O, c; C4 z; W
foreach($client as $key =>$val){4 @0 x3 G2 w" z2 Q5 d8 @
if($val!=$frame->fd){1 V! @( ~( p5 }2 o# z& T
$serv->push($val,$frame->data);- S# G. ^. N8 [7 J. B# y$ t
}
2 Q: W- v2 h4 ~
}+ C. h1 `) A! ?& V1 @* A
8 W4 R2 s6 q8 l3 m" A- V4 K
});& x! ^* u# g5 y; ^6 [ b% A
2 J% A: V7 j" E8 G* i# q+ R9 z
$serv->on("close",function($serv,$fd){
' T/ r$ }. T6 d* }
echo 'close';3 c3 P( {' u4 ~& M* F
});+ B0 U+ u7 s, Z
( \1 ?) ^, `- E/ N& o( [
$serv->start();
) w! l$ ^& d. f/ b, u8 t: M
# q3 |" S* @, q% t& L" N0 y

复制代码

主播客户端

<!doctype html>
& T% L# Z' f; t( b+ W
<html>+ W/ m1 S" D4 b
<head>
$ F3 m) H+ B5 \3 E" l5 B" j
<meta charset="utf-8">
! ^; L6 Y: f& j( B- Y$ Z9 Q# Q
0 P( ~" u8 X' ~' H/ @7 a# J
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
! L8 t0 H. f1 c# {1 j- |' p
<title>404</title>
% o8 j$ H7 ]. T& |6 V% ?2 Y
<style>
- h3 ?" c7 g6 G" p
body{
$ ]; p( g, T0 h
background-color:#444;
3 o, C6 T$ b2 Q! ^) u* j% O' _
font-size:14px;9 U: |8 Z1 O+ m Y3 Y: h# t
}
& A3 I1 f9 O1 R: e1 ~( |* @. D
h3{3 u* E; K( `7 v2 t4 P; J5 N9 D
font-size:60px;
$ Y+ {, S7 O2 u( C) [% h) O* w
color:#eee;' S8 ~2 k+ K& T- M# o( k3 f2 x7 `4 F" m
text-align:center;8 `$ i( p6 z2 p5 s) N% Z% H
padding-top:30px;, J+ S$ n) ^6 }) V ~" F7 {2 @
font-weight:normal;9 |( y6 q7 l; b
}, g7 i. _7 n1 q! m0 r: T, Q* \
</style>& h0 E6 R0 s, H/ R* \" X2 q
</head>
1 N$ h) _" P$ I7 R1 _( C1 L
$ g( J) h' E$ E H
<body>
) G) P/ ?- y* q
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
: d* }7 l- I$ c) K5 R2 g
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>, D1 m$ y" |) ?% O' t$ E l9 Q4 A
<canvas width="400" id="canvas2" height="400" ></canvas>9 B8 C0 p( n3 E
<script># T. j7 J% w6 ~9 h
var video=document.getElementById('video');# _: q7 Q" k- p4 [; Q
var canvas=document.getElementById('canvas');
0 h9 n9 n. E) q0 X+ `2 W+ m t3 F
var canvas2=document.getElementById('canvas2');
/ |: C4 X3 @% l s4 m; a5 w- ]
var context=canvas.getContext('2d');; |$ o* |/ F0 w
var context2=canvas2.getContext('2d');$ @* g0 |: H y1 m- w
function draw(){
( N. g7 S6 m' w. S9 O0 e
context.drawImage(video,0,0,400,400);' j0 k0 w& N K; H( x( |
ws.send(canvas.toDataURL('image/jpeg',0.8));5 A' a9 L! @0 _
setTimeout(draw,800);
2 U' a" G& H- q) Q- J. |0 Q. h; S5 U
}
* H* |) R. e6 [9 O
2 V# t+ E# Q0 V/ r; ?9 [
//客户端跟服务端通讯
) V$ D) w% {4 s5 }
if (window.MozWebSocket)
8 z3 M; I0 l7 g1 `- |
{
$ q4 Z2 E. A! a4 Y
ws = new MozWebSocket("ws://182.61.42.187:9501"); V6 a5 @; ~" L7 K4 S- D
} else
( g }8 ?& z% G
{
! ~+ v( E0 Y* }! m5 ~1 q+ Z9 L
ws = new WebSocket("ws://182.61.42.187:9501");- h% \5 @% S5 A7 L# C6 E& z; \
}) ]3 S+ D* J- m- L* z# H
3 y1 \" O" Y+ z& R, P5 ~$ F
ws.onopen=function(event){* y; C0 q# y% ~/ k
alert('连接成功');' e8 D1 {# ?. e! I$ ^+ f
ws.binaryType = 'arraybuffer';
9 R) H! \4 m3 R+ I
draw();
* c% _5 V/ U Q+ E8 w1 h
}& ]" c; [) t/ \- ^6 {6 n( g" z" r
ws.onmessage=function(event){/ u2 B1 }$ Q2 G' A' _
//alert(event.data);. k6 p/ }4 Y y- q# e
//ws.send(event.data+"client");
0 Q5 O* M1 {, g: y. {+ i
qrCodeImg = new Image();- U; c3 ?% x" }8 [- B$ F
qrCodeImg.src = event.data;6 i n; o$ H* O; e
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
' O" e, ^$ g Y' N) C# Y
+ t+ |" t; _$ D2 v8 j3 X# `: S
}
% `; ^* j- s5 o
ws.onclose=function(event){
8 T; J! q6 Z3 Y$ n; S, h( ^
alert('close');
+ F! w3 R7 D/ `+ D- u+ p
}
* K- l( D, \5 K9 |0 ^% j/ K1 @
ws.onerror=function(event){$ p! g) }, e7 l* p
alert('error');
' F j. A0 L% Q
}
: y* v" i; h! p/ f% T& X
//video，标签模拟视频
; G1 D. U8 L$ D, i2 s* ^
3 o% m. E; ~. k3 P& N. v
</script>3 _5 O# g w/ K3 M, ?. h- j: w
</body>5 O* o/ @9 H1 v5 C5 R0 W
</html>- ~' _+ Z1 j3 f
A9 K( l1 |. s3 \7 U

复制代码

客户端：

<html>5 @2 b2 O4 n: |" r
<head>
% \( x9 L7 E1 V& b! q" S+ S3 W3 h
<meta http-equiv="content-type" content="text/html; charset=utf-8">
I+ s0 ^: p+ D% R
<title>客户端直播页面</title>
" N) o* ~6 S/ Z2 d; M! s4 G a! k
</head>' \8 s7 v2 y3 A# Z! n. q; F! y
<body>
$ W7 T+ T4 J+ E5 D2 D$ P1 g( ?2 W
<img id="receiver" style="width:720px;height:480px">
; b. H& W& G* r2 X7 h) C
" f: Y3 r1 M5 z' _9 l* X' n7 m
<script type="text/javascript" charset="utf-8">
0 i2 q+ U0 R; m& g
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
8 P* a0 X( e/ r* c; E6 p H
var image = document.getElementById('receiver');
. K: E4 u( v4 P5 V3 q
receiver_socket.onmessage = function(data) {7 ?4 M( c- w3 p l
console.log(data.data);
) Z1 x$ t% y+ ~& x7 Q0 N* `
image.src = data.data;
, g7 T# a& j1 c, @
}9 \# |% u: \, V$ ?9 h* @# J) K
</script>
. @ D8 I# |1 q2 m
</body>
6 j, _/ R) ~, Y
</html>
) Z$ e/ U* o5 O: B
8 j3 j! h" C' I

复制代码

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

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

浏览过的版块

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

浏览过的版块

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