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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);& _# y4 Z& e8 h0 z9 y
$client=array();
! u: \9 a3 j; ^6 M# B
$serv->on("open",function($serv,$req)use($client){
* R1 U* g( t. m( N2 r; y2 s4 Z$ \
//echo 'connect'.$req->fd;5 C3 Q$ O0 n% f+ q5 h. y; Z; z" W
$client[]=$req;
9 k9 `# a' q! R9 i# K- l
//var_dump($client);4 |; Q& Y& I# z' T" E9 \ K
$serv->push($req->fd,'aa');
) P2 M Q4 Z7 m
});% W+ x) B, F4 h0 P% \ j
. t; M8 J& Y% F8 j1 J* I5 }- v
$serv->on("message",function($serv,$frame)use ($client){
, z. q n9 T+ K6 O- R. w7 H0 d8 Y. C
/*var_dump($frame->data);
4 N$ J- x7 U$ F+ x m! z# o
foreach($client as $key =>$val){
# E* O% T/ o: H6 ]# h0 Y- m! `# `- L1 P
$serv->push($val->fd,'aa');( c1 C& L A. E W% W
}*/: j2 b5 m' Z# t! C) b
$client=$serv->connection_list();6 T& o8 |/ O {. l4 s
var_dump($client);1 ^! L+ \( b, s" h# @$ C/ F t+ b
foreach($client as $key =>$val){
+ w" c) R0 D6 z" b4 r5 y; M
if($val!=$frame->fd){
& `) A8 L- E3 e: I& L
$serv->push($val,$frame->data);) u- F9 _+ _4 I" y- M
}, X# e& T; C8 o2 F% \% y) n: s0 a
}
4 B' c+ z* j6 ]. ], k
8 I6 i7 N( G. s- g2 [% V8 z6 s4 N
});
3 }. ~+ W) Y U1 L2 t
1 t" b; d- f' I$ ]( I2 ~
$serv->on("close",function($serv,$fd){$ O8 G9 l/ V( F% T* I, O
echo 'close';
( M0 M* `: \6 |+ x* b" V2 F) c
});
! ?9 k! p3 d9 s' }; @. B
4 R5 M8 E, B: W2 D: `3 T W$ Y
$serv->start();3 y$ H) d6 N& c' O
: L ^6 K) e8 z& N4 O2 }

复制代码

主播客户端

<!doctype html>
4 X; @! s; L# r: S( W
<html>
5 I- h( `/ k' E5 X8 v6 Z6 |6 U- j
<head>* c9 L. Z# l: Y8 R/ x3 E
<meta charset="utf-8">2 U- X, o! n- |. G2 _; w
6 F1 B& [7 x# l/ q
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
* J) C) o$ y9 y7 w3 C+ q a( Q
<title>404</title>8 @7 o: n& b7 s
<style>- d" Y& r; V/ [5 O( M9 r3 c
body{
7 ~# o# `# N9 l( `; r0 [- `
background-color:#444;
! R3 x/ U, @* S
font-size:14px;
: _; b, u. p8 W: E
}
) E6 Z9 f; X/ `4 i4 R. ]) z
h3{* q: ~2 ?5 H/ p7 I* P# Z) K' p
font-size:60px;
% t' d- ~- G/ l+ I. S G
color:#eee;
6 ]" L+ h( L/ s. V! W
text-align:center;
5 ^% c, a/ h6 o% s
padding-top:30px;. z8 r% s# w9 l, j5 y
font-weight:normal;; l% H# g. c3 x: n3 w* Y
}( S: p6 j% M3 Y' q; V
</style>$ t0 ?7 g7 j9 c1 Y
</head>
* r" k1 H( T9 `8 ~. k9 E4 Z. K& n
/ i9 t- g9 w( m
<body>( O5 r3 `8 S& w, G/ O
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
; {0 s ?4 N/ {1 |! ?( r1 t" m
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
& R( ?) X6 i" y' i+ L: _
<canvas width="400" id="canvas2" height="400" ></canvas>
; K F+ o1 k h
<script>2 I! M9 U: I, h, ~
var video=document.getElementById('video');
) a% w K9 C1 a7 @' j
var canvas=document.getElementById('canvas');: p, {2 G0 x5 ]- u" J0 j: r
var canvas2=document.getElementById('canvas2');- l* K/ b$ _4 o6 {5 d: u
var context=canvas.getContext('2d');* z& f9 o* z; R) a5 Q/ n* _& K' ?& P
var context2=canvas2.getContext('2d');. o& p* \: A( H) o
function draw(){
* o' C- U+ ? Q4 E, Z2 R) D
context.drawImage(video,0,0,400,400);
. J* U7 G. y) B1 K- P
ws.send(canvas.toDataURL('image/jpeg',0.8));
4 Y, V8 j2 K$ m" U j% b8 }
setTimeout(draw,800);, R4 [1 X5 v3 N* I. _
} C- q' I& Z( {. b
4 C- D& \% |5 |6 l* U
//客户端跟服务端通讯
# M, A z3 `; B; ~. P7 x
if (window.MozWebSocket)4 k% u+ j* ~$ X8 F i
{6 I* e$ \5 _* X4 [! e/ I
ws = new MozWebSocket("ws://182.61.42.187:9501");
3 I7 z; U2 z" `6 q' H
} else$ k' A+ t( g& s" Z
{% p y6 ~; U- M5 n" a
ws = new WebSocket("ws://182.61.42.187:9501");
}
% N3 s( x2 C6 h9 m5 X
0 v' U3 M5 t% f
ws.onopen=function(event){8 W" R2 E4 l, P" K- |
alert('连接成功');! r9 p. q( A# F6 d
ws.binaryType = 'arraybuffer';
8 X& ?4 m: ]- L( y% E7 @, R$ D
draw();
! ~- A2 f, R6 P4 H; [. W1 A) l
}: ]- ^- C: s0 F5 j0 s
ws.onmessage=function(event){
" R: N+ s8 R- M9 L
//alert(event.data);! H4 |4 G5 C$ r8 S) _. \
//ws.send(event.data+"client");$ \' q# [$ w8 {$ \
qrCodeImg = new Image();
; R& H) Z) G+ K2 i, d+ m [
qrCodeImg.src = event.data;* s2 t/ w% c U r5 S6 }4 Z/ e" Y& ~
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
& c. X7 @% V% ^5 w1 }" m
' X: H \4 W/ O3 }( g8 @6 y7 e
}
- y: v1 _# [+ i/ G' L
ws.onclose=function(event){
! [5 L% P# r/ o, n! q; I; K
alert('close');/ s5 D9 t1 r1 \5 M
}
: {- E" E) \ w* h3 p& F" [
ws.onerror=function(event){/ Z1 Y" O$ K8 }! z! c& y
alert('error');
3 G& ]) q" p1 e9 X
}0 P/ F/ A+ p# M) K
//video，标签模拟视频
3 `6 C, V) z- f I2 k- e) \% @
3 p8 v! m p' L; }1 o' T' D
</script>
4 h/ q8 k) Q8 Y
</body>
) n: R; i, V. v2 n' v. y
</html>
9 n- b. R; P2 E
, r2 t+ e6 ]# x$ I8 d1 W

复制代码

客户端：

<html>( p4 B/ J. Q& |1 ~" w D
<head>% w- I# y' G* u% X# y
<meta http-equiv="content-type" content="text/html; charset=utf-8">
3 Y, \' c. k& Z3 I) v- H
<title>客户端直播页面</title>( V+ v$ l3 F& k, U- x1 {# L
</head>* d5 [( {+ V+ Q+ i, j& d6 A
<body>
# N A8 r& @/ R; }4 }
<img id="receiver" style="width:720px;height:480px">- V4 g, Q7 u8 _- T
J4 |: z" J2 W- n- y0 P
<script type="text/javascript" charset="utf-8">
; ?6 F3 C }0 K2 B W
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
) R( A8 {$ V' z5 L& ^7 o; g
var image = document.getElementById('receiver');
& s- c ?, c; F+ _
receiver_socket.onmessage = function(data) {+ | `0 v" L L' G. Q
console.log(data.data);
/ e6 Z4 w6 r7 j4 t2 t
image.src = data.data;+ @) L* v) t, u/ J4 ^2 ^* T
}. m$ k( w \6 H K6 L7 r: S
</script>
p$ c) `+ w9 W) V2 w+ n0 t, g
</body>/ k' i/ S i l8 N4 z s
</html>
' B6 n5 V/ t; W5 N
" i0 v+ Z# f. Z |' v

复制代码

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

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

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