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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);+ V! Q7 Y) w' U* W0 I; ^
$client=array();: G8 O: m3 ~% B( v. e' D2 I
$serv->on("open",function($serv,$req)use($client){, z6 x7 ^( r# g0 K4 f9 X
//echo 'connect'.$req->fd;; B. K; N9 ~3 {0 {
$client[]=$req;
3 J" M0 B: ]% O$ U/ B# o
//var_dump($client);6 Y. n6 r5 c' W
$serv->push($req->fd,'aa');
- l, @& [" N+ M. R* u' z& h
});9 {& g; i( H7 t2 Q9 _5 k
% T- o( X7 J8 p A; R6 H
$serv->on("message",function($serv,$frame)use ($client){
, w) Q) K: j Q) w8 G+ o- p
/*var_dump($frame->data);. c: ^ o* l* M
foreach($client as $key =>$val){
5 ]& l, q3 K0 s! f! r; b
$serv->push($val->fd,'aa');1 f3 I0 k9 y/ k- J7 k2 s& |
}*/# }7 I8 D( r' V$ m" S* K5 S
$client=$serv->connection_list();
* h t: J7 K: ~
var_dump($client);
! N D! ^1 t! `. B( n
foreach($client as $key =>$val){
( a! p+ ?) [( `' h: {5 Y
if($val!=$frame->fd){0 X; K+ Y, W+ t, n
$serv->push($val,$frame->data);
" N. |+ }7 l" c) C `6 u5 R
}
2 `2 u3 Q8 r$ l: t' \
}" \7 B1 g w/ _: r9 g+ P
+ i; B2 }) x& ~: i" k' L5 P8 a
});
, }. n2 |( N) \( d7 P
$ ]" s1 J; X- ?
$serv->on("close",function($serv,$fd){
3 X/ u2 |: n' L/ ^% W/ M8 V
echo 'close';
& E# j L( f8 I1 b* N" ?
});9 g; U; q! ?4 Q) S$ Y: E( X, y
2 ], D9 _' \5 F6 ]( n! o: `/ D4 ^
$serv->start();
; |! f* H+ r( W# D. B5 I6 d
" \: L* X: _, r. D6 }" v

复制代码

主播客户端

<!doctype html>
2 W9 B+ c! B* t0 H
<html>4 ], \1 S4 o1 Y* n b2 J K
<head>
$ O* V$ Y. s* Y2 T q( I8 t$ Q
<meta charset="utf-8">9 d a+ j6 m5 B# P. d
8 K4 Y7 e- N3 Q, S- W4 E
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
' G$ E# V& a( j, E4 I0 s
<title>404</title>
. w' b/ f: E& Q# F) m/ M
<style>
/ R4 L- f. H5 l G" V( R* h
body{
0 o6 d1 k& X/ r
background-color:#444;+ j9 `5 `+ e: x0 |' \3 _ j* h
font-size:14px;
- {) u: Q# `* ~7 J
}
, F1 [* r# r5 ^9 ^: C8 O5 U
h3{
B- }5 d4 N3 E, L4 j
font-size:60px;/ y* E z: F' }) h
color:#eee;$ a( w( z1 N6 v+ @* o
text-align:center;0 k9 ~, r+ z/ e, o# M P8 J& _" d
padding-top:30px; m, Z% F9 _+ ]! ^# b8 A; Y. _/ ^3 `
font-weight:normal;5 a" ?$ N4 [# V) X7 h
}
$ r* R. q, Q0 G0 b7 f
</style>
5 m- s" e# A7 c) ~+ e. Q
</head>) {6 \5 H! W& P' d
: [6 y3 ~1 O5 t# m8 l' w
<body>1 D% ? k0 M3 Z. d+ ?7 J- h/ G5 C5 G8 ~
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>1 N, [" a% @/ v. b& E% n+ b
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>( ~ m7 `3 Y' z1 o5 J
<canvas width="400" id="canvas2" height="400" ></canvas>0 `8 J1 Q* v2 H& }9 A7 C$ W
<script>: _6 p" b# s% V0 R% K
var video=document.getElementById('video');6 b5 e: c! R, y B4 r+ B8 p/ G q5 U
var canvas=document.getElementById('canvas');
0 g" Q; }$ N! N( [) ]+ D" @! `
var canvas2=document.getElementById('canvas2');% E3 O% g: {3 b7 W4 B
var context=canvas.getContext('2d');: ]8 D( V% O& N5 Y
var context2=canvas2.getContext('2d');
; H; L3 w' O8 g$ y$ v% V
function draw(){ W/ {. D& B/ o8 r' l, d
context.drawImage(video,0,0,400,400);8 j* w$ Y7 W% V
ws.send(canvas.toDataURL('image/jpeg',0.8));
: j: t/ F' N) o. _5 _: E
setTimeout(draw,800);7 v' s. Q5 n! q1 ?6 z
}% W+ A0 [) i, a
4 s( y1 D6 h# @
//客户端跟服务端通讯
" `+ g! y8 x* c$ |8 E
if (window.MozWebSocket)
) J5 q$ B; }3 J# T0 L5 H6 ]
{
' Z+ P; E9 K Q4 K# }
ws = new MozWebSocket("ws://182.61.42.187:9501");
+ o6 u: N% ]/ }% `' ^2 }4 u! O# J( a7 r
} else1 \4 r+ [9 \) f" D" M! x) A
{8 A9 `3 |7 M I6 N. t* }& j* x# s' J5 r
ws = new WebSocket("ws://182.61.42.187:9501");
2 J3 n, p9 O; L1 ?0 ~
}
+ I% P6 H2 l4 S3 V, x: e+ F
; a, ~* t. O1 Y: E; X3 E
ws.onopen=function(event){9 H3 c `: D' a( ~3 }0 w S
alert('连接成功');
8 t8 Z2 }# E7 \, |0 h/ D
ws.binaryType = 'arraybuffer'; ^1 G/ F( Y. Q9 b% w" U7 k
draw();
( v4 I3 Y, K* p, f+ v! z* U5 v
} b% w( T9 k% b, ]2 q: N
ws.onmessage=function(event){8 D0 |0 q9 t) { T1 c5 i
//alert(event.data);
8 @& L7 e" v) L
//ws.send(event.data+"client");
8 |! W8 X/ C$ y. Q; t* s2 ^
qrCodeImg = new Image();
6 j! H5 K# S) ?0 K" t
qrCodeImg.src = event.data;" m( Q8 L+ ?3 J& o
context2.drawImage(qrCodeImg, 0, 0, 400, 400);) H) s5 e* {! V: }$ Q- p
% z! d9 i$ F8 p" e: k
}
" L# P X- F& {2 D4 ?6 w* a
ws.onclose=function(event){
N! [, x! ?; s' q. Q* v
alert('close');
6 L X A* s/ [
}
- J5 r/ P' g9 R& l1 `( f2 o% Z0 s( h
ws.onerror=function(event){
& ` ?. i+ E' B; w) ~ Z
alert('error');" m' t- _; g y3 ?% D
}% V- z% I! C1 Y: Z; b7 _( ^& Z
//video，标签模拟视频
6 [% N% c9 G( G2 v$ |
/ j3 S, d, M1 s% l8 z+ n0 n
</script>
% Q& ~8 q( J) G* ]0 E( D
</body>
: ~1 V, d5 M: m. f; I( C; g/ Z
</html>6 t" a# d! y+ ~. x
: s5 F0 f# P$ f6 S+ M3 v) O

复制代码

客户端：

<html>
; L N# o* Y7 S' _+ \
<head> m0 c ]7 ~4 @
<meta http-equiv="content-type" content="text/html; charset=utf-8">
! C c4 i+ e+ g x& K+ I
<title>客户端直播页面</title>8 T* k% h8 v! {, Y6 {* K/ Z
</head>
0 }6 o8 a3 ?: p4 I
<body># }8 w! h4 P( R! M; `! Q! q
<img id="receiver" style="width:720px;height:480px">0 Y# a, ?3 ]* X! G( s
$ L7 o7 H g1 Z3 y2 s) Z# v+ W
<script type="text/javascript" charset="utf-8">
" x2 q. {0 ~* e! v. G8 J
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");; {5 \4 }9 h9 j
var image = document.getElementById('receiver');
" b5 a! S) m. p2 H
receiver_socket.onmessage = function(data) {
% Y% \, ^/ K2 L
console.log(data.data);, B# O* E' G6 ^1 F3 v
image.src = data.data;4 P# T" i' e A' y0 |% t
}9 z& M0 C1 U/ b4 T
</script>
" `3 s- }, M9 ?- N0 B; D8 l
</body>
6 s% b/ H& f& F3 C4 E
</html>
2 b; C! i% l4 B( g% l- J) V* }
3 X s1 s& W* Y7 D# x. [6 `- w

复制代码

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

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

浏览过的版块

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

浏览过的版块

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