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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
% b! C2 k" O/ X
$client=array();
8 D6 W# ~" t' h) d% W
$serv->on("open",function($serv,$req)use($client){
3 w/ E9 x! |: R7 |4 m
//echo 'connect'.$req->fd;
; @1 T0 X) [4 b: g ]3 {( h
$client[]=$req;
8 v; o7 ], h# m6 o+ b. x
//var_dump($client);
" M- \# G: E2 U* H% ]% W k b
$serv->push($req->fd,'aa');- }: K/ q# _& H7 D
});% {" A- Q9 J4 {* H
H% A) `4 I: A6 a
$serv->on("message",function($serv,$frame)use ($client){
* ^( c1 I; Y6 {7 \1 Z
/*var_dump($frame->data);! z4 t5 [' D7 f2 ? Y* }9 {: W9 j, j/ e
foreach($client as $key =>$val){
5 J/ L0 \- T3 `' G# ^' Z
$serv->push($val->fd,'aa');, L7 Q G- O6 y
}*/1 e+ u) l) x: R3 }" `2 ?& [: }
$client=$serv->connection_list();' X) Y! p$ i% O) f7 G: s
var_dump($client);1 \3 d- q3 F1 X# `- m
foreach($client as $key =>$val){
if($val!=$frame->fd){
5 {; z0 U' N1 Q* q
$serv->push($val,$frame->data);' t E9 v8 X* ^' e2 j0 Z
}
- F; j' C# d' y8 B" |1 w; F' n
}
9 r) Y) W0 H1 |: q' S9 C+ P+ U
4 G8 @( l& ~5 f% c& S
});
+ ~' w1 ^6 N1 S) I* B9 @
! ]" A' n" j6 G, Y$ a
$serv->on("close",function($serv,$fd){
x0 ?% ]* Y& T+ f) K, \
echo 'close';
6 S# L- j; y7 ~7 f0 O3 Z
});
( x3 A) Z" S6 d' a# R* N4 U9 i8 t' b
7 s. o8 c, }) P, U: G+ e9 g
$serv->start();
: C8 Q! b6 Y. ]! {8 S: T' G+ v9 M
$ E8 h( H* L7 o- Q

复制代码

主播客户端

<!doctype html>
7 C3 u8 D6 m9 ^, M
<html>
: x) ^0 f1 ?( n" z7 q6 W
<head>1 Y2 @' n9 _) y$ U2 O( r
<meta charset="utf-8">
, e x" Y- E! X! L+ f4 M
$ g( J1 y* l& l# o
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">6 m5 F) y- E- b9 \; _+ @' @: F% l
<title>404</title>6 `. g: ?- s& o4 O6 b; w
<style>$ R* e7 g9 s. B; r4 i& r
body{0 V& X* {3 y& U F
background-color:#444;) O" \! } J- P% e
font-size:14px;) f" y C1 `' E
}( |+ g: n+ t( Y1 Z6 J" W* A6 r/ V! @' {
h3{& @, C: Q4 H" d7 \ L
font-size:60px; O/ G' _. @' }2 T
color:#eee;% {, r ` M& W' j
text-align:center;4 w7 a, y" p9 _* H# M+ B/ g$ |
padding-top:30px;
' v( s6 F" T7 k$ `5 M. r
font-weight:normal; N/ S6 ~1 ]2 H0 J
}
9 q- [, ]2 i) k0 ?& y! l7 y
</style>! U) M) S7 K# q" t, A' K! T
</head>
+ h& {. b. o( f5 {
4 s. g* L i8 ^9 r
<body>
& _& j, o$ Q5 I3 M
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
, y4 ^6 g/ [3 \
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
8 j, {" |# m& e1 n# L: @
<canvas width="400" id="canvas2" height="400" ></canvas>
& j% Z" Z1 `3 M/ S/ ~$ v6 S! z. z. i- M
<script>
j, K6 ?0 W/ d6 S
var video=document.getElementById('video');
! v: A% L5 p5 b( M
var canvas=document.getElementById('canvas');+ J& z3 P. R, x8 K: M+ W
var canvas2=document.getElementById('canvas2');
) X$ ~0 ^0 N/ ~; I0 e8 l3 \
var context=canvas.getContext('2d');
9 U1 b) O0 f" q( b% c' x
var context2=canvas2.getContext('2d');
- u0 s2 w& `# }5 s. \/ v
function draw(){
# y, }; d) T$ E- x3 P( l/ G! l' o
context.drawImage(video,0,0,400,400);$ N) Q- \+ }1 W& E, i
ws.send(canvas.toDataURL('image/jpeg',0.8));, K0 M9 k/ s3 d! i5 l8 X9 s
setTimeout(draw,800);
4 Z3 k. t- x; D7 T2 [
}* e. m7 b, P* Z- u
/ E( a* }. y' g
//客户端跟服务端通讯
# H% y2 m9 y$ d- v g n4 _
if (window.MozWebSocket)
, h' Z8 X& o$ Y7 i0 V' f) z
{5 V/ a, _. g* c7 @7 ^% f
ws = new MozWebSocket("ws://182.61.42.187:9501");: ]- }8 i' j9 U4 ~( t2 B
} else
3 @6 k/ U) Z' m" o3 m% `' w E
{
" |# e2 V8 Z) C# _ S
ws = new WebSocket("ws://182.61.42.187:9501");4 X" }9 C# Q7 ^4 C- E! t' S! m2 k
}
6 G; ^: O5 j4 J5 ^" N# S# D+ f
4 y' U- C8 l! @1 f/ W/ f/ H
ws.onopen=function(event){& G1 u: \) Y5 _! N4 g
alert('连接成功');0 p% u- D- G- f6 D; ~4 l) I
ws.binaryType = 'arraybuffer';
# k7 g9 ]- l/ f" T: H4 T
draw();
7 ~" d, ?* L' R
}
" x5 h3 i# F1 y* Q1 I9 B. Q
ws.onmessage=function(event){# D4 m! |( k, U8 t9 ?
//alert(event.data);0 R3 }3 r1 l7 K. R# w
//ws.send(event.data+"client");- U% a9 q0 c% l T( [9 u. }- N
qrCodeImg = new Image();
+ a' {* h# L5 f# j" d) n
qrCodeImg.src = event.data;* K5 Y6 A$ B% z) M' }0 Y% o
context2.drawImage(qrCodeImg, 0, 0, 400, 400);/ }( t& f% ~, g8 l$ V) i
k# E0 f- h8 ^0 D! H8 s
}2 e2 a0 m) \4 _" O" \
ws.onclose=function(event){
# Q1 Z" t0 M6 n
alert('close');8 b# w( U# K' m
}
1 a+ F% g8 H) B) p& F
ws.onerror=function(event){6 Z8 l1 E" R' n2 } h! H, J
alert('error');
; T# |. ^5 a6 V2 J
}
8 [# |7 v+ C' v' v1 |, M. T
//video，标签模拟视频7 v/ b/ b$ s# w I6 ~3 |9 u! c
! u: s1 B8 f2 B: R! m
</script>
/ S/ M$ Z2 l+ S5 `% `3 U
</body>, c0 M* u+ |/ q$ m# x5 S7 [3 \$ z
</html>) \" Y$ A& u1 m3 U
( K0 Y3 I5 [0 L. V& S

复制代码

客户端：

<html>1 A0 d$ N2 R3 @$ x0 i- q9 P) h
<head>
. s' q5 b/ O5 G- y5 n9 R
<meta http-equiv="content-type" content="text/html; charset=utf-8">. z0 e& L8 X9 J, Z6 E' i
<title>客户端直播页面</title>0 t( x# q, O9 I: j% C
</head>
Z P, g/ h& ]3 H* C
<body>9 m6 ~" p a# B7 K# B6 d6 L
<img id="receiver" style="width:720px;height:480px">
* C9 z Y6 ~4 B
% l7 u1 u' w1 S* r# n9 m
<script type="text/javascript" charset="utf-8">4 ? w4 ]+ ^, k7 q0 d+ I1 I+ {
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");2 x' U/ y5 A' Y+ W: k8 y a
var image = document.getElementById('receiver'); t9 v$ E& J! U( C5 e
receiver_socket.onmessage = function(data) {
6 w1 [& R; A/ k
console.log(data.data);8 [$ l3 O9 d) u! w
image.src = data.data;
+ m, a' ^ Y7 [5 {6 X. ~8 ^
}0 I: p2 C" L$ X' D2 u
</script>3 m3 x& k3 E" ~1 E5 d
</body>
. R9 I5 Y ?$ h/ y- j
</html>
7 O& |$ h" z: A+ e, @% f1 o
& u6 ~' ^7 F# x0 z; y9 D" o8 a

复制代码

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

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

浏览过的版块

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

浏览过的版块

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