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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
* P7 R7 u5 r2 e5 j! r
$client=array();
3 S+ I3 G; l$ s. Z6 O7 L5 `
$serv->on("open",function($serv,$req)use($client){$ f4 i" r0 V+ h# n
//echo 'connect'.$req->fd;+ N! V7 t" n4 _8 |& ?0 a
$client[]=$req;
5 C. ^: O1 G4 V. }) n/ y4 j
//var_dump($client);( {$ e- A) P; l* B3 J1 C. y8 ~, F* g
$serv->push($req->fd,'aa');
- v3 K) s4 p; ]! b$ c! J
});( O7 R3 w7 v+ ~0 @% C, S4 ?
' C5 G2 v; L: q8 l4 l$ ]0 K( o. p
$serv->on("message",function($serv,$frame)use ($client){- d6 j' V$ M I. M ?7 e I
/*var_dump($frame->data);
7 ?0 g. k P6 s
foreach($client as $key =>$val){$ p% n3 \4 M/ V( O9 H6 V/ U1 T4 L- N
$serv->push($val->fd,'aa');
% s. ?; ~' `: p* _! ?" u
}*/; H/ b) w" H4 O, y* J+ X
$client=$serv->connection_list();0 R: ?2 u1 u p+ R5 G6 o: }5 {
var_dump($client);3 M* n" E( n `) G9 Y8 E# B) E
foreach($client as $key =>$val){
0 C) t6 x$ V$ }) ~8 i
if($val!=$frame->fd){
! C" K) @) Q+ f
$serv->push($val,$frame->data);
- {5 U$ M9 R: U8 _/ y. \$ M0 Y
}
5 ~: I+ I) V7 h5 g0 Q" ]' O
}
$ T6 D/ W8 Z5 `" L
% q2 C( u3 s7 L$ p8 R: J0 f7 w
});9 p# B1 z5 U/ |
- T3 r- A, f/ y- H& N
$serv->on("close",function($serv,$fd){* Y/ O1 I7 ^, W) {
echo 'close';: u4 w, B4 o# k1 j* e- r
});
. m5 C) \, p5 ~1 S8 [* F4 }) Q. y$ r
4 g( R+ k! ?1 A. _8 f; m
$serv->start();: }( F9 O/ G. h% P
! w* [! p8 a: I& [& W; `

复制代码

主播客户端

