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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
1 \% z1 y& v0 x$ m
$client=array();) c2 h) V/ t; h: r' T3 `1 f/ M
$serv->on("open",function($serv,$req)use($client){7 Q% H) L+ v) T& C; o
//echo 'connect'.$req->fd;5 W9 E+ b- z |+ R: B% }
$client[]=$req;5 {) X1 h/ p! e5 h/ X; v
//var_dump($client);! ~5 p* g% \) p
$serv->push($req->fd,'aa');
0 B! f$ U2 D+ n; {2 \% |4 ^
});) R$ x: p& K$ k8 {) W
3 y: l7 M* S9 d+ J/ ^
$serv->on("message",function($serv,$frame)use ($client){; ~* R) I4 O% M6 Q2 I
/*var_dump($frame->data);
; d; V) g4 D; D' R; K5 B2 {
foreach($client as $key =>$val){6 W. Q6 z4 G7 G6 n& l& I0 G
$serv->push($val->fd,'aa');
}*/3 A ]1 I& \6 Z' F% P# D. r( R
$client=$serv->connection_list();8 y* r) K% Y* h* k1 c# W2 E4 j7 y
var_dump($client); f$ p* K4 u k
foreach($client as $key =>$val){
7 j* j1 T7 x- v1 ]4 N; Q1 V4 A* L& A
if($val!=$frame->fd){# U/ Z; |1 U- y
$serv->push($val,$frame->data);
# B5 O2 h/ K" z4 T+ d& A
}
% M) K7 q, o2 V% ]( q+ x
}
) P2 V) k7 ^: _
$ s W) j! O5 t, X1 k
});$ t% }' H6 h1 ^8 N. @, T& i3 L- i
5 K" k' {( ^# a* Y. ?1 V7 m% H. u
$serv->on("close",function($serv,$fd){0 J5 ~$ ~4 }2 U7 z- u0 Z$ V; j
echo 'close';+ a" K9 A' V5 Q3 X' s. U
});4 H! M% {: {$ m
7 f! B+ X7 T; [6 E3 e. r% R+ k
$serv->start();0 Y+ {5 c* X! v! C8 J, T
* \4 U% T5 n- z7 m, g

复制代码

主播客户端

<!doctype html>
9 p. t) u: D- V% ^
<html>
; w6 O+ ^! T9 c3 h; _
<head>$ U# m" Q4 z) | k, ]
<meta charset="utf-8">- j# G6 R$ G1 R: @6 q+ W8 n
7 H$ V9 F1 ?4 O' \5 `
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">! ~- y8 c% v+ Z; \- h3 b4 H: @% R9 l
<title>404</title>
$ H. X8 m" l. r! R$ m M
<style>
7 M0 E1 A, ~! [1 c
body{! D" f' ]$ @/ \1 c/ {8 E/ T1 a3 u0 |
background-color:#444;
! a" y4 O4 o- x2 x0 q8 v/ n
font-size:14px;/ Q7 F: U" |* Q3 ~3 R m
}' Y" W" z7 }( P/ @ J
h3{
: x( U+ g8 c' s0 F" G* `6 ?
font-size:60px;$ J7 x" G1 N4 x/ e- W
color:#eee;
. o3 v* ?( B5 Q! p0 x
text-align:center;
$ a8 V. d; L( j0 e- V
padding-top:30px;+ c7 e9 _% _, p! L$ J# H" ~! q
font-weight:normal;
# B. t* |) f0 w: B
}1 ~6 d. L! P6 P w$ @# p
</style>9 J; ?: x' L( g! J& A
</head>
+ W$ S& G4 n* A# W2 ? ~- X7 J- ?
6 K3 ]+ s! R: E
<body>4 \- w1 w4 E, A# [! I$ l' m! V
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>1 v. K+ A; u/ b3 I' P7 l
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>1 e, a' W1 Q& ]8 D% q9 h# t
<canvas width="400" id="canvas2" height="400" ></canvas>8 o, X T% u( ^" j( A
<script>: o+ \, M0 ` k* f3 I9 l
var video=document.getElementById('video');
" q8 i M+ ?* r g# f: a7 m
var canvas=document.getElementById('canvas');% J V: X# q. t3 W" C
var canvas2=document.getElementById('canvas2');
+ s) q$ O/ c5 n+ k) L) X8 D1 ]5 [
var context=canvas.getContext('2d');
0 R0 Z: n! O9 o, `% x9 k
var context2=canvas2.getContext('2d');/ t. H) O5 f, p# i
function draw(){
5 R" T1 j0 ~6 g$ x8 x
context.drawImage(video,0,0,400,400);
. r: m8 B% A: T. H" w5 ]
ws.send(canvas.toDataURL('image/jpeg',0.8));
. I, P& d6 ]- W G7 X, y& q ?
setTimeout(draw,800);
, g. {# D; B1 f
}
; _6 F+ Z/ y1 A( [+ s0 Q6 O- @
3 r5 c- n) M+ u
//客户端跟服务端通讯( ^5 R: ?$ j# s; f
if (window.MozWebSocket)" Y* D9 c5 g5 ^" J( }1 A" K6 {
{
4 u1 j1 r; p2 I& }, t+ u
ws = new MozWebSocket("ws://182.61.42.187:9501");
. Q h2 ?, ] i- O& k7 V& E( \
} else
5 Z4 R E3 S6 ^% W. D
{4 G7 p0 S3 c! E1 i0 {+ y
ws = new WebSocket("ws://182.61.42.187:9501");* l& P7 i2 d5 ?' h4 p
}1 L" V+ n q7 q7 {% f% K# i
$ K% p. w" [9 S. [9 Z
ws.onopen=function(event){' X* W9 g, w+ E: V8 }
alert('连接成功');
8 Z, n- W H j& A o/ h
ws.binaryType = 'arraybuffer';3 r+ g0 g/ S+ O+ Z. {, _9 Q) N
draw();4 B; Y& _! v0 [' [9 Y% `; x
}
! ^- I2 g+ y5 y6 J+ C: f
ws.onmessage=function(event){
2 E1 ^. V5 l, y' H
//alert(event.data);
$ M# M) q8 Z( A( e; |$ P; n/ c9 Y& R
//ws.send(event.data+"client");, R0 q- e$ g" n3 d
qrCodeImg = new Image();# S( ^0 l" O; R/ m' k" Y2 ~$ S
qrCodeImg.src = event.data;# _' z. [+ u5 S" V3 K
context2.drawImage(qrCodeImg, 0, 0, 400, 400);2 e6 C* ` d( ~1 s- q
) a! j& `4 o& }' C( w$ Z
}
$ U$ g( }8 e8 O9 ]/ l# S2 U
ws.onclose=function(event){& P$ c/ l* w" J5 R
alert('close');
: \# J. l' _1 V7 o S' y5 m8 W2 m
}! S) G: p' L# o! o& N2 R: E1 D
ws.onerror=function(event){
5 M# l' V9 h; \( h. c
alert('error');
' v% n. B, n% n y. \7 m
}
0 w$ O6 Z1 _( o( _4 h+ d4 T( a
//video，标签模拟视频
7 @0 J9 \' Y5 \( G
/ ~3 K3 C6 J$ U, p. U* l( _
</script>& q* P" X' Z: V' r$ k9 {" a& Y
</body>8 `7 ?/ q6 M# J1 L' r! G
</html>) m0 i8 Y z3 d
- k8 }+ x: J/ y6 o2 [( `( |

复制代码

客户端：

<html>
/ Z! A: C7 ]7 l) l! F0 @
<head>
7 d ^% ~/ U6 o2 K0 A
<meta http-equiv="content-type" content="text/html; charset=utf-8">2 i% h* Y3 k5 x" L/ a
<title>客户端直播页面</title>
0 ^6 r/ r/ y3 N& S
</head>
, ]% ^1 h2 T) G3 c& X* U _5 c
<body>7 ~% I5 M" I: n1 @- \9 q
<img id="receiver" style="width:720px;height:480px">
& U7 c |; E! O" l, r! o/ _
& G2 |# y1 J: ~( Y( w* ]8 U" M
<script type="text/javascript" charset="utf-8">
$ m$ |% x0 t! u$ e& L! c" m& o3 G
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");& S3 y0 S! o8 g) j! g& R! R- E. k
var image = document.getElementById('receiver');
: @6 k0 `* h, N- g* {; F
receiver_socket.onmessage = function(data) {: E5 A2 l$ r5 k& d& k, `
console.log(data.data);1 e1 z \: Z3 Z
image.src = data.data;: i o2 J3 i+ f Z, [
}
( n; p! u) Y3 ?7 ]5 n9 \
</script>. D" Q: T) m; x
</body>
$ \; e. e) T: A6 S
</html>4 ?' b( o/ m H8 v9 \
8 q: [/ \3 E# }; d

复制代码

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

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

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