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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);% S) E( x6 e$ Y9 R7 |* ~' p, I" W
$client=array();$ z5 g$ d: n! M1 d/ m2 f
$serv->on("open",function($serv,$req)use($client){- E% v- h4 M6 |% T
//echo 'connect'.$req->fd;$ L- P; O; F" T
$client[]=$req;1 l/ Q; |8 ^0 D5 y8 q" ]& a
//var_dump($client);; l* n) f& l% _9 j9 I( @ a
$serv->push($req->fd,'aa');
) f. m" ]- k* [) F1 @* B
});2 k! ^& |) \0 N, u0 l6 D
! x' M) Q+ S# ~5 k, J
$serv->on("message",function($serv,$frame)use ($client){
! o# G9 L3 [9 v6 \& b# J
/*var_dump($frame->data);1 K% A$ }. t1 o! M" n
foreach($client as $key =>$val){
9 y$ h1 y2 n( ?* f( l
$serv->push($val->fd,'aa');0 ] [. t3 A' l9 A4 [7 E# I
}*/% o) `- Q) _+ H2 ^" _
$client=$serv->connection_list();5 D+ b! g1 ]3 o1 G8 Y
var_dump($client);
. {1 V/ f6 R# F, W+ u, E
foreach($client as $key =>$val){
. V+ q; z- t; P3 n
if($val!=$frame->fd){0 T3 h, b- t: D
$serv->push($val,$frame->data);$ P$ M# t9 q6 y( F
}
R2 B3 e0 \7 x; j4 g! H
}
4 z `7 `# X( z- H; G7 j
0 a+ O$ Y. w. C/ e
});
8 y2 U4 N" w% Q" K9 T) W A& x8 |
* [; M1 a& c* s& L9 e
$serv->on("close",function($serv,$fd){ Q7 H( i, ^3 j
echo 'close';; h4 K7 y- e2 p- x1 p3 z/ O0 a
});* e; d9 f$ D$ y) R6 _) b. q
# K! F; ^! E( i( ~ y' `7 J/ W
$serv->start();1 ?/ l2 {. h& b* \- q
, e0 ?: x% |1 O" H2 g6 `

复制代码

主播客户端

<!doctype html>9 f, l) \1 `5 B% b
<html>
, _! D* E8 x$ o7 J+ _
<head>: D$ \' e( H9 f" m9 z
<meta charset="utf-8">; [; f8 n, ?. `. \5 ^
# M- q+ f! e& q7 l
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3 }1 W+ J. k, F0 e" ~. `; S/ H% v
<title>404</title>
' ]" {' Y0 }; N, x8 y) N Y
<style>' Y1 N, p" v6 A! y/ r7 t
body{2 B. O* M; \% }; {
background-color:#444;! R0 U2 N3 Z) Z% C' }% B: @
font-size:14px;" z( ^, S" R$ Q! U! n
}
! n( e- B! n: g2 W- R! W
h3{7 ^ {! a. b E# |! E& W' k9 ?
font-size:60px;* l6 \7 `3 M" e6 |5 d- [
color:#eee;5 B4 n- P: E$ R& v: u0 W
text-align:center;% l- s& g. @6 R( k# _# a
padding-top:30px;) M; g/ k3 _; f+ m [
font-weight:normal;( M4 M; r* x) ]; |* |4 a
}
9 P" k+ i* e- O7 g% p
</style>
) Y1 \+ p) }' H
</head> n5 s( C! p7 q; j5 r! E; I
5 i4 t: n9 N; x) A0 q) j5 q0 `
<body>. H4 A( w: r+ _" |& q( V. Y
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>7 Y6 D, f4 c" _* K" I" x# e8 m5 d+ e
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>5 s& ?; ?- b/ y" P: I2 m5 C
<canvas width="400" id="canvas2" height="400" ></canvas>9 g9 [% ?& v/ y" D- e& i
<script>
! l9 \ u' U) h, F; Z% x
var video=document.getElementById('video');+ w' C" z& g1 F% k" \% D O+ H
var canvas=document.getElementById('canvas');
; J) p/ G; o \) G' w8 K: t) ~" m
var canvas2=document.getElementById('canvas2');
* L! @/ _: M9 g! o
var context=canvas.getContext('2d');+ h: V1 [$ P4 {" b
var context2=canvas2.getContext('2d');! h, C: l5 z$ M6 f/ n
function draw(){* |+ T& a) d2 {1 V) m& m/ f2 U0 g
context.drawImage(video,0,0,400,400);
* ^( O! M0 o+ @ v! o: C9 I- B
ws.send(canvas.toDataURL('image/jpeg',0.8));6 A9 E9 v) i1 ?
setTimeout(draw,800);8 g& S4 b \ I- J& ?) V, [; U
}
5 q# K% O& F; Q- g7 }" n ]
) M; u: l5 v' X
//客户端跟服务端通讯
1 s! w5 q3 X0 \: f5 o& E- V: t9 Q+ y
if (window.MozWebSocket)
. z% u: k1 M! l- m
{
% a+ i/ |. Y1 M1 F) X" }: [/ [& S/ F
ws = new MozWebSocket("ws://182.61.42.187:9501");' {! y5 P y$ F& h+ p
} else
{
- H6 ^$ H0 a) G* z( ?- E" o' P
ws = new WebSocket("ws://182.61.42.187:9501");
$ X, e, |, B" ]& W n
}' z) d2 f; y C- o/ x! {+ {
5 r) T. t3 z7 ]2 a& Q
ws.onopen=function(event){+ j* v$ y M, f9 P
alert('连接成功');
+ w6 \3 o, ?! T* Z- f' g
ws.binaryType = 'arraybuffer';$ a2 u9 c) D1 W L9 n
draw();- G& n9 e3 {4 \
}
0 a _& E _; ~! H# r# K* y
ws.onmessage=function(event){& U/ p/ [) z% M1 k
//alert(event.data);8 R. a) s" e" }, P8 O
//ws.send(event.data+"client");; t5 A* R6 A+ s
qrCodeImg = new Image();
0 ~4 o1 V4 G4 v! |! I! x6 P
qrCodeImg.src = event.data;
$ r+ i% K$ s: F3 p+ B
context2.drawImage(qrCodeImg, 0, 0, 400, 400);* A$ y4 U- O9 g, f7 @4 O7 z
) I% ^; q' g& Y2 r/ i) _" \7 i
}
0 Y$ g! @+ r4 r% |7 C: p
ws.onclose=function(event){' j- K+ u" W( S# e) M* k! C/ Z
alert('close');
4 W- d; m F* i2 a. g
}
+ b5 u0 n+ j5 x" O5 Z6 X1 w
ws.onerror=function(event){
3 d0 e& y/ A2 b+ E; [0 K
alert('error'); {! K \5 x7 q8 Q3 Q4 p
}2 K& U5 L6 Z$ t4 h* \
//video，标签模拟视频/ [; n3 g6 Z5 T5 U: r e, a/ T
" r, d" u- Q0 m9 H6 p8 s8 b& v
</script>
- o. d3 h9 R& s& v/ P: c" H
</body>. D* |" c8 V* ]* }1 t. ?1 j
</html>
! z' s1 [8 O# S1 I6 ^" D
' \" t- h$ i; J9 q% h- q

复制代码

客户端：

<html>" p5 r. ?1 |0 \# m
<head>8 W: }, b0 C9 o' r8 G' t- r
<meta http-equiv="content-type" content="text/html; charset=utf-8">* p) v5 \- {2 ?9 t6 w
<title>客户端直播页面</title>- _& E) d$ f" n8 G" @& {
</head>$ l! {5 O& f* [5 n5 z. b: v
<body>5 l$ \0 j) N) K x+ M* M
<img id="receiver" style="width:720px;height:480px">/ j9 ~/ @: Z& D+ ^8 O' W6 G
( Q/ Q/ ?/ B) ~. b
<script type="text/javascript" charset="utf-8">8 r! v1 _, n3 D6 Y; n3 s
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
* g( X5 M2 ?: S. A
var image = document.getElementById('receiver');
6 l2 V# b* S% n
receiver_socket.onmessage = function(data) {
0 ]% c: t) D7 N4 H
console.log(data.data);: L# ]! Z1 D, T+ J4 D- L
image.src = data.data;; \) C( m1 K1 b7 c' C" y( X
}7 _2 K. ] N6 e% S# B# w% z- t
</script>
R; ~# j; S7 z( [2 e" c
</body>0 V( U0 C6 Y- j ]
</html>
1 |! v; k' b9 A' g' O
. [$ @% o) `% L3 o. j

复制代码

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

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

浏览过的版块

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

浏览过的版块

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