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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);; \1 S X! c% `" f- ^6 v
$client=array(); B0 h# v+ N' K+ [
$serv->on("open",function($serv,$req)use($client){9 N, J, }' H+ S* b
//echo 'connect'.$req->fd;
5 x: N" w4 c- p, q% ~ a
$client[]=$req;
' t4 S' E1 W* |; o. J6 ?; C
//var_dump($client);
; _% P7 p1 E$ |" }4 o: w( J2 R5 ^
$serv->push($req->fd,'aa'); P$ ~5 {: R! v/ Z' V
});
8 s; N" Y C3 P5 g, U. x# B
5 G% e1 C8 |2 V7 H
$serv->on("message",function($serv,$frame)use ($client){" j! @! I, D4 k" o" v9 {
/*var_dump($frame->data);, G6 q" j2 B6 U$ F3 I! D
foreach($client as $key =>$val){
7 a8 T3 \! }3 h+ p2 m* M8 h) m4 z
$serv->push($val->fd,'aa'); m6 y' i# c& J
}*/( V) ^- u, e; P; f/ L
$client=$serv->connection_list();$ J, j2 X7 t6 U" B: a2 [
var_dump($client);
3 O1 S, k; K- @! I O- C
foreach($client as $key =>$val){
. m; S0 c( `1 R, T/ B- y+ j
if($val!=$frame->fd){9 P# S8 u4 |. X) f: a) _- R
$serv->push($val,$frame->data);
+ V0 ?* B" U6 j2 }9 ~* F! R
}8 W: [$ N+ H" W! w
}
0 G7 X1 e1 D9 s; G5 J
# O1 K6 i: y9 m8 @% K+ R
});
6 H' C% N2 l% i, o; v! K+ E
$ h5 A M% B+ @) }4 f
$serv->on("close",function($serv,$fd){2 u# c7 Z6 s; L/ ` d9 h% |
echo 'close';
# L* K7 B" j; Q- D, z, q0 O, X
});: y, s# h( ?; U j; w8 D
8 S! C6 ~: |$ `0 B2 t v, u# V
$serv->start();
% ^& r7 \6 h, y$ ~/ Z
! y1 N! r$ v/ M5 i& X9 V

复制代码

主播客户端

<!doctype html>( X; u1 I+ R1 A* a, D) x
<html>
, s4 N5 G/ N8 H2 ]2 k
<head>' I. W: H" n$ M9 Q% J& A
<meta charset="utf-8">
+ R# f6 {" J* ?) i
( Y/ h6 o8 o) ^
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
1 T& L: X+ B) a! w6 W. `5 |! s
<title>404</title>
% Q- Q3 d8 m, b1 x, k6 Y4 c( M
<style>. { n! W( [1 }5 U, S
body{
! c- y' ?, f- h* m& Q' i
background-color:#444;
; \. v6 A0 s' y. C
font-size:14px;
9 a- n* C" @- E7 Z4 `1 }
}
8 K) a9 m' A. o/ x
h3{- V, p* t6 ]9 M/ ^- I; O
font-size:60px;! E% |# g r; l' P9 i [* ^! s( h; P
color:#eee;; f; ^2 ^( Z0 w. ~# Y- \
text-align:center;* N' n$ [) a: M6 J( b
padding-top:30px;' r8 d2 K, l% Y! f5 X% t$ L2 C
font-weight:normal;
7 p- D) x8 w: E7 l
} O, ]3 D% d3 d
</style>; k5 Z/ Q% J9 O7 N( I7 }; V' E
</head>
/ W' E' Z" Y% ]
+ Z8 f" ]# u2 b8 v2 |
<body>
2 w3 W# P* k% ]6 `" q) c5 Z
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
, W9 S& Z: q7 T" F* j4 a/ m4 }
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
+ Y8 [* |% N# b$ s9 Z2 G% L
<canvas width="400" id="canvas2" height="400" ></canvas>4 l; k3 `4 J m, L, b' m
<script>
/ V* j3 e* G. k* b- ~2 s
var video=document.getElementById('video');+ w! o, o8 a& y5 q2 k
var canvas=document.getElementById('canvas');5 n9 @7 Q1 O' Z( Y! b- C
var canvas2=document.getElementById('canvas2');
. a0 v1 t) C! Q# P3 H% j
var context=canvas.getContext('2d');$ Y4 `3 A; ]# l$ y5 `
var context2=canvas2.getContext('2d');
- V0 g3 K$ C* \. j
function draw(){
# _* u$ }5 _: b3 F: [
context.drawImage(video,0,0,400,400);) H# p. @2 s. @' K% V
ws.send(canvas.toDataURL('image/jpeg',0.8));
; o/ N8 U( }1 ?
setTimeout(draw,800);0 G9 Z3 d# e l, z, n2 }# X* }
}
6 s; a& m5 N1 X! v% w' n% X+ w! \
2 f$ I# |" e8 D0 G# s0 v
//客户端跟服务端通讯8 F. W l K* j6 F9 `, m% P
if (window.MozWebSocket)
2 ^# B) e* X( I5 R
{
2 Z! Y( B" M! @7 Z& p# Y
ws = new MozWebSocket("ws://182.61.42.187:9501");$ g2 h: p3 i' ]" ]# O# u; @& B
} else
! `' Y2 e' l( F' T; n
{8 V3 u( ]6 J9 n' P1 g4 F
ws = new WebSocket("ws://182.61.42.187:9501");
9 ]6 \1 j8 x. f7 c3 l0 y
}
" P: N- L% x. N: u9 E, V/ G
8 K$ r- Q: F1 A* z) L2 W! |- d
ws.onopen=function(event){
F* q$ k/ E5 d( N* z' y
alert('连接成功'); R; w0 s# h6 n* }
ws.binaryType = 'arraybuffer';
& E- k e" M# d6 K
draw();3 C8 n& o8 S7 c" x6 o! l2 y
}8 U2 Z5 H/ M, E K2 i0 A( [- u
ws.onmessage=function(event){; ]+ T6 @1 k3 X9 o
//alert(event.data);2 K. D2 b9 _" Z/ x
//ws.send(event.data+"client");
# A8 _ E. o! M! m
qrCodeImg = new Image();9 }; R/ d9 C) O% v" k
qrCodeImg.src = event.data;
5 V4 X$ L* N7 ]% n( z2 t0 H
context2.drawImage(qrCodeImg, 0, 0, 400, 400);( i: ~% B* [# r4 |2 F
0 A# i% | P& \6 ]
}
; R- P2 I& w! m( \* @
ws.onclose=function(event){
& Y/ q2 ?' _! |' Y
alert('close');, X9 T! }" N$ G
}
" X- i9 R8 T _$ ?/ R! t
ws.onerror=function(event){
7 S8 `1 ^0 G+ t2 z. n y
alert('error');
5 M2 i% j, R! @. X& @3 a
}# }9 s! `8 _9 l' w- p9 u- l( l
//video，标签模拟视频% Q9 t: E( S0 _: A
. z2 S3 B0 V3 F! U4 P e
</script>6 [9 X! z f" P# _6 r8 L( n
</body>
- L- {( F- Y0 ?" y, W
</html>: d& ?/ X: [* T0 X" o& c0 X- k
9 M5 l. o- D6 S3 K7 E

复制代码

客户端：

<html>5 U5 e) w6 J) f" Z: n( u: A
<head>8 _; z' z' e/ }5 G0 [. a7 ]
<meta http-equiv="content-type" content="text/html; charset=utf-8">5 W7 s) \9 H4 i% o' M
<title>客户端直播页面</title>
: \ J2 B( _5 M
</head>
$ g1 H" T; {4 f. M# U: t
<body>
0 K5 y+ ?, g! W, x- @8 K- X6 f7 e! v
<img id="receiver" style="width:720px;height:480px">
) R( q! V+ b( h6 X
/ k* b, b- k1 i
<script type="text/javascript" charset="utf-8">
: w! G2 A: ]3 O8 `2 c3 X) F
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");9 i2 L% H/ {* m) g* {; e
var image = document.getElementById('receiver');: o% u* }9 k5 j5 X
receiver_socket.onmessage = function(data) {9 ^6 r9 I5 Z0 Z5 f+ F1 R2 N; Y
console.log(data.data);5 S8 g5 Y! e9 j* A
image.src = data.data;' T, E6 e3 C4 }4 y' t
}, v w; b' |. ?+ T. x6 j' H
</script>
S3 b/ I! i1 c( J1 W8 D
</body>3 F5 X$ O( ^! @8 \, K1 t
</html>
% c1 T6 r8 G: J5 x I( P
1 Q+ ?9 o5 w$ h' E+ u3 r

复制代码

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

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

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