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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);. e8 r9 P: S1 U0 e1 ?
$client=array();& \/ x+ T( @2 v- W1 `% r
$serv->on("open",function($serv,$req)use($client){
0 Y+ F0 C/ b a. o, J0 c2 c
//echo 'connect'.$req->fd;
8 i! N& w8 |" |& [8 S4 I* n3 g* @
$client[]=$req;
' P6 E9 l, w+ ]7 S2 _& g
//var_dump($client);2 L! d' R3 @6 P/ ?
$serv->push($req->fd,'aa');
6 O3 d% s/ @: G% m1 ^" \
});
6 X& n& M! N( @8 B! |1 K: T( F
+ Y7 p" a& e; R
$serv->on("message",function($serv,$frame)use ($client){
5 [6 V1 l# m4 ]( d# R8 Y. }
/*var_dump($frame->data);, f! o7 \" T5 ?, z" l# `* h0 T
foreach($client as $key =>$val){# C0 a; ]# I8 I3 @) x
$serv->push($val->fd,'aa');
* D# N; h4 b/ M4 `
}*/
9 s1 S$ {4 i) u- q" A* L, Y
$client=$serv->connection_list();1 s8 q1 g' B4 ^& t
var_dump($client);) y) p( c' o6 Z* \$ m5 b
foreach($client as $key =>$val){, a5 N8 o" M! j5 f, `+ J
if($val!=$frame->fd){
' y$ P% r2 G6 P/ I( {4 m! @
$serv->push($val,$frame->data);; M3 N( Q: q- ~ {" d/ s
}5 O) r3 N3 O; n8 }0 X9 h
}/ K% V7 f) x: o
6 V# r% ~+ }3 \' W
});
0 a9 `" U. i% M* `% K
% h* u! S+ N8 n1 L+ u3 b
$serv->on("close",function($serv,$fd){! T! J3 t' i% i! P$ K1 l
echo 'close';4 W+ F# g$ g$ O) x6 C9 H
});" \; C. @ g1 C& `$ f
# L2 b- S( v/ J& U. b& n1 x. l
$serv->start();
, _+ X# H: c- u4 r' |( a
) r; [7 ]; N, n5 @

复制代码

主播客户端

