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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);# Y( K/ L; j. `, S. k1 r: D
$client=array();
' x0 E+ y7 ^; M2 q. b5 _7 y
$serv->on("open",function($serv,$req)use($client){% R( _! t; A. D. `6 H: m
//echo 'connect'.$req->fd;
: A- R* H% S- ^: L! l. j
$client[]=$req;
9 P' c" F' N+ @9 W. q* U4 x( d
//var_dump($client);5 l" N+ |! ~+ [: i) z
$serv->push($req->fd,'aa');
& n; J) U! X5 ]% {
});
* m3 Z) G( R7 w# @1 g3 y
) B& g$ O: w2 L: [
$serv->on("message",function($serv,$frame)use ($client){0 m9 f6 i6 p4 U$ A6 Q
/*var_dump($frame->data);* o% i! j8 `9 J! ~7 \) E% c
foreach($client as $key =>$val){
& z, d5 x* Y; b( g# g+ G
$serv->push($val->fd,'aa');
- N1 ~& F/ o$ d T' {
}*/+ ]+ d; u" B# t4 I
$client=$serv->connection_list();
) O: C0 @8 Q2 N/ s5 T! ^
var_dump($client);
: G. B L# I, @, c4 m3 k) g) c
foreach($client as $key =>$val){" u8 g4 |& ^0 ~: Y5 a
if($val!=$frame->fd){
4 X& d7 U. q3 z9 B" F- F- u
$serv->push($val,$frame->data);% k% c( g D- H2 B. ~' p; O
}
7 [6 v s1 w" e; q
}
! M6 V% a E5 ~8 A' d5 Y: _5 U
* R; f4 T/ T4 \7 C
});& z; d. V! y! M2 }# X
( M- k- l4 X, k' p( b! c
$serv->on("close",function($serv,$fd){
, D$ Y$ n8 r) M8 G7 O8 ?
echo 'close';* e: d8 \. D* s5 o8 {) e
});
1 [# }) n( U4 O
! ]& g" ~7 M/ R% |8 N
$serv->start();4 z- t4 d, r8 @: R+ m8 Q' D7 H
3 W: d0 H7 t* X8 {! L' Z1 o+ Z8 q- @

复制代码

主播客户端

<!doctype html>" f7 l+ d' ` k x# f8 b
<html>; _4 C# l0 n" s) H8 t4 E
<head>
, k$ g7 w- P4 m2 K9 i
<meta charset="utf-8">9 ]+ L% n$ u5 [6 b
9 N9 o9 h9 v+ c x4 V) n% A
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
( | a* o1 U0 Q9 \" b7 t# A! L( O
<title>404</title>
. q, P, I0 L: t1 M2 r& X6 u) m
<style>
1 s* v8 }: C! v& ~4 j2 _# w
body{
; @3 P1 v8 f. m* r2 `& |
background-color:#444;3 _+ I, q. W! f6 C* C& p0 W, S
font-size:14px;
) `* J/ N1 Z+ g8 `7 f9 D. f* E1 c+ v4 k
}" D. G0 |- L, x) A
h3{& I# }" `6 w1 `$ }
font-size:60px;/ C9 _( u% g* P" b
color:#eee;
5 v; B+ F2 q9 @( x/ K
text-align:center;
) E) V$ P: S, b) T! [
padding-top:30px;6 J; c0 F$ m% i# ~
font-weight:normal;2 W: v0 l! d2 W) g/ U
}
, N8 z0 }. a& V2 @
</style>/ K0 h5 T5 T" w. e4 D
</head>0 j: A/ [- X* o, z4 n; b: X R9 X/ f
$ G+ ?% U* W. ?1 c, Z, b* B6 S
<body>* U8 L5 K4 `, M1 }' Z/ U
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>5 Q3 R W4 z3 i m. d
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
9 D% M X3 C' j2 }( d
<canvas width="400" id="canvas2" height="400" ></canvas>4 w6 Y7 l* D! x' N; B3 W4 |
<script>7 L% p$ [: q, h6 k! f. z: g
var video=document.getElementById('video');
: }: h! t* Q9 w: N9 d4 s- |3 w- S3 ?
var canvas=document.getElementById('canvas');: K7 j: O9 J4 y5 t
var canvas2=document.getElementById('canvas2');
; G+ U% R. g# [5 [9 {1 D1 U
var context=canvas.getContext('2d');
0 o3 n8 P, E* u1 }* f
var context2=canvas2.getContext('2d');
# {, g4 w& i$ s$ e9 g8 O/ U8 W
function draw(){+ Q6 D& p7 @$ p- x V6 b
context.drawImage(video,0,0,400,400);
% T& v9 |* Z* j6 K0 a3 Z' \
ws.send(canvas.toDataURL('image/jpeg',0.8));- z+ \: m$ e3 Q, m6 J- d ^4 T
setTimeout(draw,800);* D: Q. K% @7 i: {
}
8 F4 D( H" a" N2 t/ z
* _9 v; }. E/ t- w$ W( B X* k
//客户端跟服务端通讯4 z! h: F4 y" b8 W0 J' X) }, Z
if (window.MozWebSocket)
# k2 Q5 Z7 V! u
{
* D+ a5 F3 i) g q
ws = new MozWebSocket("ws://182.61.42.187:9501");5 w$ S$ P2 r3 u% K3 Q2 Z) e
} else
3 l; z# V0 `4 }3 V# q
{, P/ p; Q; a; O- j
ws = new WebSocket("ws://182.61.42.187:9501");
$ o: l9 ?6 s1 s5 e9 m: ?% K
}
! |. t, J3 l+ T1 `- Y' U
9 A* _0 h- F2 t. e7 c+ ~. s; n
ws.onopen=function(event){
# B. h+ C( f" V8 y- A6 m
alert('连接成功');4 n$ a9 u9 U- @9 R
ws.binaryType = 'arraybuffer';
8 j0 J- |! P4 W+ J' k, n$ B: ~
draw();
5 Y/ X; y- ?' W) \
}: S* N. f9 M) i1 w1 r! S, L& ]
ws.onmessage=function(event){5 t& v$ Z: C3 F4 M5 V- V
//alert(event.data);
% ] x; r/ o8 z. {, [. b% a {* x
//ws.send(event.data+"client");1 ~' X$ \" l- S9 N# Q
qrCodeImg = new Image();
, J2 e5 Z) b7 K% k
qrCodeImg.src = event.data;
1 P, b' Z7 C. n3 h3 C6 H1 ~) E
context2.drawImage(qrCodeImg, 0, 0, 400, 400);& w) q. F) y- b, X$ R
( Z8 ^0 V; g( k6 M, o# F8 o4 s% G
}/ W# _; L! C7 V$ Z9 e+ g; j6 @, g! ?
ws.onclose=function(event){# A* U5 V+ J4 }) r+ v/ j" H
alert('close');
4 u0 P: C2 ~: v
}
* `# \$ j" Z- o; o5 R4 H
ws.onerror=function(event){7 B# [6 v8 M0 r
alert('error');2 e# @5 \8 b n) x4 b1 V5 Y! w
}, N* P1 O4 S" g2 }$ K+ W
//video，标签模拟视频
% c* n% |0 L* O, x0 s
% a1 r7 @) O& @& w- T0 y
</script>; Q, l- W! r+ t' D; A2 L8 B
</body>) o) f: [; S# h6 ^/ D2 j
</html>
! K( d+ W8 \" T. j( C
! t& t! _3 O" d5 ?: b0 w

复制代码

客户端：

<html>
* J4 \% Z j" o; h) ^
<head>
0 X2 d0 L. K9 e- f X' V
<meta http-equiv="content-type" content="text/html; charset=utf-8">% t' v( A( d$ W8 |7 F) p
<title>客户端直播页面</title>( w$ A, d* d- j
</head>
" A! r5 y( b8 E" S+ b
<body># h3 E: K( \, k. d, \$ ]- D
<img id="receiver" style="width:720px;height:480px">9 \" z' S' J6 V" e* O
4 t4 u3 q2 J" ~) R! b) Q0 R
<script type="text/javascript" charset="utf-8">
4 q+ m0 U) u0 b( ~! C( C
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
5 j: t8 r" p+ w) i) ?9 Z4 w
var image = document.getElementById('receiver');
8 J% T# | Q/ v* J/ T
receiver_socket.onmessage = function(data) {; g8 v3 m. h# l! _
console.log(data.data);4 C1 s0 ]+ r2 [9 t) l D$ ?
image.src = data.data;
# J+ h U7 k8 ]. E* I: l; j
}
3 y4 v3 V F5 L9 Z$ Y
</script>
! _7 |" ~. S5 Z6 e0 F6 ]1 L3 n
</body>: @( G7 j- r1 ?
</html>
. o: {: p. d! O; D2 p: X5 h
: E0 D; V) Z; ]' s& M4 S) E

复制代码

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

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

浏览过的版块

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

浏览过的版块

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