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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);4 s2 W% q2 Z9 x! j- D! c# j7 f
$client=array();+ R8 A" r7 _* H) N+ c, g8 f" x7 v
$serv->on("open",function($serv,$req)use($client){, b1 L; l8 @0 k, h$ O
//echo 'connect'.$req->fd;
5 q# b, B+ }, p0 {1 n. h
$client[]=$req;
+ _ Z3 S6 R5 X
//var_dump($client);
7 q3 f$ {! D! T" H) Q
$serv->push($req->fd,'aa');
! d) a' q \& Y! E
});
+ n8 Q# \$ o% p
' O" \- O4 G8 t6 e
$serv->on("message",function($serv,$frame)use ($client){
5 s0 \9 [# l/ c6 t6 p
/*var_dump($frame->data);% n6 {- t4 r R6 r9 [: o/ x1 f
foreach($client as $key =>$val){; k0 c3 j, L" Z v% T) I& U
$serv->push($val->fd,'aa');+ Q$ ~* @- V3 @* r+ a
}*/
3 Y3 p9 E# j+ b- I I7 ]: r
$client=$serv->connection_list();# d& p$ n+ Q5 O7 e- I
var_dump($client);0 B3 j; I: G' k; f; W3 K* `
foreach($client as $key =>$val){
" ? N0 Q6 O3 w. E
if($val!=$frame->fd){
S4 r$ Q" A2 l% H% ]
$serv->push($val,$frame->data);6 }4 u/ H" z) @0 w; l' e F, F* i) v
}
2 F* Z4 C# [4 C: D, v" @
}
% S8 L" L% {) o1 G
3 W- j' J4 c6 l. [* \( A
});
% p0 L$ [+ c4 m( j$ ~
- A: ~9 K+ t( X0 Y' m. M
$serv->on("close",function($serv,$fd){0 K# X4 |. K- W( |5 k2 V
echo 'close';
1 q* L6 \, k$ d# e: a8 j
});
6 w H+ N! Y" ]8 h8 d: s$ a
5 W2 j7 L2 {' N1 v$ ^6 W- k. Y
$serv->start();: }! O( t# v' v" W% [- X4 p. E8 |
" W2 u$ J7 l1 e+ e9 j5 u3 J

复制代码

主播客户端

<!doctype html>! q. {* H6 q/ C( x
<html>
& e b& ?4 d: k
<head>
b& I' z' x, v0 q* g
<meta charset="utf-8">
# V t" ~ A0 D: B4 D
6 }( x5 _ X0 I% L/ j/ _
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
* |6 N% ~, c' X4 k: U4 `& z
<title>404</title>2 K6 y' l. `' I
<style>& H% ]5 f& ]# v! r* t6 L& F7 l) T! A
body{9 \2 o+ H7 L( n: \: g4 b; ^+ v
background-color:#444;# n) B6 L+ R4 w3 Z6 o K1 N
font-size:14px;
4 Y* G! s$ L- l# _- Q+ A
}6 h0 C) M9 P6 x
h3{* F9 {) @9 z8 D4 m
font-size:60px;
+ T1 I0 `9 L; ~- G1 \
color:#eee;
) x2 n1 g7 P }$ \ q- F
text-align:center;0 x, Z- v! l" f) K5 C
padding-top:30px;
! w8 [* e' @( U+ Q+ d# J' Z5 K
font-weight:normal;
! S/ C; H( Q. d
}$ j8 F% f9 o; Z+ F
</style>) k8 L: _2 Q9 k/ P. l
</head>
n b3 m1 y. w. A% e5 u
/ v8 u8 }* Z3 q, _/ f- q/ S0 L
<body>: s! p+ D4 o, T) l/ W7 k. n9 \
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
' K3 p* i# n' u0 P" @
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
+ h+ p- Z; p r; T" b' W
<canvas width="400" id="canvas2" height="400" ></canvas>% ^& T7 y! N# m" j( ?+ g/ L) z5 I
<script>3 V b. S/ H" Y% N' v# t/ V
var video=document.getElementById('video');+ Y% _6 V& v( n, j5 k1 a- p
var canvas=document.getElementById('canvas');( i9 Y/ t5 }6 j/ F8 {
var canvas2=document.getElementById('canvas2');& f3 W. W8 E6 w0 L. L, N
var context=canvas.getContext('2d');
8 t" M3 F/ ^6 G0 `$ F7 J
var context2=canvas2.getContext('2d');0 j/ g- ?: a4 r% |! s
function draw(){- s6 W* _% d* x- m
context.drawImage(video,0,0,400,400);
% w# V* q! g9 s; L
ws.send(canvas.toDataURL('image/jpeg',0.8));
. l. K6 W: [" I* \7 A& U" s6 C% M5 I
setTimeout(draw,800);
* C) R& Y9 c" T$ s4 B+ U1 d. }
}( N' v, ` z; k
9 g, W% v1 L8 }. F q
//客户端跟服务端通讯8 C3 C! J/ O$ P% j* ?
if (window.MozWebSocket): \# s+ v) k b8 C4 Q" y
{( D) X& M4 N! n
ws = new MozWebSocket("ws://182.61.42.187:9501");
* _. q7 [' ?5 R n. R
} else
. m* W* u9 Q8 }, \* s" B; D
{
/ e! e. S/ }1 y. D e
ws = new WebSocket("ws://182.61.42.187:9501");
) b# E0 ~; o( E/ Q' k. ?, }
}! ~; q2 X6 u! u* X% [
9 ~+ a7 M$ R6 I5 q
ws.onopen=function(event){6 Q+ o, X& t9 E9 U) }' H/ K1 ]
alert('连接成功');
8 P5 v0 a E9 {# x/ n I
ws.binaryType = 'arraybuffer';5 u* P3 o8 M/ Q4 |
draw();3 x5 A& N8 O# k, \( u3 _( j# b& {
}) d* B6 I, G( Y
ws.onmessage=function(event){
/ Q! U% P; a$ S" h4 R" Y! x$ V: e
//alert(event.data);
?" P5 Z5 X" U4 X
//ws.send(event.data+"client");1 e- J( e1 V, A& p
qrCodeImg = new Image();
6 [( `8 m( H6 ?1 N' u; v4 `
qrCodeImg.src = event.data;
7 ]! z. g0 j4 _0 n1 ^! {4 C' r1 @+ L
context2.drawImage(qrCodeImg, 0, 0, 400, 400);, @# u) N( q$ k3 {$ m& L2 p
" `6 x" ~* [+ u. C
}
& @! d( c+ g1 y
ws.onclose=function(event){# L( x, U1 I' e: e$ H9 T
alert('close');
/ F, y5 m( b8 C- @1 P0 D8 |) K
}
7 i5 A* y2 w; D
ws.onerror=function(event){/ ~3 b8 L' O1 o
alert('error');
3 C& q0 ]" Q+ C7 \6 e
}. B7 G* ]0 B; j5 I7 e
//video，标签模拟视频( t5 w( q* n/ P: ?" z- S" m
4 p6 n& Y8 `; C6 J& x! F
</script>, M6 j8 M, @9 I$ D/ x7 S
</body>* k0 @9 T: V8 @
</html>2 M- T: @1 s; O5 f1 ~: T/ R
r8 ?$ n- ~) J ^1 I$ d8 H

复制代码

客户端：

<html>/ j/ h; @3 w5 ^4 k! Y
<head>
3 z2 g" X1 I3 x8 X; ]7 R
<meta http-equiv="content-type" content="text/html; charset=utf-8">& f2 b1 F& K( z: P) {2 R
<title>客户端直播页面</title>
% `3 F2 m6 n5 C3 h, W
</head>) O0 J0 k# ?) v) b0 F' t( ~* O1 Y
<body> a+ W! e! u/ X N$ Y# }1 m& g
<img id="receiver" style="width:720px;height:480px">+ O; M: Q1 r; ^; y0 [$ ?+ X
( G& d$ q, ?! J) q
<script type="text/javascript" charset="utf-8">
/ t# P7 s8 F x- C" p
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
+ t6 i: _: P5 O) k2 Z$ ^& X [
var image = document.getElementById('receiver');6 z. V, v5 ?4 x* g8 g
receiver_socket.onmessage = function(data) {# T* G" ]% U- N
console.log(data.data);+ V7 J- Y- Y9 [. f
image.src = data.data;/ S3 i2 z0 d% z1 F
}
2 }# w6 H2 Y2 d9 q' @+ S
</script>, E' H9 g) d9 l6 H, Z0 M2 j# `
</body>
' i& z( c6 w# V0 V* Q7 a- v: I
</html>
/ N- p/ G3 }8 G8 z9 _1 U4 s1 C

复制代码

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

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

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