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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
$ w% T7 n# M" U& p4 h
$client=array();
% L# k7 g x8 D; W6 w/ C
$serv->on("open",function($serv,$req)use($client){
9 V4 D0 z. G) ^- A
//echo 'connect'.$req->fd;
9 y' b" A: K* g {5 A& ]& @
$client[]=$req;8 n- B |. P+ l8 d1 A# E* ]
//var_dump($client);3 G6 x5 @+ G( R+ O* ]+ Z& [5 Y5 X) t
$serv->push($req->fd,'aa');" c! F6 w5 e# G, F/ W! R* U, Z4 R
});
) P: K. p5 U2 \8 X+ O
8 Q% g5 W8 X; g" F" r
$serv->on("message",function($serv,$frame)use ($client){1 d S' I- ?9 e( U7 Z; G
/*var_dump($frame->data);
1 X Z* ]5 v6 @3 H! l( E2 c
foreach($client as $key =>$val){* \) [6 g) G7 s
$serv->push($val->fd,'aa');
U, n% v5 c# v+ L$ ^( k
}*/" u9 Y$ T0 A3 Q; i. |- [
$client=$serv->connection_list();
" P+ c: |" B5 s0 C5 v4 W$ E% g
var_dump($client);
y \ _+ r2 x0 ~) ~& H
foreach($client as $key =>$val){7 f3 E+ Z. n. o: K4 e
if($val!=$frame->fd){
2 O, h+ P& {; e: `6 ~
$serv->push($val,$frame->data);
$ q3 J7 L2 z4 T4 [7 _* R" c
}4 c! p- U/ g0 e# a
}
2 K1 {4 t+ ~8 e ^
2 p8 ^3 P) ~9 j" f9 g! y ^2 H
});; K/ a v7 B L# T" G- ]& p7 {/ N4 j
! O$ N4 {- n# K+ }7 p4 W
$serv->on("close",function($serv,$fd){+ m: H$ e1 i" s
echo 'close';2 M5 k E) ~' E+ p) |& j
});
4 c7 ~5 w; q. F* L) k. W
! j! p5 ~6 @( h5 p
$serv->start();' B8 O4 }# |# f
- `2 `+ [( ]" w5 Q0 `, |

复制代码

主播客户端

<!doctype html>. Y3 N: b4 q( x% |" m8 u1 y8 k0 \
<html>
# @' B) }! t+ _( d; W2 N) n
<head>
2 M# m5 S! U! { M/ e( w" C
<meta charset="utf-8">9 G, m* s: D# \; l
0 o4 u3 u3 `7 C, p
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
' c4 |; G/ ~3 B6 E7 f2 b- s) ~
<title>404</title>; i5 y$ R' y: ~9 k8 ]0 G: M* K
<style>
% o3 m" w1 i" ?1 x2 `* {0 m
body{ R# P! o) p* r
background-color:#444;
; D8 b/ `. t3 r% M1 U2 S/ `; y
font-size:14px;/ B8 Q2 C4 E2 t. J l F9 G5 B
}4 d& D3 O- t: {2 c
h3{
5 B$ L8 m6 a0 M' a
font-size:60px;7 {$ Q& D u4 ~
color:#eee;' _' k2 P$ @/ S+ D
text-align:center;
4 ]4 K* }: y- |- |
padding-top:30px;
$ r9 y. L) L! j$ @$ q* p
font-weight:normal;
- K X! z7 }& u, p% ~7 Q
} [: x" ~" v, }, _
</style>: j1 {" b7 C' W: h9 C' z
</head>
3 x5 v0 c4 ]) \! O
5 t9 D; @) } I% q, b2 D' b
<body>( ~' ^" x3 A; y& A5 H/ _
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>0 n6 ?; y! j/ P3 a0 Y
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
# g$ }9 _* j3 S' _% C; m( E4 U* `
<canvas width="400" id="canvas2" height="400" ></canvas>
$ m/ d+ O \, ~3 l8 m
<script>
2 V$ w, M& d0 \# [9 s' x U" @
var video=document.getElementById('video');
4 Q w4 Y/ N" r& O
var canvas=document.getElementById('canvas');5 e$ R4 T. D7 V1 s: ?% R$ Y( d
var canvas2=document.getElementById('canvas2');
# O; p( P( P, y+ l4 ?' f4 f
var context=canvas.getContext('2d');3 f# G6 N! C6 F# B% s- W( f$ C q
var context2=canvas2.getContext('2d');
* t! e5 p$ S# n7 s$ v0 d
function draw(){
! o4 |$ U3 o& Y ~
context.drawImage(video,0,0,400,400);
, ?0 Q0 D* B; t8 w2 I5 K
ws.send(canvas.toDataURL('image/jpeg',0.8));
' l* y; k& J8 k! x6 |
setTimeout(draw,800);
& ^- S: y2 l6 d4 i
}
; X3 z* `" @1 t
- t$ ~0 B2 v7 g. e. j
//客户端跟服务端通讯
7 C& D7 d% s! n- U" S) L& S
if (window.MozWebSocket)
- k6 i3 `( o3 \: h$ O9 @! f
{" E( j) Q8 u( ^0 m
ws = new MozWebSocket("ws://182.61.42.187:9501");
) H: G: S6 V, S# N2 d5 B
} else
! x) S; j2 x5 y
{
- W/ N4 c) s0 A# a
ws = new WebSocket("ws://182.61.42.187:9501");. a) y/ e8 f4 @
}5 Z/ f5 O: Q- d5 Y# e# N& I1 m/ ]
8 l' v/ {# }, l6 I
ws.onopen=function(event){) o9 N& l+ Y3 L+ U6 |1 V
alert('连接成功');
& y8 z) E3 m( g& @% ?
ws.binaryType = 'arraybuffer';# l/ K& I* b# g
draw();
7 B' F. J1 ]; n' p7 ^$ ]* \
}
9 F3 \* A4 {9 ?; E0 w
ws.onmessage=function(event){
6 E5 G9 ]" H$ k2 Y- M
//alert(event.data);) q9 G" p7 x0 P# w8 O/ g3 p
//ws.send(event.data+"client");
) C3 s# z) K2 A9 e# }: d" S) j
qrCodeImg = new Image();
4 r3 \: y1 i8 c. m* x" @, x/ w
qrCodeImg.src = event.data;" u) e/ L" `1 k$ \5 ^6 C
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
* ~- T3 o0 e/ ~8 h$ U' p4 ^# o4 e
( x3 ~, G7 i- ~' T
}. _# @- `1 ]0 I% k8 M& ^
ws.onclose=function(event){5 B- l% [4 }* y7 |& ^
alert('close');; Y+ L( F! T6 g& D
}
; H0 C* h( D, s. K
ws.onerror=function(event){- f/ s' ~1 X2 y
alert('error');
1 m8 c+ Q* Z6 J4 F& r8 d
}1 [9 t) |0 h1 [0 t% E5 u
//video，标签模拟视频2 j: ]; L% }4 M& @& V% ]' ?
* v' D8 }7 c8 d, `
</script>6 J: A3 A7 y* V# d$ S- c5 g/ [
</body>
( j4 ?3 `* _* s5 K
</html>' u& b! |+ q2 s4 @) A
# x' y8 U4 E' a" y3 z9 o( o4 C

复制代码

客户端：

<html>
2 P* Z- [. y) K: c2 V, H1 R
<head>* n; |6 ]2 d' F, u/ f! r
<meta http-equiv="content-type" content="text/html; charset=utf-8">
# p/ S# v' z4 |. U0 T- g
<title>客户端直播页面</title>- W1 X/ Q: R/ k
</head>
* e- U( e' z) {3 |- b( G; y; Y' ?
<body>
) |8 {; z3 e7 O: P/ o, \
<img id="receiver" style="width:720px;height:480px">4 V# i9 q) P8 w% M
- N, G2 t8 |7 v
<script type="text/javascript" charset="utf-8">
& g7 i/ [) P8 R" n' }
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");% u! V& Y- R3 q7 `( b9 Q' k/ I
var image = document.getElementById('receiver');' ?1 g- Y% F$ x* T/ Z+ Z
receiver_socket.onmessage = function(data) {8 a: j2 t% U1 W8 J; J
console.log(data.data);
- U6 X) L7 K0 y2 m" n3 Y
image.src = data.data;/ ^3 N9 `/ }3 r: b1 f: e- @; l2 V
}
( y0 S k+ U, j9 h
</script>$ [, V& _. [2 s/ H
</body>0 V+ P# j/ Y5 a4 t* C! ]
</html>4 z1 L: A7 h6 ^& ^% Z
& b" `6 t3 j3 I5 g! i

复制代码

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

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

浏览过的版块

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

浏览过的版块

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