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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
5 E9 i, A3 \ q7 O2 o" i8 A. Y. O
$client=array();
% o) I6 i/ V% ~! u
$serv->on("open",function($serv,$req)use($client){
+ J7 ]% `# L9 [4 x- V: f8 A8 M
//echo 'connect'.$req->fd;
8 v5 c4 D) ?1 s) s$ W
$client[]=$req;" W; m5 Q) G1 h
//var_dump($client);& y9 o# A9 h: f- I
$serv->push($req->fd,'aa');3 |7 p4 C* C- m+ T, C" B
}); N/ u; k$ T% U
; \% C; u& i6 f& z
$serv->on("message",function($serv,$frame)use ($client){/ p- p n0 H/ l5 }# y% E5 H- v# V
/*var_dump($frame->data);
; F7 T' u) V$ U& r2 I4 [ G# V, o2 c
foreach($client as $key =>$val){
# l% k E& q! L) W% T+ Y/ \
$serv->push($val->fd,'aa');
, B) x5 W0 z* K- j3 x
}*/* ^. B$ w6 ^: s
$client=$serv->connection_list();" g; g& u! T; d2 W
var_dump($client);1 `& [0 D" d) R" d. M! n. F% R
foreach($client as $key =>$val){3 l% e' J0 t1 ^5 S" d7 f! W
if($val!=$frame->fd){
& d* U0 E$ @/ M
$serv->push($val,$frame->data);
5 D; X: e! Y3 {4 `
}+ F9 k( R0 a& I% G" V) u+ k6 D
}
7 d! _; r& D# S, E) m0 v7 `" A# ]% Y
: w7 D+ z) F0 @3 l: j
});. l# ^# G; R( w y
" N0 R* o" a% N1 k: A
$serv->on("close",function($serv,$fd){
% Y* C4 ~. L) F; j
echo 'close';
5 f/ L% z5 R/ |/ U' @2 {2 a
});; G5 R" d' y# `3 C/ t
0 `6 g8 O/ K6 x* D* Z
$serv->start();
1 N8 D! } v1 K2 P3 u* _; m. N1 m0 A
$ C% Z: g+ y4 `: H+ x" L2 Z

复制代码

主播客户端

<!doctype html>
9 b3 F# M5 K! S: {; }
<html>$ H" u+ l) ^2 h. P7 a
<head>
" d0 S3 k z2 b7 J
<meta charset="utf-8">
% B \7 j$ K4 Q
+ J* \4 X& Y5 g0 T4 ~) G. z
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
: [, {* c1 ^' h& _% p: {" n: g
<title>404</title>
- r, E- ?5 B' W4 `4 e) c" m
<style>
. a" J& [$ K4 Z4 V4 u/ g9 e2 i/ q
body{) _) F5 z0 h7 o7 C! o3 \6 N6 c
background-color:#444;( ]: y- C0 ?. n
font-size:14px;( i7 D5 c. B/ p2 b
}$ n, J6 B) S5 B0 O+ N
h3{
$ Q! C* b: ^- {- x0 j
font-size:60px;$ n- l9 a+ P7 j1 b d" w
color:#eee;" S" i$ \: i; W8 L
text-align:center;% {: ?( O( f5 o: j" ^' X
padding-top:30px;9 a, P3 e' _6 a. s9 Y: G/ _
font-weight:normal;
. k) N1 |2 s% X; Y$ K7 Q
}) K5 D' s. T1 {
</style>
/ m* D4 h& q9 `( z) d* K& \" C
</head>
. r! H9 j0 Z$ M+ ~8 A
/ s% f+ {. L! p8 j7 j1 f/ ?
<body>" j3 C! w% \+ k7 u* ]
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
$ `5 r/ }: b6 L
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
. b# d. R8 T/ D) n( r8 t. }- H/ k
<canvas width="400" id="canvas2" height="400" ></canvas>) O0 c1 h' v5 [; U* u
<script>
+ p; S! I, A7 @3 w/ ?: c z
var video=document.getElementById('video');
% f( f1 Y6 V9 [4 l) S, Z- z; `
var canvas=document.getElementById('canvas');
6 ?# p3 j* a& [) c+ q
var canvas2=document.getElementById('canvas2');
& h3 }! Y: n/ \
var context=canvas.getContext('2d');- u. }' [0 h7 M( e
var context2=canvas2.getContext('2d');+ [) B' Y5 J6 g! W' T1 @
function draw(){
1 x% D: v# E/ a+ P0 p! x
context.drawImage(video,0,0,400,400);
5 ^, Y! g# R2 e2 G( z6 Y
ws.send(canvas.toDataURL('image/jpeg',0.8));' N4 u+ Z. g: V& D% N3 [8 w* h$ G
setTimeout(draw,800);, w( ^ J$ J" o
}2 m0 d0 ^. t! g9 W/ D
5 {# J; y- N+ l
//客户端跟服务端通讯! k; w4 q8 R# h6 x" x& a/ Z
if (window.MozWebSocket)9 J3 M" p) ~! v' v
{: i+ b1 m8 `; T5 \# i) ~
ws = new MozWebSocket("ws://182.61.42.187:9501");8 R0 e3 K6 n$ Z, e
} else0 c3 a0 j @6 l3 m p
{
5 E. {8 H- X0 O, _4 ]
ws = new WebSocket("ws://182.61.42.187:9501");3 H {2 v: g$ Q+ N, J
}
[$ V O% G5 |- T/ ]
: J T' G$ B9 }6 J5 g
ws.onopen=function(event){$ x4 i# B" ^" g0 [- Z1 P6 {
alert('连接成功');
" u9 B6 ?6 R7 z& X9 j" H0 {
ws.binaryType = 'arraybuffer'; q/ Q6 X+ O( h' x( f! u6 f$ [# u
draw();$ B9 R; H! A; K9 X9 @' D- u8 L& Q T
}
( O$ I& p+ F2 X2 F a8 C
ws.onmessage=function(event){
& I, h- k; s9 `) y5 x* `# q7 A
//alert(event.data);8 i8 C6 ~6 x; K6 V! h' p
//ws.send(event.data+"client");
1 Y! U$ i4 e) O* g$ I
qrCodeImg = new Image();
7 [; c& n6 z( R
qrCodeImg.src = event.data;4 a$ i' u, n6 `) d8 S
context2.drawImage(qrCodeImg, 0, 0, 400, 400);; {' S- T$ Q! }8 m- g
# v8 |" p9 q# a2 {, I
}
* `+ b% h9 F! ?6 F X8 ]: P' @
ws.onclose=function(event){# g$ w# T o) w% _
alert('close');" U1 g6 H9 F7 e8 q L( p
}
' ^) q/ ?3 h- M4 @* r8 D8 f
ws.onerror=function(event){
3 `8 V* C4 T7 `% G& g! I6 C( @7 s
alert('error');% h& \$ j" J4 _* Q ]; I
}
1 {$ ?: d9 D( x' ^
//video，标签模拟视频
2 G. W% b6 s/ @( B
7 G5 s- z9 B% A8 h, ^# w$ }
</script>
6 ?* }% p% q" x, a+ Y
</body>
3 y, N4 E& c( X$ F
</html>
: {' v0 e7 c! c+ V/ p- H
' S5 g$ e& n3 y. f; _ _9 f

复制代码

客户端：

<html>7 F/ v0 d/ a( h% r7 f8 g, X
<head>! c# Y% X# |3 w; r. w
<meta http-equiv="content-type" content="text/html; charset=utf-8"># P }* m! i4 p' i( j1 k
<title>客户端直播页面</title>5 A3 t, }3 y! r2 \
</head>
7 ~- s! O7 t9 G2 \, d5 Q
<body>" R& O: E3 \$ M& L2 _7 f/ I
<img id="receiver" style="width:720px;height:480px">! K" r% ], ^% D, ~
, ? J& E' ?9 P( L- ^; F
<script type="text/javascript" charset="utf-8">3 P* L! U8 i+ i- u/ O- Z; u
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");0 |4 H! y& ?" D) z6 m* s+ I" q
var image = document.getElementById('receiver');9 O; @8 S% V. }# `8 t
receiver_socket.onmessage = function(data) {
7 { K+ \/ N: t* j( J
console.log(data.data);
, e8 M" ~0 _' C
image.src = data.data;/ x4 `$ @: i& Y% w) _
}8 {, J- b6 k' I" q1 s
</script>1 V# _5 q/ P; s3 ?/ d
</body>
( c& H5 N: l* t9 I$ X3 n) o& t
</html>, K* J. l8 N2 f+ ?0 e3 [/ u
9 B+ M( ^6 @ \5 Q+ }$ @2 \& ~+ Z& e

复制代码

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

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

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