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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);6 {% h# F# W8 C* D4 `, }
$client=array();9 Z b5 \3 H3 ~; A" e
$serv->on("open",function($serv,$req)use($client){
0 O6 `& a, k6 i- m
//echo 'connect'.$req->fd;2 X9 @, {9 T' x* e7 E B
$client[]=$req;
- j! Y, S, \, c/ U8 D1 U$ j
//var_dump($client);0 M7 O2 O0 U2 | i
$serv->push($req->fd,'aa');
) X) m$ c3 Y) c5 A: Y1 z
});
9 m, `$ k4 }! B* M
2 o8 T' q4 H) U% Z& o' H
$serv->on("message",function($serv,$frame)use ($client){! b- ]: B8 o$ |9 i4 }( O
/*var_dump($frame->data);
# u0 f1 N$ I6 I1 E& ~. v: V5 k
foreach($client as $key =>$val){4 b+ P- W P! I9 X
$serv->push($val->fd,'aa');
+ I, Y% A7 r1 F+ O
}*/( v( P6 k# U, L7 Y- L* m+ V
$client=$serv->connection_list();
) a/ r# y4 u1 |
var_dump($client); a, p4 `9 w; G* A9 s
foreach($client as $key =>$val){
: `8 o& G& |# m9 A' b. H
if($val!=$frame->fd){! P/ R4 q; d% D0 _. i1 s
$serv->push($val,$frame->data);# b8 @" T/ s. C! C
}8 B- q7 N+ B2 x4 w
}
3 v2 s& @& Z6 {& e7 @; H
' ]4 n! d, o7 e8 O" o& E
});
4 J; n$ W& j5 H. d4 _" ]
7 y T* V+ m; N$ a: C
$serv->on("close",function($serv,$fd){( C# J1 e5 h" H- i5 K. {) c
echo 'close';
3 C! t7 N9 ~& {- [8 k
});
U/ m* `2 P7 H9 f; m" \$ B
% ]% ?9 ]" ^0 ?9 B4 \3 Y' U" j* B! J
$serv->start();
8 d9 }# t T; p o
7 u/ p7 j. b& w0 [5 W* Q

复制代码

主播客户端

<!doctype html>9 B' s V$ M( l
<html>
\8 x) E8 B7 D' a L: j# s
<head>
9 N! p# a: k0 R6 g% x
<meta charset="utf-8">5 I3 v: r4 v4 W- m
) H4 Z% p" p/ E+ W9 M
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
( K+ \+ S) T4 _6 S
<title>404</title># C) h- p" }1 n1 r% a8 g
<style>2 n" @5 i+ _3 v* o5 C
body{5 `$ m+ P- \! _7 \! [
background-color:#444;2 \, }' Q6 ~8 s" ^6 l
font-size:14px;# g3 B2 r) W1 G7 t/ W8 M; ?6 b4 {
}
: [/ c# M- i! n; z7 P; c
h3{
0 }5 r- a- L' x& {+ p6 q) i
font-size:60px;1 t; U F/ u" }& f4 f" X+ r6 A
color:#eee; R' x: d9 ?! W- Q% m
text-align:center;0 i8 `& M4 f6 A6 U
padding-top:30px;
; [ r, A% n4 W% L; }9 {
font-weight:normal;) J& c) I, V' k% b
}4 p, G* b( t/ e. E C" H z
</style>
1 s4 c; {& @# s) {& f
</head>, M. `: D8 e% i
- y* Z% d2 K2 }" G3 G- K9 a
<body>
1 l8 P0 v, M, e% \5 W+ \$ `7 E* R0 z- e
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
* q2 }" G2 i3 E
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
+ `$ z& E0 F3 J% I) }9 Z
<canvas width="400" id="canvas2" height="400" ></canvas>
6 K( _. _. @7 l( k8 [
<script>4 V4 C( L8 j* C
var video=document.getElementById('video');
# K( Q6 z% B" v, z; s
var canvas=document.getElementById('canvas');
4 C# q$ O$ _' S+ z
var canvas2=document.getElementById('canvas2');6 j E% V- b( ?
var context=canvas.getContext('2d');5 }8 O* W2 P: u1 p% [. ], y$ W6 A. |
var context2=canvas2.getContext('2d');9 D, Z4 _7 J, ^( b* K
function draw(){
: n5 G" {+ _* {& c# K3 I8 E' J
context.drawImage(video,0,0,400,400);
! b+ ]0 l% r/ r/ m# u+ @
ws.send(canvas.toDataURL('image/jpeg',0.8)); x) k6 s) ^) Z; [3 G+ ^
setTimeout(draw,800);
2 D* q3 K1 y# s
}0 R: P* N; Y9 h6 u2 m: N$ j
: I; E6 G0 A, q' j |
//客户端跟服务端通讯+ f5 O: i J2 C
if (window.MozWebSocket); P4 z/ B. l% m1 h
{0 L4 v D( k, M- `5 ?' e
ws = new MozWebSocket("ws://182.61.42.187:9501");
7 k% ^, t9 ^3 m, F1 ~# H
} else
% ]. I! J+ w3 r. p3 r
{
, ?5 b, D. L1 y( I
ws = new WebSocket("ws://182.61.42.187:9501");
* m$ \, @. f" H1 Q
}& B( p3 e8 Z n a) B$ u
- ]4 }$ i3 |/ B: T
ws.onopen=function(event){) K9 e9 d: d7 X" H- c- c% t
alert('连接成功');1 S2 x; O) t/ ~4 q2 h3 S6 [0 W: Z
ws.binaryType = 'arraybuffer';/ _* _- U p1 A
draw();
* i" O/ v: ?; g8 K. u
}& g6 j4 _+ F$ k2 R( ^: X; K
ws.onmessage=function(event){! C0 u6 R! a4 W$ X/ P: d: I8 J4 t
//alert(event.data);6 r4 q8 q4 V) \" u% b0 P- {
//ws.send(event.data+"client");
; q, X7 \) x! J! s" n5 i) M
qrCodeImg = new Image();! U. f- D$ I' F% J- @9 g
qrCodeImg.src = event.data;
4 q1 h+ a2 f* B7 k& y( `% B
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
1 V& _% O; X, I7 w: c( m5 c" [
9 v1 O7 i7 q8 F' q" i1 h
}. S- z) s, G* l+ A7 Y8 \. p0 ]# m% X8 Y
ws.onclose=function(event){
( ^! J3 }' `# I4 T3 c
alert('close');/ j3 J& h& l; P- P! {6 ?1 S0 r
}
' `/ H9 G: X8 f0 g8 S# M7 h- ^; t4 d
ws.onerror=function(event){# |+ H% w+ l3 I- S1 f, \$ R
alert('error');
8 o- W' r' g" \
}
* E# K5 ]& ]2 o( s0 f( J
//video，标签模拟视频8 D7 x/ i J( d/ }
0 v5 B% c3 e3 L4 e% _& T- y- C
</script>
( b& `; u: w" | J3 {! n
</body>
2 ?% ]6 v: F8 A6 a5 a
</html>
0 i# {, G7 R/ f
) N- n8 X5 e- |4 I% H- z3 W

复制代码

客户端：

<html>) o- j6 F# k# G5 e9 ^4 a% m8 e
<head>* B6 H3 k2 q5 n2 o( J0 `4 k
<meta http-equiv="content-type" content="text/html; charset=utf-8">
3 c: M! i r( F+ w( k' C A" E/ \
<title>客户端直播页面</title>, Q; h3 M3 ~* L8 B7 Y5 S4 ]+ C
</head>
3 O/ _& |$ {+ {. C6 |2 J) N$ Q
<body>
2 E5 q! |; l+ J& a, X
<img id="receiver" style="width:720px;height:480px">
% ~, S5 u# P. \3 o4 B, \
! L0 W6 H0 n9 n. [- ?3 ]6 D
<script type="text/javascript" charset="utf-8">
. v: u# l7 _7 B/ O# P/ p
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");3 s3 _. E- F% p2 v! S3 K( a+ M$ d
var image = document.getElementById('receiver');- G1 u% t# [/ W' q, @
receiver_socket.onmessage = function(data) {
- C% M& E* E2 ?" A
console.log(data.data);% N: ` l& d g
image.src = data.data;
2 ?! Q! r; z' i* t3 d
}' R, Z+ \6 C$ R7 v; u
</script>
3 Z! n! h2 o, Q! a+ m, U
</body>
8 m* ]) \- f {6 r C# u
</html>
7 y" {' A4 j$ P8 [% d! p
- z q U: U# v& q" w1 R+ ~

复制代码

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

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

浏览过的版块

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

浏览过的版块

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