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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);. O8 ^9 ~4 I5 K( a) b
$client=array();
# L* O1 s7 z% G% k1 o/ e4 T3 o9 U
$serv->on("open",function($serv,$req)use($client){. k' J! I( H. ~6 J/ ?
//echo 'connect'.$req->fd;% ^9 ]" i5 Z4 I
$client[]=$req;+ T I( I& `9 \
//var_dump($client);
. n4 Y% l+ g/ g" `7 J' Q
$serv->push($req->fd,'aa');
5 ~: C/ ?$ O- r) n6 s. r! m
});
# y9 S$ E ?, t" y) j
- U' o, G6 b6 B4 Z, u9 _
$serv->on("message",function($serv,$frame)use ($client){
4 H _, k& O0 c1 n
/*var_dump($frame->data);
! z( A/ i, B, ?$ i0 [9 ~1 p- |
foreach($client as $key =>$val){
3 U6 V7 Y0 y, j, w
$serv->push($val->fd,'aa');3 m) t- V5 s$ ^1 O! w2 J3 j
}*/, y8 K. X: M, x, y8 M/ G$ Z
$client=$serv->connection_list();
, }' N, b; O7 b* U& | j
var_dump($client);
% R4 r' i# _$ l
foreach($client as $key =>$val){
2 w5 d/ q. e7 B# Y0 D. s
if($val!=$frame->fd){
# A: ~9 d0 L& s2 @: [
$serv->push($val,$frame->data);
5 K% [/ C% N" u4 l9 L$ j' \
}. s3 R, a. X d4 w1 Y+ y
}
; N3 X; m8 ~- Z+ z* j
% B$ J8 B$ k# ^: X- q6 q
});
$ l: h& v& P; g7 T- w
5 x Z q9 ~. [" K& t3 k" d' L/ ]
$serv->on("close",function($serv,$fd){
4 Z: `- D# S8 e& k, H
echo 'close';
/ y: s# f0 F( C8 B# ?% Y% e o1 e+ M
});
/ Y$ W$ t# K; ]7 m- B
: B& H4 E5 b i% v( E( O# d
$serv->start();8 j+ g7 f4 X, J; l
0 C* }5 ^; i) g9 o& m4 E

复制代码

主播客户端

<!doctype html>9 i S9 Z( ]& K! @3 y* K! u
<html>8 l# z6 K) S" S6 r9 e$ Q' A
<head>
" H3 K+ M% k( f7 s* p
<meta charset="utf-8">2 L7 P6 I) K `( o; ]
! w, d ^1 B: u5 ?9 I+ M: @
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
" N9 S/ d* t9 J
<title>404</title>$ ]2 h7 v+ P& d$ r1 B8 ~
<style>. r+ i n1 D3 w) i( h. X/ {9 z
body{0 N5 Y$ ^/ i$ j) {; W# y
background-color:#444;
0 e' c$ B+ F6 I. E% W5 o! S" |+ d3 n2 `
font-size:14px;/ _" E- h% k x5 y+ O* h* F/ ~7 J
}
" U8 B! F% o }
h3{
; W8 b( Z4 A: X/ E
font-size:60px;7 L8 h3 j; ?* b% \( M5 H
color:#eee; M; D0 Y/ `; u3 ]2 X
text-align:center;
6 O: ?$ _$ v1 L$ Z' r& k6 R6 k
padding-top:30px;7 P+ ^) g9 j/ Z9 S
font-weight:normal;
5 k" h M$ ?) a" t6 w
}8 Y* m0 ~5 q5 [3 r1 a
</style>
: G# O% D2 V0 C, B# I
</head>, b! \7 H( W- X% ]- R* g
( q% h; [/ |3 t0 s
<body>
. H2 U& e4 V5 u1 V' e
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>' I+ r& s( G+ h- i+ K) C: P
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>, N) `5 H6 ~4 e# v! i( l" F0 m- {" I
<canvas width="400" id="canvas2" height="400" ></canvas>
$ m5 E" M5 E. u- \7 H f) w+ J
<script>7 d# h( |9 { E/ S$ c8 C
var video=document.getElementById('video');
) ~9 `% E( @; N; k- i
var canvas=document.getElementById('canvas');0 y; s2 P( g, R" c5 ]' [# n, h
var canvas2=document.getElementById('canvas2');
$ Y. I/ J4 o' E( Y4 I, |9 f
var context=canvas.getContext('2d');( H3 N& y: [- y, W8 F, e
var context2=canvas2.getContext('2d');
& }0 W& T2 u& [$ {1 D) c; ?/ i) x
function draw(){
5 j7 W6 N$ j8 X* o/ }/ Z( [
context.drawImage(video,0,0,400,400);
( s+ I. W3 Z2 ^$ @- _" P
ws.send(canvas.toDataURL('image/jpeg',0.8));
( H2 c5 K5 ^' e, d' v6 r& k# _: G
setTimeout(draw,800);. I; b1 D, u6 r( N
} J* x; T5 T! U9 Y$ `
+ l6 J+ {- D5 v9 m; b" K
//客户端跟服务端通讯5 ^3 y O% s& Y1 j
if (window.MozWebSocket)
6 D; q) O. D4 Y+ j& }
{
$ k* p) Z" W" x8 H1 \: |; \. {. z( X
ws = new MozWebSocket("ws://182.61.42.187:9501");
2 h/ s( G6 f0 W; A
} else' b+ Q: r; C7 p: g* r1 j A. J
{
V# P3 q# z# C! T
ws = new WebSocket("ws://182.61.42.187:9501");. I5 w! Z4 L" e1 x% e
}
0 o; C: Z0 w" V3 ^
9 J# k. E% w3 t3 ?
ws.onopen=function(event){ ?/ X' G# j1 w% x- {
alert('连接成功');
+ `4 T \ C0 P" v0 [1 G6 v
ws.binaryType = 'arraybuffer';
& A% h! Z0 s# f5 X5 F
draw();
) d6 {4 v; X) }% y- m: e
}
( G0 j& O; u$ y" ~, E+ H# e
ws.onmessage=function(event){
: D3 |6 l$ f9 L8 a9 i. h4 V
//alert(event.data);& C/ q+ W1 i9 U- k: R8 c$ W
//ws.send(event.data+"client");* a9 o& {" D4 L" X
qrCodeImg = new Image();8 w" B! Z, V5 H! V5 c
qrCodeImg.src = event.data;# ?7 q' Q/ Y |5 L$ o- \
context2.drawImage(qrCodeImg, 0, 0, 400, 400);/ e, y- }; N- }' X$ L
. v6 J' X- u$ a( Z" m0 C
}
R1 r; s: E- Q) P
ws.onclose=function(event){
) o: q8 a. O; b: v2 j; P3 V
alert('close');
) k0 _( @! `% v& G
}
( C" p( s; m( u3 _6 y
ws.onerror=function(event){9 j4 R; v6 k5 E. t; o& Q- @& g+ @- K
alert('error');% G8 n2 h5 z1 k L& i& G7 _2 f
}
# X9 ~4 W- m k, Z: \+ E* s. Z9 \
//video，标签模拟视频
$ c; O0 q: X t9 \# c+ x( q# C$ {
, \, H7 { ~4 Z# Q G2 U* I
</script>) z' G" R6 Z: n. L
</body>7 e2 d L1 U* @( o' B) m
</html>
4 k& [- w1 l" k4 J6 g& P
. H$ h( M+ U' a1 z) {* C

复制代码

客户端：

<html>
1 e6 G1 g+ W8 a9 U$ q& V W2 s, G
<head>
5 F* p @1 p+ b# C
<meta http-equiv="content-type" content="text/html; charset=utf-8">6 ?3 }- C* |: u& N
<title>客户端直播页面</title>- n: E: C8 ^& [0 H3 K g: L% ] ^
</head>
+ V8 L( `+ E3 z$ p* L' t
<body>
' Y4 a' I) g! b9 j! c5 v" v# n
<img id="receiver" style="width:720px;height:480px">
. ` F- L9 L. b, z
# ?' ^+ [, o$ Y& V" _
<script type="text/javascript" charset="utf-8">
$ o7 ]4 H8 o" m3 [9 i- Y( c
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
# V- _& K# ` C- ]- H6 J; t9 E) W
var image = document.getElementById('receiver');
8 A# _. ], B8 D2 h) ~8 T: C
receiver_socket.onmessage = function(data) {6 D& _: m4 i/ o# p* M3 x
console.log(data.data);) h2 L' e m% [8 |& C5 u4 \- W% c3 \4 I
image.src = data.data;
6 l3 p x7 j. j8 t) F
}
& J9 r& | S" D: N7 M) g1 K
</script>% ^8 H3 W, E: m& N4 H
</body>
% v$ y2 o( j/ M7 q/ B( m
</html>
% @, _0 g! W9 N- l/ ?7 [; R

复制代码

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

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

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