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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);7 J- ]# K! c6 c1 M$ n% `* \: W( b
$client=array();) ^8 N7 ]6 u% l: }1 g# }$ W0 T8 [
$serv->on("open",function($serv,$req)use($client){) D0 q/ c6 T2 p* U O# v& V
//echo 'connect'.$req->fd;
& l, Q2 }: [ y5 s
$client[]=$req;
3 L' l2 t% N/ I) s, w. {* T
//var_dump($client);
" H% V. d" v5 h2 Y+ C, R
$serv->push($req->fd,'aa');" z3 U. |# U4 a9 B; S
});, H, t7 D# A$ y9 @+ h
/ L/ i" a2 d6 Z ]; v, @
$serv->on("message",function($serv,$frame)use ($client){
# v9 H, z% H: y! o& a
/*var_dump($frame->data);
) q8 ~0 _$ P8 y3 d6 ?- X
foreach($client as $key =>$val){8 N. u; s- \( B- n' r6 u! V
$serv->push($val->fd,'aa');8 Y% l6 i9 q6 }( w
}*/
/ X6 e6 i1 \* b) T: U$ p
$client=$serv->connection_list();
t Q, }8 V* X4 E# b
var_dump($client);
0 O/ s1 r; ^6 L/ Q, h) \) H
foreach($client as $key =>$val){
3 E! P4 z9 K1 P1 e
if($val!=$frame->fd){8 A: n/ j6 L2 @. N! M
$serv->push($val,$frame->data);0 l+ W3 g7 D. c p9 G
}+ f- d/ U" |/ {+ L! _6 @7 N
}
1 }# w' i7 G. s/ n m P) q
1 F9 J0 {& K! [& n* t3 A
});
1 p% J' ^# c7 r" i- F: u
8 ^) H) K. S2 p) Q. n( L% s) a
$serv->on("close",function($serv,$fd){8 C/ S+ j n# y: [% e }0 _. D
echo 'close';
$ n7 y/ Z( ?( Q- z) L
});. s' B+ d6 `5 Y8 p6 O6 D/ ^
, x3 Q7 f K" v% ^, f8 `7 R' ~- M- u
$serv->start();
% k& l! b, K. ~' B X' B
2 o6 }. L: D7 O& S8 ~

复制代码

主播客户端

