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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
E$ V% J* Y6 d
$client=array();8 \" @, b' s4 }; F4 C
$serv->on("open",function($serv,$req)use($client){9 _( X) s0 D" [# m) w* O
//echo 'connect'.$req->fd;
3 i' G% c, h3 T) g# X' K
$client[]=$req;
/ W n7 X- H$ O. p! n |4 E* o$ F
//var_dump($client);
! I3 _: r5 r5 D0 u* K! Q
$serv->push($req->fd,'aa');
9 J4 b- D+ n L8 m& L
});6 X( `" ~% h0 n, }9 [$ u9 l
- ?. Z( F0 }! s& G G
$serv->on("message",function($serv,$frame)use ($client){; p2 r* F# e& c- w
/*var_dump($frame->data);
e4 Z( d+ O' J3 n6 W. J, M
foreach($client as $key =>$val){; R) A( M8 e9 @/ b
$serv->push($val->fd,'aa');
# v6 q% s! S0 L0 r: G5 T1 \2 A
}*/
6 i, f5 ^9 u" s' \" V
$client=$serv->connection_list();) D( R m: q6 P, Y
var_dump($client);4 V- @5 P% g% g) w. Y
foreach($client as $key =>$val){
. x. X$ N; R# j6 J+ S4 ~
if($val!=$frame->fd){: \) e) T7 l0 H# M4 r7 x2 x$ x
$serv->push($val,$frame->data);8 h$ V- B9 a0 S
}3 e/ W, {9 g7 j/ E: P/ p
}, \4 S4 q# Y- _/ g+ V" \5 M
, J4 E! w6 b% x! l0 }& h
});
4 O/ ^. c" N+ L3 ~
. Z, k. v$ Y& Q+ H2 {% K- i* J
$serv->on("close",function($serv,$fd){
0 @, E! n, f0 D9 l# K" A
echo 'close';, s. O6 h+ b& L ~* \; q( i$ m% y: h
});! `' f: u$ }( r* |
' D% B+ |( t7 L8 _- b/ N
$serv->start();# V1 j9 V8 U+ D0 t' W
0 R* P# n& k) e

复制代码

主播客户端

<!doctype html>+ Q6 h5 A7 v; t
<html>
" }; @% c$ S$ T5 Q1 p& X
<head>
, S. q! L2 b' O: O b
<meta charset="utf-8">
6 S( O' V4 q1 ?7 h& U+ k
& D O" X5 V7 N4 x# a
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">5 s- A- [1 V4 ~) ~
<title>404</title> F4 z X& n, @! a3 W
<style>3 I6 |; {, r4 a% ~, t+ x/ Y! C
body{
4 [# K! Q: _9 K& P+ N: O6 K; F
background-color:#444;2 p" H' ?+ a! M7 v& {( {7 K3 `3 q( c
font-size:14px;
2 r" ?/ f9 z2 B- ^+ p
}
+ Q e0 f; D5 f5 u- }2 ^: N8 D
h3{; F* R, ?7 k6 d: w4 Y, _
font-size:60px;. |; @- q) k8 x+ ?. a. F. ?
color:#eee;% W" o2 k9 R" [. O- V' W: a# o
text-align:center;
2 G+ B: G* u: o! n& ~9 ^" j' c
padding-top:30px;! P" t/ `7 ~# Q
font-weight:normal;: A# |0 x* B3 I$ W
}( L, s+ s2 l- q7 r: H6 C/ |
</style> l6 i& t2 ]! Z. k
</head>% P: z3 O M, d- l/ p1 x) w
7 M- f5 U: i% U5 A4 O
<body>8 F/ m# ?" [% o
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video># C" r! D9 q2 @% I1 V
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
% a3 q- z L& b7 y3 n# @
<canvas width="400" id="canvas2" height="400" ></canvas>" x) J3 w8 R/ s1 ?, F4 J: u: `% s- l: m
<script>" h' V2 |: K6 V0 l/ [4 _
var video=document.getElementById('video');- _" O1 w6 J, A2 Y
var canvas=document.getElementById('canvas');, h/ D/ `1 g5 U, ?
var canvas2=document.getElementById('canvas2');
2 G H( a- r1 J2 a+ N0 Y7 `$ ]
var context=canvas.getContext('2d');
% n# x" I. y1 f0 g: f
var context2=canvas2.getContext('2d');
1 l! B5 s. q2 f
function draw(){/ V: G3 l7 I/ L2 _1 N0 K0 |
context.drawImage(video,0,0,400,400);
' N% n( N. C5 L6 s; Z4 C
ws.send(canvas.toDataURL('image/jpeg',0.8));- i9 M+ h# @5 l1 g, c& G. }7 q8 F
setTimeout(draw,800);
/ {9 @" ~; S) ~; ~( ^
}+ P3 [+ _) C& E* U+ W
$ e- O5 u3 }! `# @4 F! A9 O
//客户端跟服务端通讯
# e7 x& ~1 Q8 L0 Y1 Y$ M: Z# p i
if (window.MozWebSocket)
) M' ~+ n1 S4 B6 \9 {. j
{
8 d6 |; n/ E, @! i
ws = new MozWebSocket("ws://182.61.42.187:9501");
! [& o- T& g/ m S
} else& U* x; z1 o, B, I- A" E
{
( c( q) f0 |+ I5 ?$ A$ W4 F1 G
ws = new WebSocket("ws://182.61.42.187:9501");; x) h8 F% b6 l! E, Y
}8 V9 B# e# }- i
q. t5 z9 L) j# }
ws.onopen=function(event){- k9 ]; j6 l1 ]! ?+ ?
alert('连接成功');! s% k9 }5 [. N1 z# V. b
ws.binaryType = 'arraybuffer';
" K& [7 o6 b* U/ f3 Q' b
draw();9 A+ Q3 v* L/ ?; j2 A) K! H
}8 u( C$ [0 j' g& W8 J
ws.onmessage=function(event){
8 Y$ H$ ^6 \% x7 L
//alert(event.data);1 x1 x5 Z1 R: l: q
//ws.send(event.data+"client");& }+ k- |5 p! F1 ?6 X# C# W
qrCodeImg = new Image();
0 f4 Z1 Z4 I% Q N/ L& Z+ p# u' r
qrCodeImg.src = event.data;
' I0 `& U3 {$ {* o
context2.drawImage(qrCodeImg, 0, 0, 400, 400);) e8 V5 Y# |/ l7 e% T
+ K2 a1 x- f6 I. B: b( p
}1 ~7 {7 \5 F5 y0 P
ws.onclose=function(event){
' S, Z) t5 t* |4 {( h, t6 N
alert('close');
+ w/ H) m" q+ P s* b; `
}
1 @/ y4 `- |, X: A/ ?
ws.onerror=function(event){
* c9 q1 w: h; k" G2 D; f. ~9 @
alert('error');5 C: M p3 d0 R3 Q8 b4 M
}
) e# _! b" t# B% w, c/ R9 M
//video，标签模拟视频6 z4 D% m V% `& ?
5 R( R/ N' Z1 H3 J7 Y- a9 F0 t
</script>2 S, ^: Q7 N6 N0 Z( e3 n) K
</body>
0 j- [2 u4 _; y0 ^3 a
</html>5 d- R. ` F* p2 ], F- g
, G" P w2 ]3 Q; \; p2 Z0 B6 g

复制代码

客户端：

<html>* v) ]% Q$ K3 K' [
<head>
3 |. z, G) I( o; X* \
<meta http-equiv="content-type" content="text/html; charset=utf-8">
5 f- k' K8 u) `" d% C7 O1 y+ Y
<title>客户端直播页面</title>: [2 w% A' a1 g( Y2 c$ Y+ A
</head>+ R' o% g( ]# E. F
<body>0 `$ x2 \( @8 X2 k8 J6 n: ]
<img id="receiver" style="width:720px;height:480px">$ P3 D* ^3 ?6 N. H9 W. F
% D8 v- c0 r7 W8 {" @" i6 n; B
<script type="text/javascript" charset="utf-8">
! {" d+ ^1 v3 v
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
' Y" g: P* B3 M+ _3 S0 }# U: l
var image = document.getElementById('receiver');
# ^) ?$ C7 F* Y0 M- [
receiver_socket.onmessage = function(data) {
- ~: g; @/ y& S) T
console.log(data.data);" V5 |$ j3 W! _+ {/ w3 V: N
image.src = data.data;( d6 f1 @1 D. ^8 t9 k! n2 v* @
} P6 |; `3 P9 w& a
</script>9 D/ L% y* _( t5 v
</body>
8 D9 @+ S5 B+ k3 G( N! \
</html>5 ?+ Y9 h/ K+ y2 {9 p$ ^
1 ]2 t/ r& ]. o6 ^

复制代码

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

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

浏览过的版块

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

浏览过的版块

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