<!doctype html>
) c1 H% L6 r1 ]" k" ~
<html>
% v2 Q4 n! [7 O _1 L
<head>' l3 ^* U) A" N D+ {0 }5 F( I
<meta charset="utf-8">' h: t' j2 K; w% `& `
2 g1 M* _$ K- i8 T3 s* w
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5 A" e% p* N( M
<title>404</title>
& l- E/ z7 R' g9 ^) D: U
<style>' ]! a1 T3 x6 y9 A( Q/ t5 c
body{4 C: c. S/ |7 ? h. g7 `* Y$ W
background-color:#444;
8 ?7 V% l2 q F
font-size:14px;
1 @# o; T0 t4 t3 W4 c7 r& ]
}
! x* ]8 ]' e% e# T9 l* P
h3{
3 D8 H( J% P5 I2 \- g% q0 E4 U
font-size:60px;
$ P2 c- d x( ?. ^
color:#eee;
( ~% G, d. z& \) l2 d5 d
text-align:center;
# {- i- ^/ `1 w
padding-top:30px;7 u* f& R# G$ v8 {
font-weight:normal;
) `6 S8 V, j9 j! o2 f
}7 l2 z4 ]* ]8 ]0 c# U1 E
</style>
) Z% ~4 G+ k4 {$ Z& g% s# g
</head>1 W5 v5 @1 n! N( s/ m: M
* y; K+ Q) a$ a; `2 w& d" {
<body>6 h/ M% X, r5 J6 h8 N, x: v8 T
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
E j( |& g3 o# R
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>- a# [2 h) Q0 }& x2 o2 e
<canvas width="400" id="canvas2" height="400" ></canvas>' K1 X7 ] L- W6 q9 g7 n- T
<script>% d" J! I+ D; B, h7 u
var video=document.getElementById('video');
! B" m0 U: E8 e, M: R; V
var canvas=document.getElementById('canvas');7 q+ M& h* A( l6 n# @
var canvas2=document.getElementById('canvas2');0 m+ f. v; Z; D, E
var context=canvas.getContext('2d');
9 A8 I2 f, {! b
var context2=canvas2.getContext('2d'); A# ?$ H# S# }8 Q9 r% ^
function draw(){1 @& i5 A; Q8 R) d& w2 f* \& Q8 P- d
context.drawImage(video,0,0,400,400);
/ n3 e. N3 Z& P
ws.send(canvas.toDataURL('image/jpeg',0.8));
: W- H8 {# U: ~8 I7 \
setTimeout(draw,800);
9 @' J: j! q6 ?; ~
}
( i) |( z W r
. O/ X+ \. i7 J0 v; e5 s1 s$ H( w: d* B
//客户端跟服务端通讯5 W$ { Y! ]# ^/ C, G) _; i) U
if (window.MozWebSocket)7 q8 o; H2 R- A. m
{! ]+ |# y4 B$ V0 e& y% p( j$ K- p
ws = new MozWebSocket("ws://182.61.42.187:9501");
7 j7 i& e9 X' I$ d/ z1 A
} else
Y3 u. N( b$ I5 q7 s! j
{1 D7 ~6 S, n+ V% F- Z- q, i) Q
ws = new WebSocket("ws://182.61.42.187:9501");
i" q2 a4 ]) f/ J+ }6 ~# i
}
3 v6 t6 A! r$ h. M
% [4 |0 f) t+ e0 n- k
ws.onopen=function(event){% ]2 [% V- j/ `' N2 X+ H+ x
alert('连接成功');/ p) j( A+ j1 w/ X0 @/ x
ws.binaryType = 'arraybuffer';: I! i, x5 I( {8 T5 S0 c% ~& }
draw();
) R, ?% q0 ~2 f m
}' n2 ]7 j1 x6 ^* ^3 Q% p5 j2 w8 ~
ws.onmessage=function(event){0 e" i/ h. [ t
//alert(event.data);, t2 E# y. F% z0 U
//ws.send(event.data+"client");
' x. l l/ r' z* }$ h
qrCodeImg = new Image();
- B7 C- @+ [' @. b
qrCodeImg.src = event.data;1 e/ P* z1 N7 k, H9 q5 N% c
context2.drawImage(qrCodeImg, 0, 0, 400, 400);7 ^9 n, `& W; e3 l2 Y! x
0 Z# f) [+ N% w" J! O/ A
}
5 J% { ~8 L4 j3 \5 U
ws.onclose=function(event){
' | p5 S3 N; }- G, {4 ~
alert('close');" k! S1 z3 \( w, E3 K$ o- H! S
}/ f M3 ]5 n- m
ws.onerror=function(event){9 X6 c) t' m2 x# d; P5 w: m. Y
alert('error');
3 d F8 l3 _8 B' o- j( _! _# n
}
" R3 W! k5 D- J. V
//video，标签模拟视频! G! g# N. r( M
7 S: A6 t2 a6 D* h- X
</script>
5 V4 n6 w* w; O" o" x
</body>' l0 b" [8 B% h% ]3 B2 u' l0 V
</html>
" \: Y+ e; g$ S; L$ n* C' Q
( B | |0 t. y2 B

复制代码

客户端：

<html>
, O' A5 _/ u1 |$ g* B8 n1 [
<head>
' A3 E. n9 X, v! [3 z6 M$ q$ o
<meta http-equiv="content-type" content="text/html; charset=utf-8">) O" `- ~( W+ L
<title>客户端直播页面</title>
' h8 F ^. t) E) B* s, s" C( f7 h
</head>
. B( G# y0 ]& A3 O8 T9 f# ?
<body>
+ [$ Z, z4 p) V; X. s* s2 Q8 @
<img id="receiver" style="width:720px;height:480px">
* Z2 c- c% m# a P
' _! m) E2 B% G- x0 Q4 P1 I/ T
<script type="text/javascript" charset="utf-8">
, Z; a8 R3 g i) B2 L6 E1 U
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");' V7 J6 C9 {- [9 X% I. U
var image = document.getElementById('receiver');" [8 B2 m, U. ^( F2 o/ Y
receiver_socket.onmessage = function(data) {
% T" m& Q+ f# ?! \ V: k
console.log(data.data);. u4 M; s& q8 C( b z1 h& D
image.src = data.data;$ R2 e6 K" E0 k0 V" A
}
" V$ R5 g+ S2 o$ M3 X [# I
</script>
; N; V7 N2 I# W1 ]. M
</body>
, l* b& H* C0 o
</html>
3 `! h' ~! P+ C5 d- F$ c. D. N
& M I9 h) F: k( x" y; b

复制代码

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

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

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