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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
4 @; |0 W7 [0 a5 ], u c" D' z2 b1 |
$client=array();! o3 [# Z0 v2 M: }3 G5 p P* r9 ~
$serv->on("open",function($serv,$req)use($client){- ?# y& x: f( ?4 h3 w
//echo 'connect'.$req->fd;& ~. d( q$ |! Z1 j
$client[]=$req;
7 S7 }3 U9 G e
//var_dump($client);6 ]! {0 k+ X y# `" Y9 ]/ I* \# Q
$serv->push($req->fd,'aa');+ ]& X; a2 p& B$ V
});
, M2 z: D9 A6 i
G4 S1 M, a1 H. Z7 h
$serv->on("message",function($serv,$frame)use ($client){1 p1 Y! K: [0 k8 S/ D _
/*var_dump($frame->data);
' ~0 S. i3 O# O8 G! P* Z. g1 |+ w
foreach($client as $key =>$val){& {) f& n9 i+ t
$serv->push($val->fd,'aa');, K& e; b5 o; G) W0 Y
}*/
5 ?" J, G% t, l' i; W2 o: P
$client=$serv->connection_list();' @! y+ u' ^; k
var_dump($client);: _/ e j g7 a o
foreach($client as $key =>$val){+ C7 {* P/ X# C, T) ~# S
if($val!=$frame->fd){
5 Q4 d( O+ M& |( B' C$ ]
$serv->push($val,$frame->data);# C; n$ }! ~+ t$ S3 f
}
1 g: b$ z5 b3 \1 T7 a
}/ s6 Q# J9 }" k0 `: ~9 ]" P
6 V; z# w4 O% ^' l+ T; s, m O
});2 g8 L7 @: {+ ?& D+ j8 G
& T* g) \, Y/ |, \
$serv->on("close",function($serv,$fd){
+ [6 R0 B$ H# U8 a' O! F+ H8 i
echo 'close';
' O* G( s1 ^2 o) `* G& Y4 f# [
});
, E* C! B! h7 Q# W
! ^9 B& u; w& @. V/ w
$serv->start();
: e4 I9 w' g S# v z
2 f. ? W* h- g

复制代码

主播客户端

<!doctype html>
1 M |1 k9 ^9 ~
<html># y! Q2 t4 `5 {1 f/ \, y$ r
<head>8 s1 R0 u: y+ W0 ]& @
<meta charset="utf-8">7 V; O1 N, z/ s/ G
+ H$ m( O$ @" z7 ^
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
0 Z" h `0 Z; ^' d1 ~
<title>404</title>
* Q; j) X. ]9 k
<style>
+ H _8 v: I& Z# _7 o. d
body{( H" A0 k; w4 |0 J- k g
background-color:#444;" ?: Q, R: ?8 B r
font-size:14px;' K# H1 n+ _" V+ \! I" h2 k
}6 `2 \; [& M5 W* d5 A; [
h3{) M; S- ] B' N0 A
font-size:60px;
4 ]( Y0 I& h4 u4 V; f
color:#eee;
, i4 h6 g _$ A1 a/ m3 v
text-align:center;
( |% L1 x$ ]" L
padding-top:30px;% Y7 l. `8 C* m
font-weight:normal;( m( Z8 w# R0 @3 w
}
2 I3 T2 n! }, x, k0 {1 Q' r- ^
</style>
- I& g8 c/ |& B& T
</head>" V* @6 B e* k! k
h) l2 R; y: o2 T2 y, e
<body>6 d! s0 U% U |9 T
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>6 n0 Y3 Q+ O0 J( q4 h1 o& K
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>; ` \) p) \& U3 Y* w! l
<canvas width="400" id="canvas2" height="400" ></canvas>
, Q& A ~% d$ k ?
<script>; c" e9 R# T* ], u3 P
var video=document.getElementById('video');
- ^8 x7 l9 c: V8 U( j4 [+ ~
var canvas=document.getElementById('canvas');3 F; ^/ K7 |$ I2 S4 O4 n
var canvas2=document.getElementById('canvas2');
6 l, s+ g' l- X2 k
var context=canvas.getContext('2d');( r) _5 U$ j" x' C% c) r3 V
var context2=canvas2.getContext('2d');( [5 `5 a7 p- R$ H, Y: _& Y
function draw(){! }+ D, D( M/ ^: I6 b1 T
context.drawImage(video,0,0,400,400);
4 y! ]1 o v8 i; C6 Z( x- @1 c
ws.send(canvas.toDataURL('image/jpeg',0.8));3 [6 K6 I' l* u4 E
setTimeout(draw,800);( S& n" ~/ h3 M- J; F
}
4 @9 {: E7 d7 ^- ?
* D- K7 A7 x4 T0 v
//客户端跟服务端通讯/ A8 @& ^8 G0 V
if (window.MozWebSocket)
1 x9 c9 o" Q* u# Y" V) y2 e( `
{2 c) l. l0 Y. ^! `8 P w
ws = new MozWebSocket("ws://182.61.42.187:9501");1 [3 S# f5 ?& T+ _. G# S7 W# P" O; L
} else
X$ J( D* y$ G- o$ o& A- u
{: O( H8 b* q" `( w
ws = new WebSocket("ws://182.61.42.187:9501");( g4 |( L4 }, B& H
}
; ^5 O C8 A* M5 C" I
) _- K* C- O3 I! i$ t
ws.onopen=function(event){
7 N& Z2 S& N" U4 J/ |
alert('连接成功');2 s* s% e! t) S- `
ws.binaryType = 'arraybuffer';" J1 n z/ h/ g7 Z8 m
draw();
' Q5 ]' f4 E& I
}; B: g6 b5 p; E& z! }
ws.onmessage=function(event){
E1 ] i \1 N% @& b% Z
//alert(event.data);3 \+ @/ E; M } @
//ws.send(event.data+"client");
& \+ j7 Q1 ^3 v/ A& z9 P
qrCodeImg = new Image();! J" _% c0 T B v! X
qrCodeImg.src = event.data;
" g4 K% t& d4 a9 [1 {: \ f. N
context2.drawImage(qrCodeImg, 0, 0, 400, 400);3 A1 M% F! W; P8 E8 C9 N+ O1 R
" B; w* Q% u8 _% J: c/ z+ C% l2 y
}4 X1 B) j/ X/ i& i5 h
ws.onclose=function(event){
' U+ T+ s( \3 h1 f
alert('close');
* L G- _# y( P+ y
}/ V, x G' P7 ^7 T% G' \# `; v
ws.onerror=function(event){+ A$ ]3 B5 j# @* l$ o( X8 I" w
alert('error');
l0 @9 w3 D- e, |9 b$ X
}; Q" e2 p- P& J! u( G: `
//video，标签模拟视频
+ w. w' E! w; t* j. O/ R- D
) F. X) D! p; p9 z B8 J B
</script>- W# L. s }2 X3 d
</body>
$ f7 B3 ^: m. Y7 m
</html>) m9 z3 Q" z" P% q: H9 i
* m3 i8 M+ Y& p, K1 k' k8 Z5 Q

复制代码

客户端：

<html> G/ e9 e$ S' @) I* I* s. i8 `7 ^
<head># `. U3 d6 h! z" ]+ [. {; B
<meta http-equiv="content-type" content="text/html; charset=utf-8">1 P# `7 L( `4 v" N
<title>客户端直播页面</title>
4 K" e' [# j# w/ r U
</head>& {3 k0 K5 q; H0 T4 @1 p* l; @
<body>; x# z2 Z1 U" J* I+ z) v
<img id="receiver" style="width:720px;height:480px">3 B3 z& U2 K8 L, b0 j' \& Y
% @* Y3 b5 ?& N1 v7 g* ^
<script type="text/javascript" charset="utf-8">
; d6 `0 R3 ?7 d
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
% s. M0 |% ~9 }* A
var image = document.getElementById('receiver');4 W7 {1 k. [: ~3 O ?
receiver_socket.onmessage = function(data) {5 y# k; o7 [4 R @
console.log(data.data);
% L/ v1 N; O7 t+ j ?2 c
image.src = data.data;
. s) @( h" o- o: z
}5 j' B6 D' M+ }' X: f
</script>
& ~( `) ~9 n1 \% n5 U; ?
</body>0 G! R% s" ]8 j; g+ @1 y5 K# r/ a
</html>
' T- C: ~" [0 x6 P
6 R. z1 Q- Q- P* m4 @6 V2 q: Z

复制代码

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

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

浏览过的版块

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

浏览过的版块

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