<!doctype html>6 o' K5 Z* g. E) M) n6 N% y
<html>
0 u Q3 a! W/ l
<head>+ ]$ e& `# Q- x
<meta charset="utf-8">
. f! U3 i3 N- H r+ l
. z1 m4 q2 A9 p
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">8 N% a9 k7 N- m/ }! v4 `" \
<title>404</title>
{0 U9 X) L0 n/ _
<style>& T; C* e$ v0 X ?3 k0 j+ h- d# k
body{
3 z$ \+ l$ B5 \9 p# g; s
background-color:#444;
' o+ y$ n5 d- ?3 J
font-size:14px;9 w( |" P8 w* @, f1 `9 g! r
}
; A6 A$ p3 s, u
h3{
8 Q3 ?# }4 r/ O
font-size:60px;
5 C9 c' Q7 F+ L. u- s6 F3 x& ]
color:#eee;
) p2 n, u8 t( Z
text-align:center;& r w6 [/ W8 D9 J, m# @1 Y
padding-top:30px;
" ^: y. @8 ~) O" D2 p' w7 n: |
font-weight:normal;
+ e$ k [1 E3 r, P6 Y2 _$ t3 W
}8 e5 k1 s. h, R( ?# f/ p" b7 O4 z3 m
</style>
# W8 g) ^$ |# q/ O% y
</head>
2 F8 Y- s' P- l8 c8 I2 c+ m' R. B
. U) A( ~7 B% g( ~8 m
<body>
r2 h" X: M* {# g5 N; Y
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>, U o; p% P+ |4 s' \3 v* J% w
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>5 \" e* a9 C3 L1 x, w; B
<canvas width="400" id="canvas2" height="400" ></canvas>
2 r" G8 _2 Y. d( P; s: z% `0 |: O" V
<script>$ C r0 M$ V% a W" J
var video=document.getElementById('video');
0 z! M- t4 p' h% h1 S7 r0 j. p
var canvas=document.getElementById('canvas');
. o2 J; k1 F( m: L, a: A" R
var canvas2=document.getElementById('canvas2');( y: U& \+ D: ^& m
var context=canvas.getContext('2d');) j: |: h% n$ H' V1 C% u. ] ?
var context2=canvas2.getContext('2d');
3 Q" P3 M0 Y- ~5 o
function draw(){
/ O" ?& r1 a& ]' k
context.drawImage(video,0,0,400,400);* ?) C& r$ I0 l0 s" }) S
ws.send(canvas.toDataURL('image/jpeg',0.8));. g8 j1 Y) _# S; p N
setTimeout(draw,800);
. t3 ?& l Q+ }7 r' s( v
}
# Z) u3 l. Y1 T, r
1 e; l* v- v' \0 D0 \/ c
//客户端跟服务端通讯; s: O( z2 u) v( h
if (window.MozWebSocket)5 j+ H8 B4 m/ P U1 D# A% b# P# x
{
1 y9 H- u* ~9 ^
ws = new MozWebSocket("ws://182.61.42.187:9501");, _2 ]7 y8 ?* W* x) A* [4 w9 d2 \
} else
. C" B7 @5 b& c
{
9 q. F$ H) g6 @6 K8 o
ws = new WebSocket("ws://182.61.42.187:9501");! ?5 ~! v+ \" n' h$ t( N; e
}" T$ x- O9 f0 k3 H& T; h
/ L7 P& d, p. ?: E }( E
ws.onopen=function(event){/ B! d8 ?1 M: j" ~) H! \$ M. m
alert('连接成功');* c" b( w0 z2 _6 R, N; a3 M+ P3 ^
ws.binaryType = 'arraybuffer';
; `( o" l8 a" N1 m
draw();
7 N9 T7 j" `$ Y2 h( A; U0 ]8 r: g! Q4 R
}
# J! n: W9 X$ M" B& @1 W
ws.onmessage=function(event){: u* U( O" z4 [ g( {5 @( v
//alert(event.data);* p M2 }4 u7 x- a
//ws.send(event.data+"client");/ _, Y7 C' `1 ?5 N; R
qrCodeImg = new Image();
6 J/ v: X& e9 r2 M, S0 \! r
qrCodeImg.src = event.data;
5 X. j/ ^1 p) l# m0 B
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
" M6 J+ F3 R3 T
U7 Q: s0 G6 c* c8 G
}
5 C+ t! n; o- F: A4 u1 d& y9 l
ws.onclose=function(event){
9 |' ^. h5 n7 x
alert('close');
( }3 H9 [3 W0 ?( L$ @
}
4 R: f; Y5 i! k ?' ^
ws.onerror=function(event){3 O5 J. U8 u2 `1 i
alert('error');
% A4 D" O+ a0 p( u( @0 w% z9 _
}7 i1 {7 f, h8 ^1 o1 @3 M* \
//video，标签模拟视频
. k/ j/ R: ~ @9 b
4 l1 U1 T; `) e7 [/ D
</script>
4 ` Y$ m. J+ b3 A- I
</body>
8 s) ~2 a& H7 R/ W# q7 g* f/ W2 a
</html>
. R4 H7 [. a4 R5 R, r/ L
1 D; ~: \. d H6 I

复制代码

客户端：

<html>
6 u% W+ \& X3 r6 Y j, `5 e. I
<head>
" r6 {: |. \3 C
<meta http-equiv="content-type" content="text/html; charset=utf-8">; Z8 W+ q" K4 ]6 y" ~0 {3 T
<title>客户端直播页面</title>
+ Z: H. \% u' S n) A
</head>
; |9 G1 v. F: O. f" \
<body>$ r, W; [) L5 C, A
<img id="receiver" style="width:720px;height:480px">8 v+ o& @( L. H2 ^
( Q5 W8 k5 D T3 B, h( {2 w$ t
<script type="text/javascript" charset="utf-8">
% U+ l/ ^7 H8 V# D- H& ~
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");6 {$ e! i$ N; D, r. v5 d
var image = document.getElementById('receiver');
' Z: d* u: F4 f% b2 Y% @/ X
receiver_socket.onmessage = function(data) {
/ B/ @; @% O" h2 Y; k
console.log(data.data);; w) E8 ^9 |, F3 t
image.src = data.data;5 D, O+ f# p2 K( B" P! [
}1 s! [& ~4 q" z9 q! z
</script>
X" h5 y* t5 t# X3 m, g
</body>
4 `2 L0 O2 S7 |" B7 a5 B4 h
</html>5 w) K$ A j! U1 V! \
4 a; B" h- ]% `' y# M

复制代码

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

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

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