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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
% P; i% G) j1 |) ^
$client=array();# y* B: s* ?1 h0 J, \
$serv->on("open",function($serv,$req)use($client){
9 }8 A+ Y1 e, p2 a9 f3 l( D! M
//echo 'connect'.$req->fd;
$ {5 C3 s% K$ c
$client[]=$req;0 S! L1 P% b; ~, S8 f) h. k
//var_dump($client);' V. P7 e4 T8 X/ c
$serv->push($req->fd,'aa');
u! D/ O; P7 |* [: H5 T
});
' v. c. q- h* f, q( K0 c
* [. B, z: m# _" z
$serv->on("message",function($serv,$frame)use ($client){
+ j# U" \: Z, L* J9 \2 T! Y- _
/*var_dump($frame->data);$ y* ]1 l% V' Z
foreach($client as $key =>$val){$ O; g D8 p1 c$ g$ ]
$serv->push($val->fd,'aa');* f i9 ~& G: D" a8 a% C% x
}*/' x9 h8 X0 s& ~9 i6 F8 v, X
$client=$serv->connection_list();
; U9 ?6 K" I0 y* a9 \" [
var_dump($client);
- z% @. D0 A+ n) G
foreach($client as $key =>$val){
if($val!=$frame->fd){
/ }: Q( Y/ D5 F7 j2 H
$serv->push($val,$frame->data);
, j: R2 {+ T9 P r
}# ~% v( E2 u, G
}" u! ?7 W0 L. w ]1 h
1 [0 I9 v$ m2 C! _* B
});
: @( H3 |1 C( q8 i) K) @8 ~0 o% B# z5 P
# e9 {; A* i& v
$serv->on("close",function($serv,$fd){. G7 v# r5 N/ \7 j
echo 'close';* G5 ~8 v# E- t/ X7 Y! T& A* Q
});! H: p- d4 o! D4 u0 O7 o* n
: H5 I2 C3 u1 d) h0 o- g
$serv->start();
]6 _/ V8 s/ m" n7 u5 H
& s9 D3 e5 ~; `

复制代码

主播客户端

<!doctype html>
6 E5 B0 S; z- K* n9 k9 F) Q2 U
<html>
& P0 s/ t; G- `5 }3 D# r% w
<head>( {, L7 S7 e: @$ w, I( y
<meta charset="utf-8">
" s r, v8 A# b2 _
7 t7 X. U6 ~* W* ~$ h+ k
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> u, u) T2 |/ X+ n* T$ |' Q# M0 S! [
<title>404</title>& s$ _1 H9 J; `! S1 W
<style>, f: a$ ]$ V& Q0 A3 G ]& X% y2 _% Z. s
body{
+ b W- t$ s/ P2 U0 d
background-color:#444;
, W. [. @, S8 |, E0 K9 y! M
font-size:14px;& p' @$ [/ P2 t) m K. o
}
* T& [* E. w# i5 o0 G& `* ^
h3{
* X) ^1 B. L/ I" a
font-size:60px;5 o' O0 v& o& G5 z# p P) G
color:#eee;
, ^/ S8 N: ~9 ~) n9 {
text-align:center;
* c" @: }8 J3 l0 S
padding-top:30px;
4 o$ Z( {8 j, g5 ]7 A
font-weight:normal;
5 b a; A* U+ _7 s! ^2 T
}
+ y3 n' i' b' |* Q
</style>
4 E) D! Y( c. {. x7 k) Z
</head>9 e6 I* H5 @6 g: x4 i+ M7 |
- C5 W! M9 U4 F" W# U9 @
<body>
! ]0 k8 u3 t1 `3 g6 g7 s; Y" h4 a
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
2 e: G0 [- j9 k3 }/ ^9 j! @* d
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>3 e* z4 [$ I% Z+ Y3 O/ d! F
<canvas width="400" id="canvas2" height="400" ></canvas>6 T* M* v, M0 _
<script>
9 k2 z7 I* k/ {% m
var video=document.getElementById('video');
$ q# b* D i$ O2 u! `
var canvas=document.getElementById('canvas');3 w: n: Z }# a, |- f
var canvas2=document.getElementById('canvas2');- y. j. P" h- Z- g
var context=canvas.getContext('2d');- y, r9 }0 R% P2 ?. U: M
var context2=canvas2.getContext('2d');
+ |) j% T1 G7 u2 g" z6 X8 U
function draw(){
& l6 m- g0 ?4 v& I
context.drawImage(video,0,0,400,400);
- e' @. R2 n* e, c* `' h8 _
ws.send(canvas.toDataURL('image/jpeg',0.8));
7 B# p1 Z. z8 ?$ A
setTimeout(draw,800);) h" l/ f0 Y4 B6 B
}, E6 G; U6 U1 p$ T
/ `" M) s: m; Y4 U+ |4 A0 x
//客户端跟服务端通讯
9 F3 ^4 a t' f( k3 u- {
if (window.MozWebSocket)4 x: f s1 F( m8 F# a) z
{
' y6 Q( o3 ~; V. G' |: h
ws = new MozWebSocket("ws://182.61.42.187:9501");
+ ]4 c0 `. I+ O+ Z* V8 p% q- L
} else2 d" U- E& {0 m3 [1 E, @- B6 \' `8 L, |
{5 ?4 L G) {2 e
ws = new WebSocket("ws://182.61.42.187:9501");
, k' J$ t9 S" R% q# [% ]* d3 Q
}& b8 E1 U% b- d* I' K! r
4 e. j1 F7 \3 r( f2 O5 l: B
ws.onopen=function(event){
]8 ~/ b& t) E
alert('连接成功');! b) [& Q; V8 w o$ f2 c( {
ws.binaryType = 'arraybuffer';
% X8 G: {5 p$ a8 O
draw();
! {" g0 b: y! g. s' Y) K. h# V& o: m
}- p& U' M! E, l6 V) B. U
ws.onmessage=function(event){% J# {9 _. ]( K. W& X9 M3 \! m) D
//alert(event.data);( Q3 j5 R2 z& Z
//ws.send(event.data+"client");
! |) V; H* T2 i3 S; q
qrCodeImg = new Image();
! D( Y7 ~1 R. v% ?1 V
qrCodeImg.src = event.data;
! O" x9 d9 J4 U# Z8 g/ U/ ^6 Q& o
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
+ x1 V2 P# u8 V* z6 T/ }
6 ?$ s. t$ H3 O0 B
}
5 H) f) z5 y8 ?) S3 P- t8 K
ws.onclose=function(event){
1 M( r2 x) J- q$ G4 j' z
alert('close');
# r3 g4 o# L# x8 U! H( y
}
- G7 P& P) c8 K E
ws.onerror=function(event){8 q: |& D. A( o. l! w ^
alert('error');
% e# s7 G5 @! D; j
}
3 H }% {/ X2 C8 y& _( Y
//video，标签模拟视频% y# k4 U# Z4 p% d
( a7 X+ e% R2 c2 J# {1 X) g
</script>
9 ]6 g J+ o% O4 C6 v
</body>
- _- R `+ i1 B* t5 Q! w3 y
</html>$ a8 f9 ?3 ^% Z7 V3 ^
" f( Z: X/ W+ \

复制代码

客户端：

<html># J% t9 U9 x/ Q' `) t+ `0 Y/ H
<head>% ?8 O H3 B9 {8 V- R( q# |9 C, b! s
<meta http-equiv="content-type" content="text/html; charset=utf-8">
' N1 I4 h3 O/ q) o% m( s, e- C
<title>客户端直播页面</title>: ?8 Z* | W" C( |
</head># r' ?0 }% ~) p8 G
<body>7 o/ Y2 X+ B# @: _! z, U
<img id="receiver" style="width:720px;height:480px">
, I r+ T3 P$ d+ f0 s3 B3 D$ _
6 |8 @3 Q( a' g1 o
<script type="text/javascript" charset="utf-8">
( s$ d, [5 l* q2 `# G
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");8 l H/ j7 h, A; ?
var image = document.getElementById('receiver');
' h& {0 B- L/ A1 ]& G& B
receiver_socket.onmessage = function(data) {; C3 H; S; j0 \- i! S
console.log(data.data);
& {) [% n! m8 j9 y. m
image.src = data.data;
* y, u6 \0 v. i$ o, D
}
5 L2 U2 ^- }- y. ?
</script>
$ P( o" u3 S7 B; m- n
</body>0 t2 X4 Y7 ~( m- l
</html>; a4 \4 J T9 M4 g, e" h
8 H+ g# g% ~$ Y1 r% w5 ]/ M

复制代码

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

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

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