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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
: F5 M. ~/ c$ q2 e1 V$ l2 E
$client=array();! p3 x2 D& z! k1 M5 t( Q! Q
$serv->on("open",function($serv,$req)use($client){
% u- \3 i5 \4 }# a
//echo 'connect'.$req->fd;
/ ?8 r: G5 |* K# o& @7 R
$client[]=$req;
S. p; z& y8 {' W4 A( V$ @& v
//var_dump($client);
& O/ i/ m3 i; D2 H! j
$serv->push($req->fd,'aa');+ }6 A2 l# D2 V# g( q
});
' ?* P& i2 x7 j2 M. x8 W$ y
6 F* c& T8 f9 ~
$serv->on("message",function($serv,$frame)use ($client){1 H! Q' N4 F5 O7 j( a
/*var_dump($frame->data);9 k6 M( [. c6 k; o* R3 d' {
foreach($client as $key =>$val){
3 q# ^3 W" [3 S6 g+ G
$serv->push($val->fd,'aa');0 S9 q$ [* Y8 H
}*/
: d, Y+ r$ c) \
$client=$serv->connection_list();
" E: h2 d+ ~, S2 _( E$ U& f& r
var_dump($client);5 U; E T: j3 m; r( U; Y% W' _
foreach($client as $key =>$val){
" c' M; K: d4 U& p- M7 }
if($val!=$frame->fd){
$ \- Z# c& A# R, H* h* e( j8 a
$serv->push($val,$frame->data);+ ^- {2 `9 z" b4 G' L+ I
}
1 Q1 p3 n& n6 n
}
$ ~5 k2 T3 L) n
3 c+ N( @! I; l* x# i K& R0 m: G
});
* e6 Q$ |$ u- R. D5 N$ b
7 s( A% @) E$ l6 E: z
$serv->on("close",function($serv,$fd){2 j7 A* Q+ |& A1 m/ H! i: E
echo 'close';$ M: [% O8 }. `! \
});
9 A! q! Q4 }* I9 j s" K
- ]0 R$ I! f$ X' O- S# g! S7 ?
$serv->start();8 l4 O; P, H$ T3 M) K8 i% @# K; W4 s2 w
' C; b. H9 F+ x0 C$ H8 r

复制代码

主播客户端

