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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);8 y# ?1 @0 g) X: v6 D; q
$client=array();
: Z8 I7 |4 t, ^9 @7 q
$serv->on("open",function($serv,$req)use($client){- m! l% c/ }7 B* x0 l$ Y1 Y, x
//echo 'connect'.$req->fd;; {; d( L" j7 r9 H6 @* r
$client[]=$req;/ c7 U1 h) N7 k2 Y+ W* ~8 y, y$ l
//var_dump($client);
& o, U4 l( S( x7 W$ T
$serv->push($req->fd,'aa');
C! a" U/ R/ m8 C# E. C
});
2 O1 @4 `3 \0 M2 _5 v9 v
' K' W+ X0 t0 H- I/ g+ x
$serv->on("message",function($serv,$frame)use ($client){3 D* h7 {- q' E* [! T3 N a# O
/*var_dump($frame->data);3 [3 x9 f7 l E
foreach($client as $key =>$val){
) p$ Z1 j- r( J* e5 c. r* t
$serv->push($val->fd,'aa');0 Z9 d) b) z" ?
}*/+ {' Z5 n, r4 X% Y, @, e
$client=$serv->connection_list();) b7 B/ N' ~0 P! N
var_dump($client);
" V. _( G4 _* }2 Y7 a
foreach($client as $key =>$val){) _. H8 s6 K+ v& }3 a9 m
if($val!=$frame->fd){) }4 g9 d- L ~0 G( ^3 Z
$serv->push($val,$frame->data);& T$ Y U$ H$ I/ y
}
4 Z0 |: C6 @) U, p, t, _, m7 t
}7 z, `6 `8 X$ P/ s. j8 U! a! Y
) u3 d" n8 g0 H- h" D) Q) F0 d) \
});
* E& l9 [0 Y, u. v l) A7 B
4 K% _. X# x9 t" k
$serv->on("close",function($serv,$fd){$ _) ]3 \: v1 e" y6 D
echo 'close';
, @+ A; F/ b1 p# u! a- a, N
});" D- U7 H2 F- T4 I; R: r
# @- ]3 v& ~3 V) \3 {- N
$serv->start();! ?% E2 [/ S" `
$ B) I7 ?5 u" r+ _

复制代码

主播客户端

