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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);, [! O) q9 a- Y" o
$client=array();. e0 n: N1 H. s9 Q2 ^1 W0 l' q Z+ e
$serv->on("open",function($serv,$req)use($client){
% D# f) y+ e! F- ~( |
//echo 'connect'.$req->fd;6 t; ?; J8 l1 L$ \" N6 p8 f" l. Z
$client[]=$req; B. w% X8 w3 E9 R' J7 g
//var_dump($client);% G! ?+ u9 S; h& [* D, ^
$serv->push($req->fd,'aa');
' z& D; |: u3 T2 x
});
* Z! H' E ?5 z9 e3 D6 K
2 ^3 Z8 r- ~- D7 V+ q
$serv->on("message",function($serv,$frame)use ($client){- a9 F/ R) X% {2 Y3 ~, n* L& W+ d5 r1 k9 z
/*var_dump($frame->data);
( h9 q( m7 F- d- _. S8 n0 P; Y
foreach($client as $key =>$val){% h% u) y0 c6 p2 P o, q
$serv->push($val->fd,'aa');
' n1 ^/ S0 l! [8 Y$ ?
}*/
% U- g1 ^$ O8 o% g% m
$client=$serv->connection_list();
; Y+ b* F, O1 M# ]# n
var_dump($client);- U Q1 h; v% a, o
foreach($client as $key =>$val){7 K/ F6 d* [: o% A" S, U+ x
if($val!=$frame->fd){$ c" f1 U; w K2 {3 h
$serv->push($val,$frame->data);. L* i( ?( s4 d- J, v) x5 V
}' ~) E: g) M4 L9 ?
} p2 w: V) J4 e! x* U6 c* J
' l* z2 S! C( I% s
});
' n# l( v# o, m# [3 L/ s7 O
& k2 s4 ^+ X! ]. Z
$serv->on("close",function($serv,$fd){7 | a+ K8 B2 D; q4 O
echo 'close';5 b1 ^5 f; T' j. E; ]
});
# p* D7 X9 J d% X: G
/ }/ M* Z) D! \; N' [/ \4 X2 K
$serv->start();
1 r4 a9 ~- V9 Y0 E( u
% Y4 ^* T: g9 x) x& i" n r

复制代码

主播客户端

