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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);# r* z, Q- s' @( D3 g, H
$client=array();+ N& f: Z+ H4 Y" g
$serv->on("open",function($serv,$req)use($client){
( G* j7 w( i& l- z9 b& R$ ^
//echo 'connect'.$req->fd;
6 j D( I* ~ K: y* N- L+ b
$client[]=$req;
+ C8 a1 n! P! X$ W
//var_dump($client); z/ \. [' C9 q+ m- j$ S7 }
$serv->push($req->fd,'aa');
" j; x, \$ k! x# p* b, K
});
* U9 _1 p7 A+ a5 S. t
8 x) ?9 ]. ^- O* [8 ?$ o3 u: ~, S( K
$serv->on("message",function($serv,$frame)use ($client){% b6 U( w$ h; V8 C0 |. W
/*var_dump($frame->data);
9 W3 x% A% G" W, G
foreach($client as $key =>$val){
5 |, ~, I, @/ M/ ^
$serv->push($val->fd,'aa');0 M) L5 e; W$ p- x' w$ A
}*/& }+ S; R" e, Q Y2 K8 ]
$client=$serv->connection_list();- h' u- Z# g, ^2 B
var_dump($client);+ @3 k# T5 U' R3 W9 p, g/ ~" U
foreach($client as $key =>$val){% X% m: O6 }6 w! Q) M; g
if($val!=$frame->fd){ P. g7 Q9 m# b- p: r% P; M
$serv->push($val,$frame->data);/ s+ \2 f- N% j* w$ }( F! f
}
. ~" i! @9 C! r" @' x
}& |! b% ~& O5 D6 ^" m7 F& T" B
5 t2 @* S# v2 a v+ K
});
9 X; }* u9 o4 e& w: ]" o
# |' w' j7 M# D3 d: q) o) @3 E
$serv->on("close",function($serv,$fd){
+ ~. ^+ |9 D# p, O" u# Z) t! Q. y, z
echo 'close';- O: U+ M1 g% J+ G I
});
' G* T3 Z& W) C9 a& Q7 u
$ G: F! }! |. b5 s4 V2 u' \! @
$serv->start();1 C7 F/ {* |) Q. A( g' b: D
W' B& \) _& a$ j& D

复制代码

主播客户端

<!doctype html>+ C4 G0 S7 }. D2 `
<html>8 c! |- n% c+ R; T. G+ J2 u' f
<head>
3 Y5 S( R& v% A" B W! z
<meta charset="utf-8">
7 Z7 \; ?( D' I C2 V/ L$ ]1 B
, Q$ h" L; ~/ T8 B( L) t' K
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
! B; i6 ]) Q) w2 A2 y b& q
<title>404</title>
$ {# } I; n% J4 H3 A% u: `
<style>
) r2 Y" i, w, @; Z
body{
) G' g/ l2 R& B3 B
background-color:#444;
- G3 g/ K3 i9 @# p+ U9 m T
font-size:14px;
; j3 O9 A6 X- L& V$ M6 B5 k
}
% h `* o# M3 t0 }3 m2 B" n4 A
h3{& r, k2 f1 B" R3 l K+ G
font-size:60px;
) e4 r& t: R, q$ U0 a. h+ ~
color:#eee;
6 c7 ]/ w$ ]: @# z& o* u5 E
text-align:center;
8 @3 V6 |" s+ H
padding-top:30px;
' y& f& X/ p7 M
font-weight:normal;5 Z. I$ b8 Y ~& s( _8 \3 i0 ~
}* i8 Q# v0 \1 K& x$ V3 B
</style>: d" X6 u. h- W$ a. M
</head>
' h5 G2 H5 ]2 C8 } H7 A: f/ W
( A( P, Z+ M. P+ t
<body>- `" S( q9 w3 d0 k; c
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
: L: G% Y& G# r4 C' p! L; O
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
5 Y. m' t x; e4 n
<canvas width="400" id="canvas2" height="400" ></canvas>
! s/ ~+ |8 t$ i2 J3 H+ E
<script>
/ D' }3 h* \ d* m2 Z
var video=document.getElementById('video');% z9 K7 `; w; f( }1 V7 l
var canvas=document.getElementById('canvas');$ O1 U' L* _! g9 r2 x
var canvas2=document.getElementById('canvas2');, R+ N# Q" ~4 l& Z- m
var context=canvas.getContext('2d');) A. m) y+ K$ f3 L. j
var context2=canvas2.getContext('2d');4 p2 j$ n/ Z% ^
function draw(){
, o! x% J" |7 {4 H+ o \
context.drawImage(video,0,0,400,400);
3 E9 H- I! {6 X- e) H) o+ A
ws.send(canvas.toDataURL('image/jpeg',0.8));
5 d q2 `; t) G% A" x( \
setTimeout(draw,800);( h5 v/ C4 [8 P" n* w4 N1 _* j
}$ o5 d) Y: z9 }" l" A0 o' V
& {! m3 L# ?0 q5 x
//客户端跟服务端通讯! v& r: y4 r/ s% }+ s9 X
if (window.MozWebSocket)! E' K7 a; X# D. u
{
# S$ S. n& E A: p& Z
ws = new MozWebSocket("ws://182.61.42.187:9501");
$ p7 ^, c# e2 ^
} else, b0 M* r7 F) r6 z$ y6 w }
{
4 I7 _1 U' {' E" v1 v
ws = new WebSocket("ws://182.61.42.187:9501");
! V2 L4 l2 s) ?: V$ m4 [. \! z' ^ u
}2 y7 V3 M- k+ A" `
1 Z1 I: j+ n9 J
ws.onopen=function(event){6 s5 f/ i$ b, N$ u" H) ?
alert('连接成功');9 z2 e$ }; ^7 P9 h
ws.binaryType = 'arraybuffer';
$ ]8 g- I0 y& E2 u; C* b" o: N. q
draw();
$ k d! W# z5 b- Z5 V7 S
}; \5 N' V! {/ Y8 j" H
ws.onmessage=function(event){. l& A* \9 b3 {9 k) Q! Y) a8 ^
//alert(event.data);
/ ~7 m& Z% w: B" Z* g4 r
//ws.send(event.data+"client");7 m! ~4 A# m3 a) q' e5 N
qrCodeImg = new Image();: Q; \" P P! E" G4 c, x% n
qrCodeImg.src = event.data;
: f" }$ x& j& E6 b- D" G2 ]
context2.drawImage(qrCodeImg, 0, 0, 400, 400);- i4 z9 T X& n5 X
" p! w" S# ^; y- D; {& e2 u9 [. @
}
- f$ W' a q$ U
ws.onclose=function(event){, z$ _8 }) v, g5 V9 }7 c" v
alert('close');
8 I6 `; a) C8 F! o* i& }
}1 B) T' Z$ g8 ?8 Z
ws.onerror=function(event){$ H- b" u7 w" H6 H' y1 t a3 L
alert('error');5 `$ Q8 y1 m5 ~3 `$ v4 E! h) x
}4 O0 r% p1 V4 J4 M; W
//video，标签模拟视频! ]$ o `' \% _# h& |
0 \* i6 y: O( \9 ^$ M" m
</script>
4 a& P# w0 W& Q( |
</body>
+ D/ M' M; [2 l8 n1 {$ M& J
</html>
6 s/ N& b0 _& D% }& m
9 e7 m( v+ J4 M/ `, s' r

复制代码

客户端：

<html>
. f8 K& d7 a6 c5 ?: n
<head>
+ R( h8 ^& y& }
<meta http-equiv="content-type" content="text/html; charset=utf-8">
2 r$ ?2 C) C/ v5 ~' u4 n7 t O
<title>客户端直播页面</title>/ ~: `) i1 J4 c$ s
</head>, w% [7 O9 W" V9 L! j* t: L
<body>
( k3 Z, o2 z9 k% S4 w$ z
<img id="receiver" style="width:720px;height:480px">3 v# }/ {$ b, t
- r1 W0 g1 ~! a' N( q9 x
<script type="text/javascript" charset="utf-8">2 V6 c5 v( [$ Y5 F% ]
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");3 N( l w9 K) ^; H! x
var image = document.getElementById('receiver');
3 Z2 q7 K5 r7 x/ @' A7 a
receiver_socket.onmessage = function(data) {9 E' {6 I, w, Q0 a2 p
console.log(data.data);
0 H) _# Z, x# f' Y; s, r; h& T& D
image.src = data.data;
: P, h1 ~5 A* d1 _ j- z
}- C' r2 d2 }* {: `
</script># n4 o' W1 z0 w5 S' o
</body>
7 H$ I& k% N* Q; p# V/ d) n
</html>+ S+ u2 b8 `" n
# Y) O5 i, W& F

复制代码

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

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

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