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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);: P0 U% L* T9 J% O1 @; u8 Y/ h
$client=array();& t2 l$ C% a9 K
$serv->on("open",function($serv,$req)use($client){; D6 K1 N; t# l5 |& ^4 B/ h& z
//echo 'connect'.$req->fd;
( n5 g! H( j! q8 t% f& ?' ^
$client[]=$req;
0 k2 Q& B0 K& P# f! C0 H
//var_dump($client);/ E/ `1 U# h5 f; e2 Y- c2 O
$serv->push($req->fd,'aa');- ]3 t* p$ D3 o* b- B
});
, i) Z8 Y$ }7 a9 a- n
8 n! C9 p% H7 b. Q: `+ E& u
$serv->on("message",function($serv,$frame)use ($client){& m& E0 p5 }/ ~+ i
/*var_dump($frame->data);! ?2 ]: O2 C8 ]8 w1 ?4 c R9 ?
foreach($client as $key =>$val){/ N* o: C! U6 g
$serv->push($val->fd,'aa');7 V: M" `) Y" Y' ]; [
}*/
* S/ w: \7 ^1 f: {' K/ ~5 o
$client=$serv->connection_list();3 n: ]" S+ ?3 l6 ~2 e
var_dump($client);# C H) ~) w7 I! G8 p5 r
foreach($client as $key =>$val){) f0 A4 [6 d7 M2 ~% h2 }; r
if($val!=$frame->fd){
: Y, D1 [5 e- d7 z5 b c9 z
$serv->push($val,$frame->data);
6 A+ C+ V4 | g+ c5 L
}, F/ o# a, @% U
}6 l' c! N3 G2 \
- [" ?# X7 _2 m/ n& l1 F
});) z( o' @" X) C1 t
& V* N/ H9 s3 c7 y
$serv->on("close",function($serv,$fd){
. a4 R* x. U% X$ i
echo 'close';
; W! J( w5 D2 E! x6 W, s
});4 E+ ~! w- t& N5 @! x$ P$ G7 ~- Z
7 |1 [, Y2 O+ l1 {
$serv->start();2 c% v6 q2 v! ?2 P. W+ p
6 d2 l5 M ~) b; _

复制代码

主播客户端

<!doctype html>7 G: m, I+ @! T5 I8 d* n& m# U
<html># ?4 y6 Q. S$ n" A8 r8 c$ ~
<head>" U0 ]7 G% {6 T. A4 l e
<meta charset="utf-8">
( i) L, f0 N+ x1 h# v0 O
$ J. {4 D7 @8 D4 `- [: ^" o3 M
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3 H( i+ {* }6 [. ~8 n7 z3 k- `
<title>404</title> q' S5 d+ v( z0 j
<style>
/ D# T) k, c' j) m
body{6 P: c9 K, D3 r0 G; E
background-color:#444;
# V3 Q: k3 g! ^, i
font-size:14px;
3 p- O, w D* R) S
}( B3 L$ }, J* O. ?: |0 f4 C
h3{6 X; S0 u' X/ U( s0 q" ?; K! t
font-size:60px;
0 q& F7 O* j2 x% F1 o1 \5 z
color:#eee;
; U! K' x9 _9 p Y
text-align:center;
1 c$ L% n& K! Q/ w/ g; Q3 X! r
padding-top:30px;
S: I& W" S0 `9 {' r/ Z
font-weight:normal;
7 P( K. i0 T0 }) t
}" b6 a/ U0 X/ F, M* M6 m- k& l- v
</style>
# i/ B7 I2 y O. S# v
</head>
& p! h) R+ J) k; F3 A5 j9 z
9 \: m5 g% J: y) y, z' C. @- n
<body>, }3 X0 @; N: P4 i# u8 O, f" ]9 N: _" a# i
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>; R! _+ V* q; A, D! i) o. z
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
; X4 X2 [6 ? K. n
<canvas width="400" id="canvas2" height="400" ></canvas>: `: v5 E4 ^) F2 l8 W
<script>
* ?0 w* g! j' s: d% u: ^% a
var video=document.getElementById('video'); i# ~* b3 l- s5 B
var canvas=document.getElementById('canvas');! Q; ?# x4 D7 y( n* K' o: ^
var canvas2=document.getElementById('canvas2');
/ W5 O- |8 V! i
var context=canvas.getContext('2d');
* h9 P o& o7 O" V
var context2=canvas2.getContext('2d');
, L6 S6 a$ |; p1 }8 h* r* }! P
function draw(){
# R, Y- X& ^4 B* k a
context.drawImage(video,0,0,400,400);0 ^' C0 v% ]# r+ N' m
ws.send(canvas.toDataURL('image/jpeg',0.8));+ i% V6 |1 l; L. m" i1 [8 M
setTimeout(draw,800);
" }- u% f+ c0 D
}
$ O1 f" z2 q+ [; h
, `" n& u3 K' |" h' [: O
//客户端跟服务端通讯
6 D$ A, ]- L% E, {8 A/ v* Q
if (window.MozWebSocket)8 R- o2 Q- _' E. b8 }
{
5 z, ~6 F) p* k- B) D3 ~
ws = new MozWebSocket("ws://182.61.42.187:9501");
/ w3 Y6 c% b1 b, l2 I/ r8 n
} else
3 K4 S% b0 E0 E- W
{! M) z% Q* S' _$ [3 I, V5 W
ws = new WebSocket("ws://182.61.42.187:9501");
4 d2 K! [) o+ o. [8 D
}2 {. S9 r9 n |+ W! z8 z: p
7 S3 N) E; I, _/ W6 `/ C) J" L7 Q$ a
ws.onopen=function(event){! G) d0 M: N4 D
alert('连接成功');6 w8 U9 G3 Y. ~: Y5 J* s
ws.binaryType = 'arraybuffer';
- A a3 F$ N6 { _3 m
draw();* B$ Q# i& W" | M, Z" J8 A& e* R
}! j6 c$ t, B5 b
ws.onmessage=function(event){) f' j/ ]. H$ J* F9 e4 w u
//alert(event.data);
% {; D* o( a @/ ^
//ws.send(event.data+"client");
' y, K8 u) O% M4 V
qrCodeImg = new Image();
3 _! p) m7 c8 U$ \* ~, d
qrCodeImg.src = event.data;
& `' K" [4 y6 q, V' a2 f
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
; r/ c4 m i* ]8 I# Y( c9 i! f7 w
, I- s8 T, V4 x8 j
}
4 q d) n, I8 J8 B9 p
ws.onclose=function(event){' N- p6 _. @( V
alert('close');2 M9 o. v3 Y1 W8 X& z- m, _
}
4 e: A7 u% _5 G( e
ws.onerror=function(event){
9 x) T: ?8 _/ R0 y/ l
alert('error');! x a& { }2 P4 L8 C: ~3 q
} \3 O7 i7 B! G
//video，标签模拟视频' r8 d1 J! O1 E1 b B
( |' c% y, ^0 ~. k5 p
</script>
$ T1 ^; ]5 B E: m" @ {7 ?
</body>( _! r0 ^) ^6 v; X9 K
</html>
$ e! d/ l( h& s/ W+ W( F: L& L
3 J) i/ N, H+ e2 I! j7 c, z: c/ B

复制代码

客户端：

<html>+ ^+ ^6 u, F$ n2 j% p" t
<head>6 e& Q: n" Y- A6 i+ n, i
<meta http-equiv="content-type" content="text/html; charset=utf-8">
( Q7 c a/ j0 s* O* J% l
<title>客户端直播页面</title>" \- c- |; D/ c9 w4 A& f- n! A( y
</head>, P+ q& D; J7 \1 e& ~% {* q
<body>
! {# c& F1 l& G# |0 a" b
<img id="receiver" style="width:720px;height:480px">
7 r2 I$ ~4 L5 q' R% `4 t
" ]' ?5 K, i: U% O/ o6 |
<script type="text/javascript" charset="utf-8">' }. S5 o1 B6 Z4 A0 ?
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");- l: p+ P2 j4 F$ h* }
var image = document.getElementById('receiver');
4 y m' I/ Z, x5 y+ C4 r9 f
receiver_socket.onmessage = function(data) {
; }/ Q( T: e8 D1 P# Y2 c7 W
console.log(data.data);
3 k8 o& ~) ~& t. S8 }. y
image.src = data.data;# ` e: Z( M8 ?( U' Q
}
) B, b/ E9 a q; C# Y
</script>% ~! h# F7 B. b
</body>* }0 ^# H2 }0 l/ L( g- J
</html>
) P. h/ X9 j2 @
; a, a2 L; O% `. n+ u

复制代码

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

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

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