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

发布者: admin | 发布时间: 2020-3-29 18:53| 查看数: 9311| 评论数: 0|帖子模式

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);& W2 Q+ A% S/ N" K3 G- S
$client=array();
1 }; E5 }# Z3 k1 H8 T
$serv->on("open",function($serv,$req)use($client){' f: z- s# B1 G/ a' C
//echo 'connect'.$req->fd;6 X" R( `' h' a
$client[]=$req;
5 d. r+ q; \" v! C! ]4 n g7 Q
//var_dump($client);4 X6 X A& ?1 N! k7 f+ k
$serv->push($req->fd,'aa');
1 n( Q8 A$ w5 g
});
8 f. V9 C5 D; @5 z2 Y/ U
~" k& J2 }6 C, O
$serv->on("message",function($serv,$frame)use ($client){
% j$ H1 l' |8 W% M- t, g& J
/*var_dump($frame->data);
8 o- X, k6 _6 H
foreach($client as $key =>$val){/ I, _" t' K1 R
$serv->push($val->fd,'aa');! Q2 n4 \: n" B8 u3 S+ N1 Q
}*/
: f7 L! u/ H, H0 [' Z' p' m
$client=$serv->connection_list();$ T6 v2 m/ Q. @6 {) @. T u
var_dump($client);4 @3 D! N. X- T
foreach($client as $key =>$val){
* ?- u$ T+ r' b M7 z
if($val!=$frame->fd){- n( z9 C! Z3 C6 o( O- H- f* @# ^" e
$serv->push($val,$frame->data);
/ x5 H7 ~. F' l% J8 N. ~$ N1 A+ T2 [
}
, C7 i0 z8 {" g" }" X
}
- Y; S* g% }" Q. U5 S) I+ n
' f4 b/ @7 s& E& V9 o
});+ n9 i- g* P* Y' Q
/ f- ~7 ^8 Z# V5 n" _4 S
$serv->on("close",function($serv,$fd){1 f2 t+ s0 ?8 R5 k
echo 'close';
# L ^' n. U5 c6 K- H1 @0 U
});
6 j8 ]2 r3 s" y) f$ u
2 v; ~ s# s% _
$serv->start();
8 C% y* e% L. Q/ K' P3 U
7 y! c( ]3 o" z

复制代码

主播客户端

<!doctype html>
8 t, w+ t4 L. A0 F0 ?0 B( _2 |
<html>
. L, ^- u) j9 |* @! P
<head>
6 o9 C$ E, t6 t# }" W t
<meta charset="utf-8">
% ?7 }6 Y7 B# e6 J+ b: e# O
* p8 X$ T" Y; A
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">- v. |( F3 J* @9 R1 ~+ ]. E4 D
<title>404</title>, B; z$ K' ]7 ?. J& ^4 Y" O% C2 h9 ]
<style>- g$ ]) P& h9 F$ m. G; C5 \5 o
body{
0 I( v5 C- _! ~& V5 o+ a, A# k
background-color:#444;
& D' I+ C$ D1 w! ^$ {0 T4 @. H+ i
font-size:14px;
# A+ Z8 b" k, `" I2 P. |
}4 \2 s2 k+ o2 Z
h3{
" C8 y1 a: s2 U1 w$ z# p! {* e
font-size:60px;% f J3 ~6 ~, T' I: Z
color:#eee;
4 S2 C1 ]# T0 O: {; S( T
text-align:center;1 w4 c0 I" E* C; V0 C
padding-top:30px;% A. {8 W9 s: R
font-weight:normal;9 w# b/ T: p; j
}
2 u; G* {+ {% k1 I# Y a
</style> J9 L: n' T* F1 m
</head>
, T3 [$ R' N# D: J/ v3 r9 n$ {
. `* b% E) g: u w3 X! i/ m6 w
<body>' s% q9 W d- }( x2 R
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
+ F' H# t* q- W$ g9 c% z0 H; p
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
* F+ f' u C( V( M/ C( L
<canvas width="400" id="canvas2" height="400" ></canvas>0 A0 Z' `; G* s* Z2 e
<script>( D) [- X- P$ x
var video=document.getElementById('video');
( B. e& ^5 ^6 F; Z- Z
var canvas=document.getElementById('canvas');
7 U. Y; r/ o ?5 b
var canvas2=document.getElementById('canvas2');0 N- {0 l6 ?- n
var context=canvas.getContext('2d');
% Y5 u5 b' Q8 b2 p% R/ F
var context2=canvas2.getContext('2d');, Y2 w) f3 ^9 [9 \1 `, D
function draw(){
2 ?2 T3 n5 a, d
context.drawImage(video,0,0,400,400);
/ i* e Q7 S. x# q9 n; {
ws.send(canvas.toDataURL('image/jpeg',0.8));
# j e" M: `/ x2 M$ l. k x
setTimeout(draw,800);
4 E* H5 N+ t- z3 W: q! P
}& n* Y! `. ?( }$ I3 c$ L; i
$ q7 t7 y q( m% G2 B2 Y' ~8 \
//客户端跟服务端通讯 f2 ^" _* I; m. x2 T
if (window.MozWebSocket)
' q, O, v. _ p- Q8 i
{2 V' ^ M2 k w
ws = new MozWebSocket("ws://182.61.42.187:9501");, G; _+ B& x+ f6 ^; P
} else
+ j1 |4 ~3 D9 E( e
{' V4 @9 f9 h3 Q2 I
ws = new WebSocket("ws://182.61.42.187:9501");3 d2 y" s$ W" h7 F$ [
}
1 n2 C/ \2 |+ e# ~
5 |& l& Q E$ a3 O! Q4 T b& U
ws.onopen=function(event){
3 |% j9 z, S1 ?9 n" v9 P/ \9 d' s
alert('连接成功');
, o7 W3 }' B d+ W8 J- Z
ws.binaryType = 'arraybuffer';: C# X) o9 l( }% V
draw();
8 ^1 Q/ O7 s4 W8 V
}" t) y1 p6 t! k
ws.onmessage=function(event){
/ g' G! J' w# x! h3 y7 |# {% P
//alert(event.data);
0 _7 U' F ^( b8 X7 J y* V
//ws.send(event.data+"client");6 M% J6 t1 p2 g$ o
qrCodeImg = new Image();1 g* w3 p- `) s+ |8 U# p
qrCodeImg.src = event.data;
( s% R0 i2 B6 N
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
6 N3 z/ ^6 i- d% O9 I- [ O! g
! K9 F4 x: }, b/ k/ Q' X3 y2 p
}$ ]7 G, |! ]7 U/ z
ws.onclose=function(event){
5 w/ \; l* a% K6 K+ i# `
alert('close');
4 t1 i( [/ K) ]" B: ?
}
. W: N3 q1 H8 C
ws.onerror=function(event){- \; W0 I7 d, Q- p3 \
alert('error');# d1 h8 M/ {* j/ u+ j [+ o% m& W
}
) a: u$ J+ W: R( C v1 ^; ~. x
//video，标签模拟视频" P. \% z6 M2 W" G
& W; u" j6 u# N1 G0 Z
</script>, Y5 r% _, m. K/ G& s3 g9 i
</body>
: ^ ~( A) f: _3 B- g
</html>
( {/ a8 D. g+ B% Y) w# O
& h7 @; v+ w1 w! n3 u; o0 s) h

复制代码

客户端：

<html>
( U$ k+ D+ [+ g ?
<head>
, s+ i Y7 u- l: o2 ]7 `7 ]
<meta http-equiv="content-type" content="text/html; charset=utf-8">1 L% _$ ^, X/ y5 m+ O, |# _
<title>客户端直播页面</title>
/ k. T' ^# h8 M0 _$ J [
</head>7 P9 m! G2 C( S8 R1 o! T' y; J
<body>2 Z: X$ J7 ]2 i8 Z9 ]
<img id="receiver" style="width:720px;height:480px">
1 o6 x! `7 j+ |. o9 u7 g1 G
( P/ D0 z# \7 s
<script type="text/javascript" charset="utf-8">
/ E7 x2 |9 l) R' I' |4 U- H7 D
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
, G3 a# s3 y; B l7 p
var image = document.getElementById('receiver');/ C% j, ]+ b3 L( `+ V
receiver_socket.onmessage = function(data) {, g+ O% n) U6 ]0 k/ p X
console.log(data.data);8 r' @" |; l1 W+ m5 y' q
image.src = data.data;) t# a9 A. [# L
}
8 @3 t9 p" h4 V! y6 o8 F+ [) @" f ~
</script>
y& f8 Q+ A* D; O
</body>
+ O7 o& |2 b! V1 K. I7 g
</html>7 @/ K# k0 z- p; y1 w" O2 y
! N# R$ P' ^1 R( y$ R! {

复制代码

分享0 收藏0 支持0 反对0

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

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

最新评论

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