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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
6 P9 g4 q/ r3 m S1 k8 c9 L" f4 h9 o
$client=array();
/ M6 ~! l X8 D9 x
$serv->on("open",function($serv,$req)use($client){
) F& `3 b% V/ p/ i* ^6 I
//echo 'connect'.$req->fd;
, w' Y. F, j5 }& d
$client[]=$req;
* _+ d4 S& K2 e; l5 r
//var_dump($client);) {2 w* M; r/ C. g, I
$serv->push($req->fd,'aa');! y$ H( O. S3 s2 ~( N4 j
});
% B0 C5 ~+ ]. e0 J6 ?7 R& P8 @
. L8 l6 \. {) c, Z( V& e
$serv->on("message",function($serv,$frame)use ($client){
/ Y( X* A( B" B
/*var_dump($frame->data);
- [. T c6 O7 g% M
foreach($client as $key =>$val){; \3 @3 L3 X( f" u
$serv->push($val->fd,'aa');
. M2 u6 ]* F3 C7 c( G* n
}*/
; R- T" E- |: R+ e3 `
$client=$serv->connection_list();
, U5 Q/ l9 F; q: a
var_dump($client);/ D$ z9 p& M2 d' a
foreach($client as $key =>$val){) k/ V/ Q4 O, [- U; W9 p
if($val!=$frame->fd){, v: T, T# ?/ z/ a- b; `5 m
$serv->push($val,$frame->data);' R' `# ~% ^; [% L) c4 I8 |, b
}9 Z, Z2 K% ~) C! |+ z9 V D
}) e6 c$ _ D; f. I* {
# {6 C+ Q1 C$ w# B/ c6 }% l7 y+ [
});, {4 k; @* S- [; u g. I- ]
; h! u- I5 s; R9 V U% S2 C, ~
$serv->on("close",function($serv,$fd){
3 a* v7 i+ f0 c4 Y5 H1 v
echo 'close';
9 }( V' p7 {4 s
});
+ b2 m( D. Z' d% D0 G8 L8 \1 X
9 E/ z6 C" W0 C8 [6 u
$serv->start();* L6 F, ]+ R! y0 ^$ V" n1 d" ?
8 C: ^7 @& i% V1 j

复制代码

主播客户端

<!doctype html>
& M3 w! }/ Q5 z# o
<html>
* q" x2 |( y8 {5 L2 T
<head>
( D- Y+ _- w) o. v1 ~( u6 k/ k0 L0 w
<meta charset="utf-8">
5 v9 o) `7 }* X4 U8 a/ a: V/ h" p
; u5 f4 y( b" N4 I
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
* c/ @! V3 W5 U0 U+ ^/ t
<title>404</title>
1 j6 g9 S1 @( q. N( _
<style>
% |- F. a) m( e; _
body{
( ?/ m! P- U! U' P( S# ` p
background-color:#444;2 y. t1 T1 U+ q/ _
font-size:14px;
+ Q9 H5 _! p# K o
}% o8 v! p; d, n% }7 ]" O
h3{8 P% @, B0 q. }% E m: N5 K
font-size:60px;$ ~5 b: V* |5 V- ]/ Y0 p( Q
color:#eee;9 u& m$ h4 N% p% o x0 H( N
text-align:center;; i. b X) e" i! u+ w: [
padding-top:30px;
; p: y+ I! \+ S! p
font-weight:normal;
/ s4 i2 J" M) Z0 j# a& |0 d
}
* H* I1 J3 N* v% T+ a% k
</style>
# p0 U8 [- c0 m! P& c
</head>2 E, X. p/ ?# H# u! U/ h* l3 F
/ N# I9 h% S5 T1 p
<body>& I* b( Q" L, i* q6 J$ @# t' x5 i" Z
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
2 I8 O. ^$ n) o' ^+ j% E
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
<canvas width="400" id="canvas2" height="400" ></canvas>
+ p) _& V* N4 C4 @2 m9 B
<script>
- H: E0 k6 U# E D8 K" r$ @
var video=document.getElementById('video');! S- y' S" H: ]2 a- I- ?
var canvas=document.getElementById('canvas');# n8 n+ N" Q; K. o: P
var canvas2=document.getElementById('canvas2');
0 P# H) R. Z- G; c
var context=canvas.getContext('2d');
& Y$ c9 `+ g! @; ~! |
var context2=canvas2.getContext('2d');
9 [5 v: ]+ P- `. @$ _1 j7 u
function draw(){
9 Q: L1 Q% n, f8 ]) `7 p b* V( W
context.drawImage(video,0,0,400,400);
( `4 O$ V {, H/ o
ws.send(canvas.toDataURL('image/jpeg',0.8));$ P7 f/ P- z# G3 z
setTimeout(draw,800);2 ^* r# a" m i3 | O$ }
}7 I* O/ b% s# v9 }# t
- o% p6 P' ^, T8 t9 Q5 Q. ?, @
//客户端跟服务端通讯
; P( i- q( p j4 g; j
if (window.MozWebSocket)
- C; ~& |. q9 p; f T2 e& Q+ X2 G5 F
{! O. t: v7 O. S. }/ o. m: E0 j
ws = new MozWebSocket("ws://182.61.42.187:9501");
9 G0 a! n% `' p. E( B3 M
} else' a# H* ~/ z4 r T R
{9 _5 _* I! T. d
ws = new WebSocket("ws://182.61.42.187:9501");$ C! h9 ^, l7 H4 ^+ f, |, v
} ?" g2 O) B% _$ y3 A6 u2 a+ w
! ~5 P V- O- w7 }; r
ws.onopen=function(event){
6 o+ q) s2 k5 S( S. z) T! @
alert('连接成功');9 e! T9 J; A7 }7 \5 ?3 @+ f5 c
ws.binaryType = 'arraybuffer';
9 A: C/ [2 M b' g4 O( E
draw();8 r+ |' O2 @8 ~" U3 w. }
}- z/ }0 I: k8 L9 X$ t- `( P1 q
ws.onmessage=function(event){+ r+ |2 j ?" \3 A$ z. o. I
//alert(event.data);
E5 h: X) D9 {
//ws.send(event.data+"client");) p! k) p b5 W4 {
qrCodeImg = new Image();6 d6 V5 q6 l& N; g* m, D
qrCodeImg.src = event.data;+ p2 y/ p# l# t( n
context2.drawImage(qrCodeImg, 0, 0, 400, 400);! e; [+ M9 L7 |% u
: E! |! K8 n4 A9 h
}
$ F0 g s6 G+ l: w2 M4 f9 G2 {
ws.onclose=function(event){* E# Y& x8 O- \6 ^+ n
alert('close');
. C/ R/ t! x7 k& ^) k
}
) o% Q$ B1 ~& H/ x' L3 u
ws.onerror=function(event){5 Y, u8 g7 R8 C
alert('error');) H. n% @# X4 k9 x+ r I4 y
}- P/ a2 Q; G) Z e0 C1 Y2 n
//video，标签模拟视频9 \$ B$ n7 N' E. C8 _; p
) j, e! }6 w1 z- N+ ]2 k% v
</script>
t1 |8 p5 [% ?, d7 C5 d
</body>9 a; N' Z. y2 c1 f8 o* u
</html>
% b& n* t7 w. u. @+ [% c" H
8 r6 U. P4 m$ `# D. F" z

复制代码

客户端：

<html>" e; K/ k3 o( N4 n
<head>
0 G. U7 [" r$ |& y& e# ^
<meta http-equiv="content-type" content="text/html; charset=utf-8">
$ `8 L% S" b9 @
<title>客户端直播页面</title>
" B' t3 C$ k( ]6 V+ N
</head>
8 ]: [8 p5 p9 B( M; ~
<body>
$ t. J; v: ^# n8 p
<img id="receiver" style="width:720px;height:480px">
( l0 e0 c" p' v; \" R( |# m
& Q5 y; p d$ V
<script type="text/javascript" charset="utf-8">
! F% w5 [( T# F$ }+ C3 M
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");: [& W7 |7 o* x0 Q
var image = document.getElementById('receiver');
# Z- y9 i; w3 ]) U& A7 ~
receiver_socket.onmessage = function(data) {
& p) k' Q- }4 `" \! g# R* q; {8 y
console.log(data.data);
& c5 O6 r) ~% I1 B! P" A
image.src = data.data;
, E9 M1 V1 i; H
}
1 g' l3 |. o: C# f6 L& K' o1 u
</script>
; z) \% {+ G0 Y5 X/ n
</body>
; e' W3 n! M6 L7 g( M7 p
</html>
w! `3 P( s+ Y5 A2 Q9 s
7 e# b, s6 q! d! o/ k4 \

复制代码

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

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

浏览过的版块

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

浏览过的版块

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