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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);, j* b8 b1 T7 p7 Z5 h/ F
$client=array();
: d/ ]$ j- u. o" z4 p! n
$serv->on("open",function($serv,$req)use($client){" J2 L9 A8 |3 }0 }; p
//echo 'connect'.$req->fd;3 g$ q' ?# U1 U7 r/ _; M$ Q" e4 n
$client[]=$req;2 N" `1 d$ a4 U. G0 p, o2 m: M
//var_dump($client);- F; @; H* H7 P; }5 R! B. e
$serv->push($req->fd,'aa');
$ Q; s: A' v" }0 U
});$ t% x' T8 _* f; g. V% \. ?9 _3 Y( V6 x
+ @ I B$ `; @
$serv->on("message",function($serv,$frame)use ($client){0 `9 v! W2 o3 q* A! V9 r* |8 E! G
/*var_dump($frame->data);
8 K2 b; i/ v; C+ F
foreach($client as $key =>$val){
7 P0 X/ z( o. J
$serv->push($val->fd,'aa');1 r5 ]% e% W1 ]% K- h; m
}*/
; B* {6 d1 B6 q4 H! W5 i7 D; M% J
$client=$serv->connection_list();) D" @# ~6 _3 f( ]# S9 Q
var_dump($client);
0 C* d ^8 q1 e B; G
foreach($client as $key =>$val){+ V l# F: y, F5 ]* |
if($val!=$frame->fd){! I. Q# w' ~" W2 F; O
$serv->push($val,$frame->data);6 x1 A6 Z2 X% r8 W
}3 M) M# J3 t3 U
}" [# E3 }2 q( O! Q, ]+ e- j
2 s& z9 m3 M% J* Y6 H u, F
});
4 W9 }, v/ [3 l6 T* B/ k9 z
' I) F2 K6 T" A5 ]) O
$serv->on("close",function($serv,$fd){
4 z* t( X9 o( x# O
echo 'close';
7 h0 G: Y! `2 |8 h6 S) E
});
# {! l9 I5 Z6 I) c1 V
6 N t, E+ ]3 M& q5 S
$serv->start();
$ n. N4 d+ [+ c8 \
; \" F3 A5 b, J5 G; ^

复制代码

主播客户端

<!doctype html>' e. g+ u- C6 U" z. V W
<html>" d& N8 d8 [; H+ ^2 _) j. ]
<head>& f& ^/ U% Y5 `% \4 K7 }
<meta charset="utf-8">
4 f+ T2 Z- Q4 b! b5 M
3 {$ D0 T" W' x1 Z' [
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">2 j' l3 J U6 r# {
<title>404</title>
% M9 s9 T: _2 X1 B) g+ u/ ~
<style>
6 r! a" @- `; U/ d& h$ ~
body{
0 `' |7 m2 J7 M8 d% h2 s
background-color:#444;1 m5 p/ k6 C/ I' Q7 l
font-size:14px;& X7 {( v1 }/ V2 z0 A U4 f
}
3 |" H a- m# A5 \
h3{
; X$ b' r1 m5 Y; g) s
font-size:60px;
9 Q- |; @6 z; {0 L3 g& s; u
color:#eee;. K. S3 e* m/ D! ~8 U# j2 q6 ]
text-align:center;
' s4 y9 u+ }* N) ]! x
padding-top:30px;8 ]3 U v7 R; v: W$ m
font-weight:normal;
* u8 H7 N/ b( x& u' ^+ s
}8 S* ?+ k. I! D0 d
</style>
$ ?3 A9 h( ~6 s' y- L3 O
</head>
4 z1 V2 O8 w9 l* U2 t8 Z1 i
. f' }0 J' Y% y7 o
<body>
_& I3 T/ s; S- X, `
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>5 M* q& w, F9 G" V) R6 O. F
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>% C" i& {- s6 o. s
<canvas width="400" id="canvas2" height="400" ></canvas>
' O! ]( m7 S& {" B' f
<script># }; m5 V, }+ F9 R# P- \
var video=document.getElementById('video');
3 U; M) g5 i F% U# ~* H
var canvas=document.getElementById('canvas');. {2 K% h7 [& Z4 [
var canvas2=document.getElementById('canvas2');
0 ]6 N) s4 B( S2 q
var context=canvas.getContext('2d');8 j/ B# W; ?- l4 J) L5 ~+ f
var context2=canvas2.getContext('2d');8 g3 u& ~* g: Z0 X" h
function draw(){
9 X6 l0 [7 [2 _" J9 Q1 z7 y
context.drawImage(video,0,0,400,400);5 z, U; r, x0 m8 w) ]4 z
ws.send(canvas.toDataURL('image/jpeg',0.8));, p2 J' C0 b) V
setTimeout(draw,800);
2 O- T% [5 z! n4 L! y6 [& s/ R
}
! h3 Q$ I+ u9 j' S' X
" A2 V2 Q9 U' L: v3 f0 D) K8 J, E
//客户端跟服务端通讯+ a+ b7 h. Q4 p3 x% m- o/ r" \2 |* V8 f
if (window.MozWebSocket) `8 d! z# u7 Q$ p5 o% Z5 }
{ w3 P6 k3 \7 w5 C, D$ K
ws = new MozWebSocket("ws://182.61.42.187:9501");4 [% j' l! y6 [6 y& u, k
} else
9 m0 E& z( e- X E* }% m
{
- y- v0 f: d T8 A
ws = new WebSocket("ws://182.61.42.187:9501");( ]+ g% ^7 U$ k! L U/ {- T4 q/ h
}
0 F+ N" g9 A# u; r
% F2 z/ W/ p9 A# I
ws.onopen=function(event){
. V' l6 y$ q `
alert('连接成功');8 [( ]2 K' T; W- Z2 }' {/ I
ws.binaryType = 'arraybuffer';
/ p" s. s1 P0 B
draw();
& R, n4 l& H4 C# k! w# t$ p
}0 d5 F+ D. X; p6 K
ws.onmessage=function(event){1 x$ B& x5 o' [3 W+ @- y! h. C
//alert(event.data);9 Y: `& E1 s, Q4 O4 s9 ?
//ws.send(event.data+"client");
1 C9 z% h8 \7 E# P. I
qrCodeImg = new Image();5 ~1 D. c6 b: ~" r1 `* W: i
qrCodeImg.src = event.data;
/ F" S! ~) i$ K3 E! _
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
( q+ J% K8 n6 [( x; o4 G3 u5 ^
4 Q( ~3 l; Y1 I" |6 \ H. Z0 S
}
& }+ X8 N9 Z* p/ x7 ^" A
ws.onclose=function(event){8 v, I. Y) q$ S" R5 S. O' C' s! P
alert('close');! ?% p' L7 F# P3 V# z
}5 c0 @* n5 c1 y& J' {
ws.onerror=function(event){
8 s& }9 ^, X6 u. ?. ~
alert('error');$ p: n7 t. b$ i
}2 h2 W" h3 J1 T* u
//video，标签模拟视频
9 x2 P J# K4 }6 L2 n, E/ X
# d1 s+ n' [/ y) ~' P! Y
</script>* m4 \3 w/ u" }9 S$ |7 N
</body>
/ }5 t& h5 R2 k- g0 q" Q
</html>
- V+ _0 b0 S. w* o( w: y9 h) l
: b$ p K* n' E9 \* V; Z9 E0 `2 K2 \8 h4 Z$ F

复制代码

客户端：

<html>8 @( |# \: s- i
<head>/ X. `' i2 j6 A z/ a- }
<meta http-equiv="content-type" content="text/html; charset=utf-8"># i% O, f3 O; |" @+ j# C
<title>客户端直播页面</title>
3 \, p% @! R+ G* m& J0 O
</head>/ @" B" }- ?$ j/ V- L
<body>; S# `. G9 O0 L$ l; E: k6 r
<img id="receiver" style="width:720px;height:480px">" B) s/ U- D, H ]$ C
) c$ S X8 j4 w+ C3 [
<script type="text/javascript" charset="utf-8">" n- \5 t; d) I: K: v/ G
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");1 H5 c; r& A+ I, h+ b4 @
var image = document.getElementById('receiver');
) F2 _5 E y/ g( S4 F# ~
receiver_socket.onmessage = function(data) {$ f' U9 B/ V) O
console.log(data.data);
2 o% y1 J, Q) A* D* f0 O/ g F( E4 |
image.src = data.data;
# M6 H! E' r) H- E- \
}" \0 c B2 v5 F- Q
</script>
9 X" c' H. a4 ]7 L# Z
</body>, {" N9 _4 i$ `: R
</html>
: X/ f9 ]- G. C; n6 k D
$ \! t6 Z! ?2 M! z Y& F

复制代码

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

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

浏览过的版块

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

浏览过的版块

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