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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
; K5 ~0 s' d1 F% e! b, Q0 g; @' K
$client=array();* l' A4 E" `3 t% J& A
$serv->on("open",function($serv,$req)use($client){
. ]* {' s4 z# E* S1 D
//echo 'connect'.$req->fd;2 `4 I5 C1 A& ]7 e5 h
$client[]=$req;
. }0 _/ G& a3 O( _1 t
//var_dump($client);
; V8 n* {* t0 o! K/ K& x! C" a' L
$serv->push($req->fd,'aa');! B' _* k! O/ |5 I4 l+ q$ e' _! z: L
});2 W8 H( e" v2 m& a2 u4 t
! w! e- k9 m& K. L0 z5 O
$serv->on("message",function($serv,$frame)use ($client){
u5 k2 q2 k K6 r7 S5 {& R
/*var_dump($frame->data);
: i* ~9 ^ ]% s7 E
foreach($client as $key =>$val){
% L( M" @5 d; U; o' g5 j+ p; H: S
$serv->push($val->fd,'aa');( w# t+ h% [& M! X* Y2 P- O
}*/
* |$ F7 L) l, a# H( M! S
$client=$serv->connection_list();7 J* X9 m- A$ w! d# w
var_dump($client); _5 J7 _ B7 d9 `6 _
foreach($client as $key =>$val){
( m! j5 `* |! \: R7 t
if($val!=$frame->fd){; n6 E. o5 Q9 }( h; l
$serv->push($val,$frame->data);; |) H$ I8 U3 T" A! ` h
}
A+ U! M9 X& P/ `
}7 h8 ?6 Z8 T! G8 r9 _9 D& E
4 K k0 O {, U z' k7 i( ~2 k8 N
});
- o9 H% [; ?; O( B7 B: a
5 {. V8 O" ?1 V; S
$serv->on("close",function($serv,$fd){
: `- q! \! @* g: N
echo 'close';
) J" O7 _5 b; y- v- Q5 k
});* Z7 i7 S( _ ?
. q _$ P/ D) x2 [+ j# C) P
$serv->start(); j2 }! e' t* I! E! j7 g$ a# _
* w+ \& m+ b8 C! k1 i

复制代码

主播客户端