<!doctype html>
# ^% r% \4 U; a% X! H& H# u
<html>0 M# ]0 h: O! Z9 z1 d
<head>
- S0 |, ]4 a( B" g; ^
<meta charset="utf-8">3 ?" ~1 W. y. z! K/ b5 i. Y
2 a# x b# O2 k9 c- @1 C7 d! ]
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
& z- u& n. e; i
<title>404</title>
/ Q* b, r! ~, G* ~
<style>3 n; B" F6 I4 @
body{: g# K7 u: u n8 L; c
background-color:#444;, l! Z/ |' V6 {
font-size:14px;
6 U- P6 r2 c: l& c) b3 g5 q7 X
}$ o; r7 z( ~9 [5 x
h3{
! L3 F! k) C4 D8 L9 V
font-size:60px; @6 Z9 u1 m( i$ P+ ~8 a
color:#eee;
7 M ~ `0 e5 O' i: c7 @' V
text-align:center;6 W2 m' ~ H' Q1 }4 R2 |
padding-top:30px;( g* n6 h7 k% n# @
font-weight:normal;
6 ?0 Y+ Z8 N& n7 N
}
4 X: \7 V4 w9 t# M* R5 J& G% x" P
</style>
$ g1 ^6 L* v) Z6 @. j7 p! }& k" d6 \
</head>/ T/ a6 _! L: O9 {$ y! D
& |& M6 q5 _9 j% f! U' k7 W; k5 k, U) A
<body>$ _; N& b. a: L) `
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>" d3 B4 l3 c* I4 ~/ H% I+ S
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
: o* S* H- `3 H6 p3 v1 B. q
<canvas width="400" id="canvas2" height="400" ></canvas>
; ~$ e9 f) w3 i4 z! Z6 c
<script>
3 h4 P9 y; }" E9 e$ x: q7 I) O
var video=document.getElementById('video');
& X3 U$ L! Z0 n4 h' r7 ]& l
var canvas=document.getElementById('canvas');
8 x* `1 }; W( D
var canvas2=document.getElementById('canvas2');% r* u; x1 u% W3 }; b, T
var context=canvas.getContext('2d');( K% d z5 |1 |# B% p, Q
var context2=canvas2.getContext('2d');) |0 w2 ~$ t2 V
function draw(){" V$ `+ D9 R9 R) a) x# g( }
context.drawImage(video,0,0,400,400);* t4 I7 y% S) a. s" |$ J K
ws.send(canvas.toDataURL('image/jpeg',0.8));
, o+ N* t- b1 W; E2 v. Z
setTimeout(draw,800);; `5 j% m1 ?2 a/ u0 ]% w
}
0 T) r$ h: F- \+ v8 Z0 `
$ {9 I" E, ^; F' h% Y# g) N3 J
//客户端跟服务端通讯
7 L1 f- v9 W t- }7 y9 X+ y
if (window.MozWebSocket)
) G; Y" w) m( d9 u9 o
{1 @8 u3 l9 r/ ~+ b: Q* @
ws = new MozWebSocket("ws://182.61.42.187:9501");/ a' L& T2 P0 A K" b
} else0 D9 c4 w3 f9 y: O1 _' f
{
8 X5 a1 M4 n+ t( L
ws = new WebSocket("ws://182.61.42.187:9501");9 B/ \: N. P- X+ j, y4 _5 P
}
( I; S$ |4 D+ ?. b* c
( N& }3 v8 u2 a7 i
ws.onopen=function(event){
; u+ C7 t& M6 e% i( ]
alert('连接成功');
# p; A: ?8 i6 q% w$ L8 h# r
ws.binaryType = 'arraybuffer';
4 X$ p2 _. ~0 e t+ ?' U
draw();
" H4 u! O0 ]! _: y5 v4 q1 f9 W
}: {* z4 R+ [ N2 N* t S
ws.onmessage=function(event){9 j8 x) `: x) b
//alert(event.data);4 J# O- a& U6 W& T2 y
//ws.send(event.data+"client");
1 _1 f; D* e) P8 p/ T
qrCodeImg = new Image();
. b6 Y7 G$ w; z6 ]& O1 F2 _ f
qrCodeImg.src = event.data;
+ f/ b9 F2 v( z V! F
context2.drawImage(qrCodeImg, 0, 0, 400, 400);" B$ x4 T2 w+ L7 P ] ~
. w/ A5 @: x3 Y+ L& C( b$ ?
}# f8 R3 |3 G! }: ~( Z3 p
ws.onclose=function(event){
. s! p- A5 Z- m0 s+ _4 g
alert('close');
7 Z! d6 A6 G8 O9 C- N6 e% J
} i ^, S# z& P
ws.onerror=function(event){
; _) M2 n' I& l4 |* z
alert('error');
1 f8 e' ?: N( J
}
- \$ c& ~8 h# r$ b
//video，标签模拟视频
* x. a6 s3 R" v/ F$ c H
3 R6 @; W$ W2 g2 K) A
</script>
( o& k h' v- X, I2 f9 }# r s
</body>- n$ | V! U( \% A- x
</html>, z' W+ _; T) K
; q; _; c) z2 k0 ]

复制代码

客户端：

<html>
( O; l! h$ Z! c# ^3 ?1 i! I
<head>
+ V( m. N$ Q5 q5 U
<meta http-equiv="content-type" content="text/html; charset=utf-8">
! `0 R8 g# `3 v3 x1 m6 G7 J. h
<title>客户端直播页面</title>1 I5 O7 S4 B3 t2 q5 z
</head>
" K2 g1 ^2 w3 z0 `, v! ?
<body>
T# H5 r1 U" ^8 Y- u8 B: L
<img id="receiver" style="width:720px;height:480px">( Z. j. P' I. T; n3 M6 o
% O3 h. G4 s0 i, x2 j3 p f3 h, Y
<script type="text/javascript" charset="utf-8"># Y7 ~2 k' C* z
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");% i4 G1 F. I7 G2 k
var image = document.getElementById('receiver');2 Q9 d- i5 a! U; K! p+ V. I
receiver_socket.onmessage = function(data) {
( u9 {& W( G8 k1 N
console.log(data.data);; c/ e- Q% f$ S/ P) e B. w
image.src = data.data;1 R, r7 _4 {; g$ v. y( v, N
}
, ~0 `) x9 H6 a0 R, L% f
</script>
9 N: h( B' Z, {" @6 G7 N5 _
</body>
& r: z: X6 U, R1 p) Z: D+ ~
</html>
l- f3 H) _( e4 t6 y! z' }
+ \$ u# k# v+ {7 C* L ^

复制代码

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

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

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