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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);6 M5 L* P0 M& Y. ~" u
$client=array();5 o w4 l& h6 Y- w3 A- W! i
$serv->on("open",function($serv,$req)use($client){- Q$ D$ B& u0 I7 a0 m1 J
//echo 'connect'.$req->fd;1 O4 b/ B3 I, B. W$ [7 t
$client[]=$req;- G& U) c* l6 H9 [3 q
//var_dump($client);
2 y/ q% C F( {, }
$serv->push($req->fd,'aa');6 p3 d+ P: l2 }' F' \; o$ V
});$ v1 t0 L. I r$ R
" ]5 Y" V: {: v
$serv->on("message",function($serv,$frame)use ($client){
6 z2 s' K$ e8 N( ^, }
/*var_dump($frame->data);
0 U$ X: U3 R/ s ]% Y( a% \
foreach($client as $key =>$val){
/ V) U5 X1 |/ z+ M2 P
$serv->push($val->fd,'aa');" @ K, P8 d) O2 @6 q4 C! C0 N
}*/
6 ?' c$ D5 c7 D1 k
$client=$serv->connection_list();2 @5 p8 {1 m8 m. }) g8 G
var_dump($client);
) z6 ?; N3 ]9 x6 x# n
foreach($client as $key =>$val){% F9 \- n* X3 ]* V
if($val!=$frame->fd){" B6 P9 {' o, J6 C/ ~( [
$serv->push($val,$frame->data);; ^+ l* G; M; C
}
. M7 r8 y ~2 T% Q# O
}
) f: Z1 O# C, W& _
1 n3 h: o; {& c) U! s
});
8 H8 ]: L- S- q; F3 a
* Y+ U" \3 Y& f% ~
$serv->on("close",function($serv,$fd){
7 T# q: L7 E! }$ p8 O0 V
echo 'close';
5 o2 T9 N9 s6 g& ]- w# J
});9 A% M& T( Y0 Q2 ^; x/ w
+ }# Z! d: b' f4 B8 f
$serv->start();( e/ }7 [& C: e- z( s" ?
0 x& W! x4 Y, }! C- ~! j( j* N4 G

复制代码

主播客户端

<!doctype html>" M0 j- r, q1 }3 o0 \
<html>
: c; b( y% B, l" V2 O
<head>
4 d/ g# ^% L, v: l3 Y& _: Q6 ]; V
<meta charset="utf-8">: r" Q, l3 C( h$ x. o' ], r
[, e2 i3 Y. y6 i
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
. f6 _; }: K# l+ B6 ?
<title>404</title>
4 ?+ B1 O. g/ r' T& [! R( s$ K
<style>1 k) n r. W- `& k5 a2 ~8 n
body{
# R9 {+ Y u* M/ r
background-color:#444;
. I3 U8 c/ {6 b ]% Y
font-size:14px;. S* p4 B% X$ |# D' P0 ~
}
9 [% I$ H @% Y P8 T9 S
h3{, ~. B' z$ [, z! i
font-size:60px;
6 [% X: e3 y B) g3 \. Y3 H1 z w
color:#eee;* N; g8 F( q* h/ m
text-align:center;# q) [ u; r1 q5 v2 v$ a
padding-top:30px;! U& n( f) b+ ^9 F+ r" ~
font-weight:normal;4 W' K% o) f# l7 d$ U
}
& Q) N- I' V. V) z
</style>; p; ?/ `/ {5 j1 s1 g
</head>7 |( }8 n! b @9 p4 C
w+ q( r7 l+ B
<body>
4 U" j- P- k4 t# F/ ~8 P. L
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>8 i; ~2 Q$ J7 }) ^
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
# D# x, y: q" G9 G5 y: Z$ M
<canvas width="400" id="canvas2" height="400" ></canvas>
4 q& F$ ]0 I1 ?& J2 I
<script>, o$ @' @0 l& n8 b5 D
var video=document.getElementById('video');1 |" v/ U# [, ^4 w8 ^7 P
var canvas=document.getElementById('canvas');
4 t( C. X7 p; k* Y6 j# I- h
var canvas2=document.getElementById('canvas2');; R9 L8 Q0 U+ a9 E3 Y+ @8 P* B1 W
var context=canvas.getContext('2d');
% m8 O9 d9 U! j
var context2=canvas2.getContext('2d');, |2 O5 q, ?$ N; K
function draw(){5 H3 U/ u" _: P7 U6 r* y# W
context.drawImage(video,0,0,400,400);
& v3 a) E/ a1 j! {* S
ws.send(canvas.toDataURL('image/jpeg',0.8));- O/ D9 M3 R5 B5 ?) ]) n& x
setTimeout(draw,800);
7 y, [, ?' ]0 E K0 \" [
}
, c7 K' |6 R$ o* d7 l: E Z% Z
! Z( W7 w. F* F, m; m; l
//客户端跟服务端通讯9 H: M; o* O7 a6 v$ _; o
if (window.MozWebSocket)# O* S y5 K6 x
{6 j- M/ B+ N' F L3 Q
ws = new MozWebSocket("ws://182.61.42.187:9501");
$ b5 [0 H1 @( c, J/ [
} else
Y3 j: K" }5 h1 }
{
# H D% w# o% W. c) @0 L3 `# w
ws = new WebSocket("ws://182.61.42.187:9501");1 F% Y6 b: J1 c- ?% T
}" ^$ a% Z$ q* ?0 p. h7 W h' g
; V/ V" O1 u: y+ Z6 @
ws.onopen=function(event){
6 Z! _; S/ z( V, z! h9 }1 b$ }
alert('连接成功');; C, y- F2 h2 L: [/ | A7 E2 M
ws.binaryType = 'arraybuffer';& d" O9 h8 i3 r+ {& M" K8 J$ }
draw();: O; ]) l! G6 d) W* W% ?3 t( U
}
+ f" v" M8 L% D; h9 p# p" F
ws.onmessage=function(event){
4 r; x/ S- n4 o" ? c3 m* n
//alert(event.data);
; b/ L: R: |# d5 \! c7 W( z+ {# g
//ws.send(event.data+"client");) b& Q1 W- v; O" P. e7 F
qrCodeImg = new Image();
; @! h$ _% I' S
qrCodeImg.src = event.data;: z$ n) t' N) z2 e+ p, F3 g
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
) C( o: B* j B# M3 @2 c
' h! k' f8 d }3 c* C6 C! i8 I
}% \* q* s; e+ k+ U! k1 W
ws.onclose=function(event){, o) y7 @/ j0 f& F4 t. j, R# L( \
alert('close');2 g1 z# a) a0 q0 a" Y" i
}
. e+ i) D. ]7 l, ^2 `
ws.onerror=function(event){- \2 s) u0 M3 I$ A& d
alert('error');
# Y# h, h/ N6 b! E# S0 I
}
8 A: D. p7 G* |: I. G
//video，标签模拟视频$ g' g. l( h! n/ I% q
/ `( r& [( s/ T: i+ {7 ^0 C0 R
</script>
* ]& y) N3 [; H5 N5 F* [
</body>
. ~2 t0 a, ?$ F* k- N% k$ H; l+ c( i& h
</html>
9 n6 i3 J/ F* p) _9 k& }1 ?3 h
( `6 ?) E9 J/ U1 Q" l5 h3 j/ k

复制代码

客户端：

<html>. @7 w$ e7 [! [: b% J; {1 |
<head>
; p+ O# e+ J9 o; K8 ^
<meta http-equiv="content-type" content="text/html; charset=utf-8"> e6 c( h! B- p2 @3 L
<title>客户端直播页面</title>7 I7 M' W) ^0 X% ^8 N2 M
</head>6 C' i+ I% r$ Z4 K: @# l
<body>
0 R/ s1 h' p3 p2 z: Y3 p: O: t* h9 u3 Y
<img id="receiver" style="width:720px;height:480px">6 C4 H ?5 S) u% Z
& I5 X @2 i( S- ?( |1 H7 c
<script type="text/javascript" charset="utf-8">7 a; v" h1 C$ D$ y- Q. w9 ]+ g9 h
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");' @. ]2 O* d* f8 s) m$ u
var image = document.getElementById('receiver');
" f B4 B/ T& [& g* k9 X! l
receiver_socket.onmessage = function(data) {: i2 z: L8 u# @! z/ L9 O
console.log(data.data);0 b$ K0 J6 I: \7 K
image.src = data.data;
: o5 C9 t; ]" z
}
( j; Q: Z3 o* ~# n- O0 e
</script>
# W: s/ {5 e) Q* ^0 |* o( }! C1 T
</body>
1 Q9 I7 W; |! R" w: {3 q! _2 Y2 j
</html>0 n5 B1 K: P) |! G
+ v" Y2 k, o# |$ J+ ]

复制代码

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

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

浏览过的版块

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

浏览过的版块

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