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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
1 O* a2 h6 U! B8 W0 G
$client=array();
4 R" p6 j7 d+ o! k( G
$serv->on("open",function($serv,$req)use($client){
: U- @8 j; k2 Z6 ]0 E2 ^5 K5 ~
//echo 'connect'.$req->fd;
8 l% ]4 q8 Z3 |% S
$client[]=$req;
5 K$ G& C" `2 h4 {3 R9 P7 x
//var_dump($client);
6 o) w# E I" M5 a$ @5 n
$serv->push($req->fd,'aa');8 }/ g+ ]$ }& p. p8 y0 V
});$ |/ J( @$ y# }3 j$ n
- U0 j& _9 o! L- M
$serv->on("message",function($serv,$frame)use ($client){/ Z% ^( Q7 a n3 C& ~
/*var_dump($frame->data);
- U3 O+ `; y# G# J l
foreach($client as $key =>$val){6 X) n& _1 V0 A: }! G- b4 `
$serv->push($val->fd,'aa');. H; `3 z% x7 _3 ?7 v
}*/
1 F2 H- I8 F0 Q: G% x/ }- e
$client=$serv->connection_list();
" Q4 e# q: I( C* t3 k* J' \
var_dump($client);
/ i# Y! J$ U( Q9 V4 `
foreach($client as $key =>$val){1 c1 w" G, ?* w
if($val!=$frame->fd){- X. T' o# Q) M: |1 m, }$ t
$serv->push($val,$frame->data);! K7 y8 K8 d% ]) ?
}2 k- O! c: o/ J% m0 W
}4 X+ K- X: D2 ]# }; H) W& K3 v8 v
7 R, c1 ~( j0 v* i! @6 `
});" g/ z6 `) J ?8 }& F1 u
; d- U A' U, Q, a. r
$serv->on("close",function($serv,$fd){
8 I$ K$ W+ z. S
echo 'close';# ]+ C! ?- Q" ]/ y$ C
});
" t q/ m% d/ G
- M5 ^. O, v3 F1 ~
$serv->start();
1 X7 D' _# O# X5 j4 O$ P# b
" r9 V( k# P4 e4 @' D* W

复制代码

主播客户端