<!doctype html>6 w4 T" Y1 m( k8 A+ i" d
<html>0 P0 `5 O# t9 O& U
<head>: |- Q0 p* }" @6 w3 E5 |# c
<meta charset="utf-8">
2 w% u8 Z; K( S8 o9 {7 V
N! e% X9 I( e+ ?' R0 j
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
$ \5 P1 u4 @' |# W/ h( l( y1 V: E3 {
<title>404</title>/ t" T9 d4 m) d3 F, [% f4 G" ?& E
<style>
2 Z% ~0 k- r6 u$ i: A+ ]! Y
body{
+ A# ?* s; s) J
background-color:#444;
! M; \. v/ s! Y6 V
font-size:14px;7 f* W | G1 k: L
}
, c6 b2 N. v. U ~5 S) t
h3{
6 k" x9 O& A0 q2 }" F) \
font-size:60px;" H7 j- S# p( H, K" W7 {; `' c, f
color:#eee;$ Z* B9 m; N& c9 n% O" W
text-align:center;# p' `% y) [; s, h
padding-top:30px;! N1 ?7 B4 X1 ]7 b- B
font-weight:normal;
0 a7 x8 F5 r7 O! F" z2 X+ S/ y: e% q
}# v7 O6 }* t2 a2 L* _! j8 N/ j
</style>. \3 x# d' j# W& T+ i
</head>
: I4 F- k2 o R* Q4 E
5 h5 W2 }8 r5 K* g
<body>+ Y0 {+ R8 y8 z+ Z+ q* m( n
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
, C; x8 z- U/ [* S6 N( h
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
. ?8 k% p" K& }8 u+ f v; G: g
<canvas width="400" id="canvas2" height="400" ></canvas>
3 r8 q9 J: ~# @3 o4 `( T4 K
<script>
: W) c! [% d& @8 y( b
var video=document.getElementById('video');
& [+ t% Y9 P1 Y+ f/ ~' c- |& `
var canvas=document.getElementById('canvas');
9 p g' y/ W; u6 Q6 |( ]0 m/ M
var canvas2=document.getElementById('canvas2');+ S/ L8 D. }" J, U" B
var context=canvas.getContext('2d');, i9 i9 i! Y3 S% v6 }
var context2=canvas2.getContext('2d');
' M+ Y+ x, ?2 r- k, Y& G
function draw(){. y9 T$ H1 f" c9 B- e5 g
context.drawImage(video,0,0,400,400); l7 [0 g; r. E& l7 M
ws.send(canvas.toDataURL('image/jpeg',0.8));
9 ~: q! j( Z1 O/ N
setTimeout(draw,800);! g, @+ q( l+ x1 v% C# c2 k
}8 A W' n2 g/ Y' ]
) m- s \: \+ M" v Q0 a- P- B
//客户端跟服务端通讯
3 S% o* u# j0 o% [2 r
if (window.MozWebSocket)# Z5 V# U; X$ H* o" {
{' y1 ]) }2 ^) u9 k, X/ e
ws = new MozWebSocket("ws://182.61.42.187:9501");
7 n8 ~6 c2 [) ]& l* J! z) w) j
} else
4 p$ i5 h8 D! A
{
: L/ i% K( o. W* B2 f9 O7 ]
ws = new WebSocket("ws://182.61.42.187:9501");
1 S( R0 Z5 H4 ?$ `9 X
}, R+ I, P9 Y# U' T
* s8 Q- o+ K4 H: b# F/ v
ws.onopen=function(event){
9 z' x3 O* }: A4 u8 W! Z: a
alert('连接成功');
$ h, Q) [' b( \8 L0 L' l2 |- k
ws.binaryType = 'arraybuffer';" o) f4 v$ j# t# N% s, N! J
draw();
0 [9 d) I- K/ I8 f
}
1 \. h8 E! y3 \( h) T
ws.onmessage=function(event){0 C7 F, u2 @2 o+ E" C+ @ m6 B
//alert(event.data);0 T0 ]+ k( P1 U& Z# K, g1 U( Z/ m
//ws.send(event.data+"client");' @! x q: Y, V( A: L1 ?
qrCodeImg = new Image();
! @, C( A% F! K# v4 K5 [+ K
qrCodeImg.src = event.data;
9 E5 w$ Q$ M5 ]6 o; [. @% P
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
/ _0 J, s) W8 V- T/ ]7 g
" ~, ^( y0 ~7 O. e5 f" V0 n/ A" X
}, C3 n! Y1 K" M: R. ~7 o6 U
ws.onclose=function(event){
. K( p/ Y7 ^0 Q) W
alert('close');
/ n7 N) u D: `1 u
}
4 j2 s! j: B9 G) {
ws.onerror=function(event){$ [% w- a; k. V8 R
alert('error');
1 K Z: ?6 F7 e. ]; j3 c
}
" G+ W3 m! t. g. t4 s: D7 [8 v
//video，标签模拟视频8 ?/ ~! n' E" T8 r+ |, S
8 J3 [9 J$ U6 K# B; S: K
</script>
3 O7 k, v. t; L9 u1 ~2 e. E
</body>
7 d4 T+ S( N" F+ Y: w8 E
</html>) N: K L; a' a9 M g6 X
7 _# {+ _' Y' W2 |- M. b, v

复制代码

客户端：

<html>
- z8 D I: O8 ~! ^) W1 ?8 d* s- D
<head>+ o3 J) n* h0 k: I+ ~. X$ ^
<meta http-equiv="content-type" content="text/html; charset=utf-8">
2 S' S' l; ]4 Y+ P: [9 [
<title>客户端直播页面</title> i4 Q3 }+ u' o2 j$ F: l/ {
</head> q: P: |* K/ q' f9 M
<body>
1 r" r. Z# G, ?1 L9 S" l
<img id="receiver" style="width:720px;height:480px">2 m# l1 v+ t- d! K# e6 O5 r) g, n
4 Z: v. P( a* w% d4 T
<script type="text/javascript" charset="utf-8">
' K0 y8 J) C. {; e3 g7 ]2 w5 p: w
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");* A$ r; B9 G- s8 I! p
var image = document.getElementById('receiver');0 w. W A9 T& t) N
receiver_socket.onmessage = function(data) {
8 r4 ?9 s% a; I8 [1 |9 @6 k
console.log(data.data);3 p# `! \" {0 q& E
image.src = data.data;
, w+ K, }# D- |% K$ N
}
( e8 y' W/ ?- Y3 F) i
</script>
5 X7 C9 Y1 ^, p) ^
</body>
3 {: |& g. r4 x# G& N7 z9 z& \9 _
</html>
: u3 M0 S" z2 Z( ]( e% v
/ @7 C/ U; e1 N ]8 h

复制代码

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

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

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