<!doctype html>7 v4 a# l" Y) s1 v9 [# W
<html>
9 k% Z" R, |2 \* N) C; @$ O
<head>
0 S5 Z, c3 o: X9 c( I4 K0 Y
<meta charset="utf-8">
2 w8 ?& n/ k8 [2 C2 d
1 W9 l/ y6 J4 {9 ]; V" f
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"># g q/ d0 d; }( H
<title>404</title>! L# S5 ?. u' E
<style>3 F: S2 v8 |- r* z9 E N$ K# J
body{/ D* b7 B0 R0 U8 U! q
background-color:#444;
/ m2 `$ ]# ?- l3 {9 q6 S5 x3 O
font-size:14px;" }8 j& g G' j, T. r- V
}& @/ A* G1 @. c) [5 r
h3{
( L/ K; j/ c3 w' M! m
font-size:60px;
9 Q- V5 S6 ^& R+ q
color:#eee;! H4 J7 o) {( K$ |& K( |
text-align:center;
: l9 \8 q4 _; ~. n" d3 ?0 H) z. N
padding-top:30px;
" _+ V# w) F- d& u8 \! J; W& _7 W
font-weight:normal;$ S: q g# }, F
}
) t2 p# N) \, b# R
</style>5 \2 j$ j { S& q0 X
</head>
" s0 B) c& f& ^9 I; n
6 [ z t9 b$ l( h
<body>: L0 N) Q6 W' P( c7 A
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video> S) b2 X) `7 G1 r- O' K. z. B) U
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>( A% r, i1 _! z% F' n
<canvas width="400" id="canvas2" height="400" ></canvas>; o4 F v A9 t* a
<script>
' i+ ?* v5 U( Y# c/ \( U
var video=document.getElementById('video');. n. E2 Q- P, n) e
var canvas=document.getElementById('canvas');7 k3 E! U+ l4 I& F6 J
var canvas2=document.getElementById('canvas2');9 x d5 s' S1 M1 l8 J2 M6 P
var context=canvas.getContext('2d');4 t; d0 }) h8 m' ^ f' M
var context2=canvas2.getContext('2d');) e: P& b4 o& z: |/ x: v
function draw(){! u; _" r! U* {9 j: d
context.drawImage(video,0,0,400,400);
) J' X5 v/ G; ~9 D0 J `5 p
ws.send(canvas.toDataURL('image/jpeg',0.8));
m/ Q1 h7 ~! A! X; O: @
setTimeout(draw,800);# l* c6 m2 N3 @$ c! i
}
7 k4 i0 o2 k7 @2 T# _' e
- C1 K: w4 C f6 o3 s: \
//客户端跟服务端通讯
4 `6 d( I7 m, q
if (window.MozWebSocket)
; X5 `$ u* Z, P5 x8 }% H/ O
{- b; D( `& `7 `8 x
ws = new MozWebSocket("ws://182.61.42.187:9501");: J' n) n8 y( e! A
} else6 d l, l+ J1 s" \7 \
{3 a; C+ d8 [ Q! ]
ws = new WebSocket("ws://182.61.42.187:9501");" V; c) J) G) r, \% d. I& s2 R
} L& }' o5 m4 v4 Y1 B5 m
- f$ ^5 T: u: M. i+ t }
ws.onopen=function(event){
M% i8 t( N% P8 w6 |3 V' ?
alert('连接成功');
: ?+ ]/ P4 N( o
ws.binaryType = 'arraybuffer';. L5 d7 \$ ?! u' b. o
draw();
2 u9 o$ ^+ E' c. Z
}
) X3 h& q) W; E' S$ w
ws.onmessage=function(event){, I$ H' q2 m0 M6 l& C' u' o. \
//alert(event.data);
' g6 @5 ~$ G" p4 X$ C
//ws.send(event.data+"client");' | U: k) ^7 K3 a
qrCodeImg = new Image();, H# @9 Y; C8 q" j
qrCodeImg.src = event.data;
. }4 P2 S$ C& w- A" ?9 w
context2.drawImage(qrCodeImg, 0, 0, 400, 400);) R& F( v1 S9 @. ]( v9 P9 [- o
; ]' }$ G5 ]6 g
}
9 e$ H' H* b% U5 Y" S
ws.onclose=function(event){8 q! I; K5 P* l% Y& N
alert('close');
7 |% P- S/ D$ ?2 W2 R
}) R% E7 i: ]2 N8 `' K
ws.onerror=function(event){
& I/ E I. G$ k, v0 y9 `
alert('error');% @( M* A9 ?7 F7 d7 i( t
}1 c1 L) `6 y# ^ C) I- ^
//video，标签模拟视频, E" u; m6 Y) y
5 n6 ] K- w: z6 ^9 ?; M" X, C
</script>5 ?; A) @4 U6 y4 g, o- T
</body>3 }" p7 E3 H( m% }% e4 H: F: V
</html>) _% V5 k. Z' g6 O. f' Q
4 K+ u+ l/ y: Q5 ^; A

复制代码

客户端：

<html>3 Y7 w: ? ]8 c u" h
<head>. B2 m3 A- k H/ v6 T
<meta http-equiv="content-type" content="text/html; charset=utf-8">
$ u! G9 n P7 V& |" P
<title>客户端直播页面</title>
7 a* n& U. e1 d# D7 f' C
</head>! K0 i# {& N S+ ]) r
<body>+ X- w/ _/ d8 ^7 D: f) G; V
<img id="receiver" style="width:720px;height:480px">4 U2 l* z& {6 W' a k: h
" D* T) q: s9 a# w$ ?9 h3 c$ A
<script type="text/javascript" charset="utf-8">. j9 n# }2 }* O' ]: Y
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");4 x' t( w5 x' H
var image = document.getElementById('receiver');
- P: d. }! X1 Q5 g c" h" o+ f) a
receiver_socket.onmessage = function(data) {
$ d1 K* N7 R# s7 i/ k9 ~, T V
console.log(data.data);% E4 M( Y K# j6 t# ?8 Y6 ?9 h6 D
image.src = data.data;8 F, Q7 l3 f+ S5 h. v
}
) Z. H- E# G0 \
</script>8 H3 \4 u3 d# A2 l) X/ @7 k, W
</body>
$ D5 D# w8 E% F$ l' F6 n
</html>! @4 R4 O* G3 h# O; e i' ]
8 {% k5 e& T, z; D2 A

复制代码

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

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

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