<!doctype html>! ]5 R' v5 q6 x2 G% P' |9 j
<html>1 a- A: l* X- u; ?2 C5 y
<head>( h, |; F/ G2 N. ?
<meta charset="utf-8">
* i- d0 ?" D: ^6 Z" H
# A% v6 l2 N# R) K1 A0 N
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">6 H5 U# G2 p0 v" y) h! y( r
<title>404</title>- D+ |8 `( f. f: `! V L' {
<style>
5 }( G; P; p2 m: b) R% C, r# c3 L
body{
, h4 y/ B! P. }( `1 B/ r3 H8 E- e" L/ v
background-color:#444;
" z# n! t, D4 @; H- i2 ?
font-size:14px;) e2 Y& p {, @) f9 ]3 p- g
}
3 E& e0 M5 b! u
h3{2 ?/ n. ~ N# a$ B
font-size:60px;) ~- f b/ L( V
color:#eee;
! A. E" F% E2 E1 ^) G" a
text-align:center;" d+ Z$ a2 K4 K5 t2 }% z8 h- T: Z
padding-top:30px;- w* M, d/ k- U0 |& {. B( l
font-weight:normal;# `0 v: g# p5 Q2 e6 \; w6 `# u
}3 m& Q( L8 a# D' A* B H
</style>
- f* A& |$ C6 W: R+ j8 Y
</head>
/ g3 M" v. z: A5 @1 U! C
# H' {: u, X6 q8 Y0 p7 W' X0 A" u( C
<body>
) u1 \7 ~7 L, V
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>+ a- G/ x* y; D0 K% l
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
# W) f3 V8 R- |' N
<canvas width="400" id="canvas2" height="400" ></canvas>
- Q- K' `/ V0 V, w
<script>
0 a% p. j2 b, l$ j1 @6 r/ m: C6 o
var video=document.getElementById('video');$ y: ]6 Q% y r: s9 {2 y
var canvas=document.getElementById('canvas');
+ ~; B' V! \; ^0 G- A! b6 O
var canvas2=document.getElementById('canvas2');; p1 J. z8 ?7 ?9 K7 G9 z: ]# b) G
var context=canvas.getContext('2d');
, o+ t; P" T" Y- B
var context2=canvas2.getContext('2d');; a9 T' H9 F* V+ [9 X+ b
function draw(){( |. O4 s3 p F4 E; L; i }5 S
context.drawImage(video,0,0,400,400);' R& Q1 C% b& V3 b
ws.send(canvas.toDataURL('image/jpeg',0.8));
n6 L* e" t1 i* C5 Z
setTimeout(draw,800);& O' h9 E6 g5 {" t+ Q
}
P8 P) C* p( S$ d
' x6 B) J3 n H! i3 d
//客户端跟服务端通讯
1 t. j8 [- N# F1 p; v' f
if (window.MozWebSocket)& | Y2 b$ i% x3 |
{0 ^$ r4 H% I% A; ]
ws = new MozWebSocket("ws://182.61.42.187:9501");
- k& l5 S, s6 V8 X$ [ `
} else; Z" V- u3 A0 q$ m
{3 j4 b z# v4 N% O
ws = new WebSocket("ws://182.61.42.187:9501");! Q$ G$ w; h2 J* o' r4 a' {. v. ^$ M
}
* m5 U" d7 H0 q
7 R# q; F% V# H1 }4 J
ws.onopen=function(event){& O' U: P+ a6 I4 e2 c
alert('连接成功');
# W% f' q" V i/ U% e, Q1 C: g
ws.binaryType = 'arraybuffer';' I/ E1 Y, k+ I) e" f+ t; E2 o
draw();
5 N" ^5 W1 L9 A( C5 L, B6 j
}
% _* ~7 J) W8 @4 E0 a
ws.onmessage=function(event){
! Q, g$ d8 P- Q, W, p, c- I6 C
//alert(event.data);
* c: X( B" ~ H& a! R9 Z
//ws.send(event.data+"client");+ w! g f/ u( k/ k) m8 \3 B% s
qrCodeImg = new Image();
3 B$ d" N( h3 C. [
qrCodeImg.src = event.data; Z# o, j7 Q% ?+ H0 V
context2.drawImage(qrCodeImg, 0, 0, 400, 400);1 X% C& v+ _: U3 [0 f# S2 n. z
" A3 ~$ @1 C4 O* \( M0 |
}
b' U# O' l" E
ws.onclose=function(event){
) Z N5 g# k8 U! G4 {6 {# A
alert('close');
) N5 A# [8 t/ u1 T$ o; o
}
/ d4 r: R* `. |( g1 q
ws.onerror=function(event){
' `' o9 s" R3 q1 R! t
alert('error');" H6 F b! {" P
}
l' q1 b: O8 z4 n
//video，标签模拟视频
2 U6 q3 [( u0 G; R
( x& g7 E) G' W8 r; [1 f- f* d. G
</script>- [$ M) n$ l& B# i8 t- T' g) m
</body>
3 E3 R$ O6 z& d) K0 s1 m6 p' l
</html>8 V1 P# _1 `9 l) n% t* R+ \
% z7 t5 G! ^$ B5 A& m( U. w

复制代码

客户端：

<html>' e' h% h8 `" Q; E8 m) S
<head>
( x% j& E" g: Y7 u' _
<meta http-equiv="content-type" content="text/html; charset=utf-8">9 i1 a1 j! }3 E% J# t I
<title>客户端直播页面</title>+ M" a8 u/ u3 A* c" J8 L
</head>
; V. {. j6 p" U, t8 E
<body>. u( @4 z2 a5 g! A& ^1 D& f
<img id="receiver" style="width:720px;height:480px"># ?8 E3 g) Q# W8 @; P
' h1 R" |5 O n7 B
<script type="text/javascript" charset="utf-8">4 [ r/ p' a7 R* T
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");* c! H/ M- ^1 ^* e7 \$ O
var image = document.getElementById('receiver');" \1 Z, ^1 G7 U8 g
receiver_socket.onmessage = function(data) {
- B B4 U. J/ H% s) p3 q9 j x
console.log(data.data);+ o( i; T$ h# ^0 m
image.src = data.data;- |! M0 k8 F9 k7 O4 d/ ?
}3 r/ `, m }2 A- n; n) Y5 n$ R
</script>. q# ] q# O- k; P
</body>( K8 p2 {% f2 L( \# X4 ?& N& R
</html>
' E( [' {- |7 L
* b# ]5 K) z, D3 c: A/ g# i

复制代码

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

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

浏览过的版块

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

浏览过的版块

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