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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);" W3 `% z8 g5 q, h6 u9 M( K) u& P) @
$client=array();6 s$ e- Z- _6 T8 d `* J3 O
$serv->on("open",function($serv,$req)use($client){
/ Y- h# i$ b2 l" ^
//echo 'connect'.$req->fd;* F( b% {+ ^) F. I
$client[]=$req;
* W/ F6 x, t& I6 g
//var_dump($client);( `. E$ N6 W9 {4 }
$serv->push($req->fd,'aa');" [$ \4 o: ?2 c1 v
});
/ u2 {& l' y- ^/ Z: \& S( `
' G4 A+ ?+ s& _( V$ q
$serv->on("message",function($serv,$frame)use ($client){
5 i* [, I" b6 y
/*var_dump($frame->data);1 m% F: G& @7 O
foreach($client as $key =>$val){
. h" }2 D' C+ I2 i0 l# X
$serv->push($val->fd,'aa');9 ]/ o( N. B2 ~/ b' A
}*/4 O9 [& b) ^1 ?8 \, e& ?+ S2 Q/ L
$client=$serv->connection_list();# @# I" b7 h% W& F6 Z/ F7 f' Q
var_dump($client);
) d% z. h8 x" Z: {
foreach($client as $key =>$val){
" F1 {7 m B9 b2 q! `, {
if($val!=$frame->fd){- v; y* C- [2 _) M& [6 E5 {: X
$serv->push($val,$frame->data);
! P `. t8 a8 z: J% E E. ^. j
}
1 g; r3 E5 O# |) x7 \; V( Q
}
2 A; V5 s1 y/ H; {. D8 D0 A
1 I2 C- s1 g8 r6 w# h
});" S4 m0 \* i/ W& {, n# C8 `- H% c
4 N6 M' j' T# r8 q1 t: `
$serv->on("close",function($serv,$fd){7 Y* M( D- r* j0 q7 f
echo 'close';, ?2 U f( E) u; I: R& a) K
});
0 _& s" m8 I/ b7 J8 H
7 W8 Q+ Q0 I2 R3 o% ^# A+ D
$serv->start();, {7 _& v# f) S2 z5 R
2 R; G" g- f; E3 J$ V f

复制代码

主播客户端

<!doctype html>
* F$ k; ]4 u8 Y" y8 ?7 C
<html>8 O0 m6 O, @2 S: `
<head>
, k0 d& b, }* [( ?" z) z
<meta charset="utf-8">3 p3 V7 d- I% [2 E# {6 B9 X: i, n
/ n, k% p1 V) M, C
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
4 G3 ?, W7 u7 C, S* ?) a
<title>404</title>) {. m4 b- y1 ~$ J* J, z4 k; X% H# V8 @8 g
<style>" r$ F; Y! W9 o1 Z1 Q3 Q, b
body{: ^* w& g3 y6 l7 D& Y
background-color:#444;: N& n. h; O& x" p* D8 t0 U
font-size:14px;
9 Y, v0 q7 {9 q* ?# D
}4 J4 ?- k, x( Y+ `& g+ B# D
h3{5 ^# ~& C4 Z7 x/ i
font-size:60px;
8 H0 P, V4 N8 _7 q* S
color:#eee;+ |8 {8 M1 O; U
text-align:center;
; ~( t. Q" {% s; e4 Q3 ~
padding-top:30px;9 F( F+ k9 R" V4 y+ d
font-weight:normal;, y8 e# H* w& L3 k( ~1 G
}
8 F! ^5 a: i5 W
</style>
9 K% [& L, m0 i, I
</head>& r+ `! f0 r* e: X9 n) P7 i# D
& R8 C; P. m8 y5 @$ ?$ y m
<body>
! g/ y7 f& z f; R$ \; r
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>6 Y6 B( e4 y- A2 J1 H3 ?# I
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>+ m$ a8 V: t2 P& C
<canvas width="400" id="canvas2" height="400" ></canvas>3 {( e3 X: }4 |5 s+ q# n7 x
<script>
/ B, y: a0 n9 T( a5 b; I+ a
var video=document.getElementById('video');& l" y. G5 f& [7 Q: q
var canvas=document.getElementById('canvas');; g/ @: G+ P7 ~. B6 U: Q v8 v
var canvas2=document.getElementById('canvas2'); n/ K; L/ L4 G* k
var context=canvas.getContext('2d');7 _0 }! V- G% Z4 a
var context2=canvas2.getContext('2d');' A" O2 v# I9 u6 n
function draw(){$ k% ^2 |) n/ U' G
context.drawImage(video,0,0,400,400);
& I4 ] p2 v! T. C6 V- l% L+ H
ws.send(canvas.toDataURL('image/jpeg',0.8));) ?& {% Y, X8 V* R2 ~: \
setTimeout(draw,800);
; S7 I* } F! D8 F
}
: L/ Z+ N U7 P1 d: i7 `
3 n0 h/ a- J+ p8 \
//客户端跟服务端通讯) c" J- }! O. |
if (window.MozWebSocket)7 b+ d: c$ p! C2 ~
{
, A! ?* p3 {! ]
ws = new MozWebSocket("ws://182.61.42.187:9501");1 e, [8 a; B9 y4 A7 T2 P, z
} else
1 [' E0 D y8 T e. u: Y
{% r7 l6 P, `/ H4 X
ws = new WebSocket("ws://182.61.42.187:9501"); X( W1 c( E) d/ j: {% ^
}
: k3 K% C$ w* C
( V& J. j Q+ S
ws.onopen=function(event){
, m4 O) W& v+ I8 w0 t0 ^
alert('连接成功');; w( P! U. r) U1 P7 F
ws.binaryType = 'arraybuffer';
. c, w8 v, @2 Z4 Z
draw();
! S2 C3 _5 q- R
}
8 P; `7 S) n$ l% C! \- A4 k& g# F
ws.onmessage=function(event){
0 z+ e+ C. ~+ ^ N: A0 e
//alert(event.data);- L# p. Q9 p2 M/ |
//ws.send(event.data+"client");
' @8 F6 M5 S3 t3 ]" P
qrCodeImg = new Image();5 l: U( ~. w% }& W
qrCodeImg.src = event.data;
- K, P$ M! n% K: U" G
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
* o2 ^2 g% i: a
) I: Q' N& q9 Y$ N
}
# i2 f4 B% H; Z& P. N; }
ws.onclose=function(event){! T+ J6 i% {5 H$ @8 _( o# N% q
alert('close');+ M0 C7 L* H4 q0 a9 J. g" {, g
}* E5 q9 o/ E$ Y8 {4 s; P
ws.onerror=function(event){
0 O# }. ]8 c0 N4 p( u) O- m7 H
alert('error');
; R) J3 d8 I8 S9 \/ f- z" h! b
}
# i( h8 d1 n$ I& _2 @; x z
//video，标签模拟视频
$ }$ [% i+ y2 u' c& U* w
) J2 M* Z& { l" ?7 m# C
</script>
& m+ ^: T1 H; x0 d2 y/ g% O! d0 R
</body>1 T r+ f+ X% n' }
</html>
3 d" _) u9 u9 B& Z# t. w
, ?6 d! ^0 c- v) |: L. h# R

复制代码

客户端：

<html>
" J+ D0 U2 u6 c2 R" g
<head>4 u @& p8 [7 y
<meta http-equiv="content-type" content="text/html; charset=utf-8">
2 D) P. R% N) O
<title>客户端直播页面</title>
& J7 m, E. f: w4 z3 g
</head>
9 m, o" S0 k, e% ^
<body>
% q/ b9 N. G: |" Q u1 d) [- M
<img id="receiver" style="width:720px;height:480px">
! E/ ^* Z7 k; t, Y: p
! I0 b6 w. Q( A
<script type="text/javascript" charset="utf-8">
! q6 e6 w: ]# ^8 [$ p
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");$ L8 |8 M9 H+ G
var image = document.getElementById('receiver');
5 _( S# @3 \, n4 t
receiver_socket.onmessage = function(data) {- B& G1 L5 U1 Z
console.log(data.data);
5 C* u& w, w. E# d; Y
image.src = data.data;
2 U) X5 I/ {! |2 ~/ J, ^+ Z5 F( A
}0 s4 g7 M' K& ?1 D
</script>
3 ]9 ~- T+ _! ?" N0 }
</body>
7 `3 X$ O5 v) o7 B: C
</html>
1 l0 S+ ~3 ~* P# l. r
2 a# N7 p4 g+ H, q

复制代码

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

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

浏览过的版块

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

浏览过的版块

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