<!doctype html>$ o: m( I. e' ^; n: ^( J" `9 o! d
<html>9 c+ m& l v- p, E( O& Y
<head>
4 S" Q2 ?4 K9 k; _7 Z" o
<meta charset="utf-8">
# t' U+ w$ P* w
. _6 H- d" O9 ^, z1 j
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">" r" x- {3 P# b [% X
<title>404</title>
% R. h2 e% F% m3 l2 n/ Q: I
<style>
5 Q" l2 u' g; g, ]: R
body{9 f8 r" L: k' G; J) }- N2 _
background-color:#444;
( U& ^, v( o X- ~
font-size:14px;5 ^7 q1 c! Y8 I$ h0 I, m
}
7 r) k7 A+ I' W3 C. m
h3{ ~7 ?* _* _8 o! c$ z* I, q4 I! Y
font-size:60px;
" G0 Z% V. D2 l8 @+ \
color:#eee;* P" L0 Q& {+ X( M
text-align:center;
, G9 K8 o5 E8 N& G+ _3 {8 Y0 T
padding-top:30px;, x; Z. P7 c" N5 e. a
font-weight:normal;* G8 [7 A H& S8 P# H) v$ y7 y
}
/ Y0 f2 ^* L3 U) ^* W+ q
</style>' X. h+ r' R: R% K, h" [
</head>
. Z- V. j( s' {0 y' m/ D
+ G# o5 y! Q/ r7 L# Y8 F7 @$ J5 C
<body>7 i0 y0 m- z4 w1 s1 L
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
; X, @; D! A. h9 A3 E# n
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
. s0 l: H8 ]1 F3 w: {
<canvas width="400" id="canvas2" height="400" ></canvas>
9 \ w, A; F; k M- }' }
<script>2 D( I/ G% o% n! R/ f! a! S2 y
var video=document.getElementById('video');
2 F% m y" Q2 K+ \5 p
var canvas=document.getElementById('canvas');
- }2 i5 C. y$ d8 n2 h! j. A( b9 j
var canvas2=document.getElementById('canvas2');5 R3 C9 ~* v; w, A5 F
var context=canvas.getContext('2d');
, l% a- s+ _9 Q, Z, w( F) r
var context2=canvas2.getContext('2d');4 ` ?" `1 E" m" B1 H
function draw(){
4 D) U3 ?: P" ?. H$ y. }
context.drawImage(video,0,0,400,400);) e C: U, X% {5 F3 b; K. S
ws.send(canvas.toDataURL('image/jpeg',0.8));' C2 W4 j- C! ]% n/ H) N, N
setTimeout(draw,800);' o+ I8 j M& b# }, d+ s
}: U. Y' a2 d. f; l6 ^6 H# b
0 X* Q) `, l' e/ `( P% J1 g
//客户端跟服务端通讯
; ^. {4 p4 Y' B9 E* a6 q( }7 V
if (window.MozWebSocket), K2 h$ E/ Q) f; p
{2 t. _+ L5 _$ x4 b7 A# @
ws = new MozWebSocket("ws://182.61.42.187:9501");3 g- s& R* o7 b3 A+ E5 q# T% w
} else
; L& c7 h( _9 [8 b* V
{4 O, j! X$ P& [. ?
ws = new WebSocket("ws://182.61.42.187:9501");9 q( C+ f+ h6 |
}0 _+ g! p3 Y$ i4 u
$ M7 l+ T/ g6 B8 G) Y$ V& R+ m4 M `3 ^
ws.onopen=function(event){5 C2 [2 O- H; i! g5 ?+ x
alert('连接成功');
( L R% u* K& h( E7 b
ws.binaryType = 'arraybuffer';2 W7 S0 U8 N. D! O5 x" ^7 C
draw();) t7 f( ~& w+ t$ |
}
8 A3 Y: E, J# `6 t
ws.onmessage=function(event){! z# s$ l6 q' t" ]4 T
//alert(event.data);
( q9 Z! v+ b* n% f1 ^
//ws.send(event.data+"client");$ c. \) }+ }4 ? Z2 k7 o" T5 {
qrCodeImg = new Image();
1 r3 R# r2 ]% I" }* Z' R' A, K& _
qrCodeImg.src = event.data;
# ^6 A+ X; |" V; S1 z; I
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
; ?3 V3 o4 \9 `% c3 |
4 v* R( C/ \4 X% |
}9 g; t2 @$ t4 ~2 R d A
ws.onclose=function(event){ x8 h0 G9 \; V8 X, q& N+ T& }0 B; q
alert('close');7 @0 G! q# X: } j
}1 p6 ~/ N9 \) k5 u1 C2 K9 k" G
ws.onerror=function(event){0 l# F m2 l' v4 Q. e; t8 X% ]
alert('error');
0 G* C! k; q/ b: m% R
}7 P3 Q1 r4 R: n% o9 p2 B; v8 P7 n1 ?& ]; W
//video，标签模拟视频
5 ^" s. X9 k8 a( d
( P3 ?8 i% t8 p
</script>
% N$ w9 D. `6 r9 s* Z0 I
</body>
9 M6 B4 B/ N7 _5 x/ c7 y
</html>
- {- ~3 L- B+ E! _

复制代码

客户端：

<html>( D4 ?: d) f7 q0 L" M. g" p
<head>
; ?* ^( I. e+ m; m' l( \, r# \0 }6 T
<meta http-equiv="content-type" content="text/html; charset=utf-8">, }- K% r: S. b# n0 F, R
<title>客户端直播页面</title>
) V* z7 a3 ~5 H) `# e7 H% C- B
</head>
& t% X/ w/ P+ o' v) Y# Y2 D
<body>
3 \( e/ G9 z$ F5 C6 j5 W
<img id="receiver" style="width:720px;height:480px">
$ C6 y/ j+ h$ V
' d: E- `! J. R5 A+ g8 n$ O9 q
<script type="text/javascript" charset="utf-8">% j0 T3 n i9 F. `. j/ W
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
+ o- E9 e' |2 d# `: Q6 l
var image = document.getElementById('receiver');
d& H1 \" P" J2 H( ?3 E a
receiver_socket.onmessage = function(data) {9 e6 R! f" p4 t( x6 w
console.log(data.data);
' w3 ?; w0 S" b3 j3 h
image.src = data.data;% w4 e' ]) R2 T N
}
& a" m, Z+ l( `7 ?: K- M
</script>7 L. n8 }( w' v+ c7 }4 A g% K
</body>
1 s1 s+ e* U. ~6 i: k+ s' P U
</html>
& \1 N/ [1 ]0 i0 ?
# A, ~3 d% y4 Q5 |9 u6 [- S

复制代码

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

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

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