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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);. X. n$ W. }8 _1 Q: \/ b
$client=array();& H( \4 a% L9 `0 Z" ^1 g
$serv->on("open",function($serv,$req)use($client){, e4 J/ ], r% C5 @! o5 w
//echo 'connect'.$req->fd;
& b5 Y0 `' q) a e; N% o- ^
$client[]=$req;
# o9 P* A g) ~ P% s; n( x$ d
//var_dump($client);
# o% v, U4 e9 J6 T
$serv->push($req->fd,'aa');
3 v8 ^% {3 c" T& D
});
. B' A* G+ U+ O
0 [' G: c8 k i( _: f& p+ G
$serv->on("message",function($serv,$frame)use ($client){
7 ?! i; B+ P" o2 y" z7 ~3 X
/*var_dump($frame->data);
# i: k0 m5 e+ A' \9 a0 Q; ~, i
foreach($client as $key =>$val){; G9 y# C: @% S. m# c
$serv->push($val->fd,'aa');
- {( w7 L$ r0 Q0 A$ `
}*/
0 `5 j' Z2 Z5 \7 O) }& i; k5 j
$client=$serv->connection_list();
5 k- r% U7 h! r$ `. s
var_dump($client);
, G0 Q! I+ C. P/ R9 s, n* J
foreach($client as $key =>$val){
, }2 ^7 Q3 e0 h7 ^8 t6 A |
if($val!=$frame->fd){! O- C- q$ j% t4 \) c" K! V
$serv->push($val,$frame->data);
' u: N! n( ?; e
}5 y* j( w0 V$ n, m. V; w
}" v3 Q' Q* D, S M) C0 E* Y1 P
! b4 e+ A1 n- S. I
}); O9 x7 u! |& ?' F
$ a! n" i1 G5 M$ d2 I+ `0 r
$serv->on("close",function($serv,$fd){
6 D# {8 _2 h- w8 _/ a6 |; ?
echo 'close';
! o, G- y! A: _& X
});/ Z+ N2 y7 Z7 @
3 ?0 h. e8 D$ j& y5 b
$serv->start();
$ P/ n( t' o' X; M1 Z
6 y$ D% ^, R ? ~

复制代码

主播客户端

<!doctype html>
* w. S% `2 f% r% c4 r, S8 W
<html>
8 b3 n5 ]& h3 n( G' {
<head>4 J; z5 h9 U% \& v% W! j
<meta charset="utf-8">
' a( ]1 G! \- I2 q7 F3 y3 K) E
0 @8 G' F8 y/ A
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">6 ]1 {/ n4 y0 C: \8 N: ]
<title>404</title>( h; P; Y8 S( B) N( L3 j* k- {
<style>; h( t! p7 t/ r2 }- @( M, y7 p: X
body{- R6 p: d C( Q: u0 F- Z2 B
background-color:#444;
! Q( r, e% s5 r2 ^- [
font-size:14px;
8 d% q6 g% M6 X$ l; A
}
7 f! v: p, u- l ` a( ]
h3{
/ b5 P2 U% M6 N6 R3 s1 @
font-size:60px;
# l8 b: A% \: F0 E5 M( b9 l* b$ D
color:#eee;6 L/ G3 U$ V5 I+ ~! m F2 V- t
text-align:center;2 T$ {- Z/ r! o0 U @2 ^: ]& n
padding-top:30px;
" U7 _3 Y2 M- R, j. w) A1 {5 l
font-weight:normal; t& R* B! _: R9 t
}+ `: j+ j j7 u1 f% n* L# l8 K
</style>
" g( T1 X! d; e# c& ^6 H- V
</head>
/ B; h: z" d( }1 e- I* |
4 j8 \+ ?9 i) S" Q4 e$ D q/ h# c
<body>: a \. j' c0 M
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>- e0 Y% m& x+ i% l8 i
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
3 d9 M9 w. J: d' [( j* A
<canvas width="400" id="canvas2" height="400" ></canvas>
9 f6 ?- |& O# ~% V, w, f3 \. V0 _
<script>
) G+ b6 C$ v3 d& D/ ~/ r- F. J
var video=document.getElementById('video'); ?0 O# ]4 t) t, l- T
var canvas=document.getElementById('canvas');
" }8 b% ~8 K y
var canvas2=document.getElementById('canvas2');
8 S+ ?# F* `% k' ~0 Q
var context=canvas.getContext('2d');
+ v! c, N1 P5 |5 N8 P
var context2=canvas2.getContext('2d');& z1 a5 x5 X& S2 M. K$ ~' ^
function draw(){
1 s; r- p$ M. T$ F8 J( v
context.drawImage(video,0,0,400,400);6 O$ b L& Y; U, b; x& Y+ [
ws.send(canvas.toDataURL('image/jpeg',0.8));
! u- q$ e0 E& D5 H
setTimeout(draw,800);) Z/ k' P/ f2 K% B
}
4 ]# S# o$ j5 Z; m+ z
9 M* e2 T( b- @
//客户端跟服务端通讯
9 \$ \; s; ~8 M5 U" g; H. U6 a
if (window.MozWebSocket)
" ]4 o$ u% d; q$ `" l: [
{
8 h4 [* e8 J' }3 `6 k& ]- F
ws = new MozWebSocket("ws://182.61.42.187:9501");
, L: r8 w& ^/ |5 n- |
} else
! b% A& f8 j/ d; F
{
( G/ |0 z- U' O
ws = new WebSocket("ws://182.61.42.187:9501");7 S& \9 i% e: H! C$ f$ e9 R
} F. B2 J. D6 t: d. H k
2 L) E2 w$ X" j7 E3 M$ ]
ws.onopen=function(event){
, o. T5 } y9 G6 H
alert('连接成功');+ {4 ~2 w& ] A
ws.binaryType = 'arraybuffer';0 F" {. M( _5 |, c% ~. v& y& l3 T
draw();* H! ~1 g9 w. s- d" J1 X* t
}% B7 m8 w! F* I. {! e J
ws.onmessage=function(event){
3 o \* ~/ F8 Q- n8 _5 l# O+ d6 q
//alert(event.data);. u) n" X. @% b; x% m
//ws.send(event.data+"client");
& Z% k( I2 a# }. j3 e
qrCodeImg = new Image();' k y, P* T6 X) L% w$ J
qrCodeImg.src = event.data;
9 U3 N! Y- B4 O0 D
context2.drawImage(qrCodeImg, 0, 0, 400, 400); ^; \/ R7 B4 D2 t6 s
7 d9 Y2 y$ }: D. i/ t) q* H
}. ^; X1 R8 y" P9 z/ ?5 `
ws.onclose=function(event){
% ~! J! x9 _, U
alert('close');
$ a; G! M5 ^1 m d
}/ N) H5 y, `& h0 q
ws.onerror=function(event){
8 B+ X. k/ p6 @5 `( }/ P
alert('error');; [% [/ O& e* d- Y! |! j
}
( A* [7 ]2 m4 d: v) _4 B" x
//video，标签模拟视频
0 G5 F# T& m) I" d0 i- l1 r* k
8 M! Z. g# ^& N3 A" p" s% A% i* {
</script>1 `& Y& ~8 u% ^; Y V+ [
</body>
2 i1 [3 Y0 Q3 M1 ], I! d. X' O
</html>
+ c% e5 J" d, p3 `3 S9 N
6 p3 ~1 k* J2 M& x0 \4 h+ S* K

复制代码

客户端：

<html>9 {% [+ |8 C$ q L5 R
<head>$ f8 w# B3 U/ a; B" J9 m3 y& G+ K2 M
<meta http-equiv="content-type" content="text/html; charset=utf-8">1 a9 P! `* x$ i6 z0 m
<title>客户端直播页面</title>
$ \6 s. f5 s- k& a' T
</head>% m+ x& m" F: y+ c# w, @! y/ p
<body>
" O0 J# Q" v6 x7 @! b M8 d/ ^
<img id="receiver" style="width:720px;height:480px">7 u, F& n. p; V) w% O7 Y
! y& y! S7 B' w# o! v8 p8 |7 u
<script type="text/javascript" charset="utf-8">" k8 U* o$ w& [2 b* F5 A) m+ d
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
2 C# @* [" g# o/ T
var image = document.getElementById('receiver');
8 K$ q2 Q7 s9 _( n- Y5 ^! B, V
receiver_socket.onmessage = function(data) {
! L% V) H0 \3 d+ R- b* ]) k# u
console.log(data.data);
; i( D3 q* j6 n# F: B; |9 w
image.src = data.data;7 W9 @' t/ y1 m) ^2 b' h. l$ Z
}
7 ~' @& @6 a) `& n6 q3 z
</script>- e5 m7 R4 |2 z9 S3 I- Q( ]
</body>1 I3 d8 N$ y7 S# i1 c/ M! i2 q: B
</html>
+ @! a F- [1 \! h
+ w% h$ P" i& |

复制代码

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

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

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