<!doctype html>4 r- a+ O6 M; ^% Z
<html>
% t* z; h# k* K$ \
<head>
. S2 u2 N( [ K
<meta charset="utf-8">9 o0 F8 s1 G2 y' r2 q( x0 ^
+ q D$ `8 @- r! C
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">7 L- @% ^7 N8 I8 g+ V
<title>404</title># X/ K+ p) c1 O' ]6 ]( N
<style>
/ F9 \. G& a6 `+ m8 Z+ X
body{+ A7 A- w: |! m; k& @. ^
background-color:#444;
* n& X" H# j2 ^! q' C
font-size:14px;) q& K e7 W7 g2 L& c' b. y+ ^7 ?6 [
}
- N4 n9 j- K6 E+ R5 ^: |2 v
h3{
7 J5 H) U: U. ~4 W0 y! S4 w
font-size:60px;2 W2 R& n8 `. e! r9 n, H( \
color:#eee;1 e. @) Z; b V
text-align:center;
" o% J+ z8 w2 j
padding-top:30px;+ G+ V6 m6 n) A! u( L8 k' K
font-weight:normal;$ m: A7 }3 _+ o# d* O9 ^2 k" Z( ]) L% M
}
$ h! n9 C: |: J1 d1 m
</style>: _# [! ^' M; F1 N# @8 T
</head># {7 v& a* w! |: M
1 ~& Z+ | _1 g/ L9 x
<body>5 x; q e Y/ @* Y
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
7 G* r5 j0 @* z* d, g
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>' s" R9 l! f. L- H
<canvas width="400" id="canvas2" height="400" ></canvas>- o4 v. T7 ^ G3 ~+ C
<script>, W2 H" j8 u, F3 l. a8 {
var video=document.getElementById('video');* g- D! P4 l8 d8 q
var canvas=document.getElementById('canvas');
; v c5 E+ \. q: k7 p2 }* v! M
var canvas2=document.getElementById('canvas2');( a2 |! o) z4 {4 w' N
var context=canvas.getContext('2d');
3 l9 h9 v" L" K0 c
var context2=canvas2.getContext('2d');
% ~) Q* f- |0 @
function draw(){1 L$ u! e/ _/ x* ]; S) n, R4 w0 x) l
context.drawImage(video,0,0,400,400);
( U& m! q" p9 [0 c* z
ws.send(canvas.toDataURL('image/jpeg',0.8));
% H, k6 v1 d `$ S* C3 M* Z
setTimeout(draw,800);
1 q* D) T! X$ w! J0 x
}0 r6 A: S5 c1 y# | h7 J" X
2 Z( e& P L- F" \' D" o, ^5 H. I% Z
//客户端跟服务端通讯5 [' g; a" Z, [+ t
if (window.MozWebSocket)
8 A2 Z3 \# p+ K, ]/ z" t0 v* `
{* M2 Y) H- x6 X. Y
ws = new MozWebSocket("ws://182.61.42.187:9501");, Q( X. C. ~/ I8 E' K6 M( y
} else6 ?5 b- D! J8 k& O* T, B
{
T- O* N: ^* R+ U! ~" B0 v. Y& g) M
ws = new WebSocket("ws://182.61.42.187:9501");
4 e+ Q: V) N9 I2 ^6 M& T1 v; `
}. D8 K7 j6 I& \2 w7 l
+ ]# k$ q" J4 }
ws.onopen=function(event){- U1 \. [) N9 {5 S# e- a- Z0 K
alert('连接成功');0 j0 R* _$ X# r' p7 i4 j5 O4 J' n% G
ws.binaryType = 'arraybuffer';, A: d: D9 P. N' B7 U- e9 C( @6 `4 u5 J
draw();5 @# C: r- z# [
}2 M& J1 ^' H- x$ g4 y; z
ws.onmessage=function(event){: [; }( j! I3 X- r' I
//alert(event.data);
- }- @0 k. h. p+ D R# y# Y- I
//ws.send(event.data+"client");9 \1 e' |# `, |% j: X, W M* ^- Y+ K/ C
qrCodeImg = new Image();
; k, E6 o/ D# i: I6 P6 E
qrCodeImg.src = event.data;
5 v5 _' s. }: w& @ V" s' G) j; ~
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
+ l7 s* {( i: S8 Y. l6 n! l
( E2 ~% W9 V) y: D6 j- w4 q
}
: |: _0 N, v: x, k1 _7 n. F9 X8 g0 Y( y
ws.onclose=function(event){% O# w& M- S1 C1 M
alert('close');
# F8 N( L2 o/ z0 a
}- j- k+ N- Y4 `5 j2 o, {
ws.onerror=function(event){
( `1 S7 \; O: O5 f3 \
alert('error');8 K2 w' j% l! L- m! c6 [" e
}
- V( Z: {! q+ W: `7 p) l- y
//video，标签模拟视频
# S7 V; i, ?' P3 j
. C% D! v! L8 w: Q- {+ Q2 m
</script>
6 \" f% l; K7 y/ }' I9 Q+ G
</body>
+ R4 X" L$ c( _8 f$ S' H* S
</html>* ~7 R' A# N! G2 e% U' c
9 p$ ?6 E: d3 W

复制代码

客户端：

<html>
, N2 v8 K4 Q+ a0 g
<head>
$ M' Z2 `$ u: B* a" x
<meta http-equiv="content-type" content="text/html; charset=utf-8">
" J# T/ {% g1 z) U+ g1 R' I
<title>客户端直播页面</title>- { p* N6 {8 J9 [
</head># k6 g" q- Z1 ^. N- B
<body>' \9 k8 u2 n# z% V
<img id="receiver" style="width:720px;height:480px">
. l( N; t z. O4 C) V# F
9 d, @! P9 u! g3 B7 V* J
<script type="text/javascript" charset="utf-8">
/ N3 c! C9 C9 p4 l. b- `9 |
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
3 B+ w( z; e2 s/ c0 L; F
var image = document.getElementById('receiver');7 [1 H+ k" F3 z% [
receiver_socket.onmessage = function(data) {3 P; k% ]8 U# L1 N7 |8 b4 f3 @
console.log(data.data);
image.src = data.data;4 y( H. C S1 l0 |2 a
}
$ z$ _" S m! s4 _. {. m% f
</script>
0 C0 L& c+ V5 y# w. M
</body>
7 s# f, E m) g. B( m. @
</html>- M" N* N2 K2 Y
3 j( t: r* `6 |5 ]6 {0 Q- q

复制代码

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

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

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