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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501); [' E( j6 Z0 V* z; o
$client=array();
- F8 k2 M' D8 {! Y0 y/ ~
$serv->on("open",function($serv,$req)use($client){
+ _4 W# b; F& ]' y4 T, |
//echo 'connect'.$req->fd;* f( U' t1 N$ |. F
$client[]=$req;
4 G C) O+ p0 D0 d! l8 i3 F
//var_dump($client);
% V2 Y- U+ Q0 R K( y% L# d( }2 {
$serv->push($req->fd,'aa');
. R5 E3 K; G9 g0 a9 Q
});
; d' {" [8 b) @/ Z& e" N
8 i4 r1 r. [3 Y9 o& p
$serv->on("message",function($serv,$frame)use ($client){
3 |1 g+ \) S5 Q! ~
/*var_dump($frame->data);
- ?% G, c8 w( }. J4 V; n z+ C' U
foreach($client as $key =>$val){0 d+ k$ p& c3 j! O0 N
$serv->push($val->fd,'aa');& ?& `+ r, g* i
}*/4 w3 U* }( A7 ]8 a
$client=$serv->connection_list();8 t5 k4 ~) Y) \8 ], \
var_dump($client);
4 ?) h6 q# P4 _$ Z; Y& C
foreach($client as $key =>$val){
1 b K9 U T7 i: k5 R& _; k
if($val!=$frame->fd){
% ~% X* M& J' P- s( V& a% j J
$serv->push($val,$frame->data);
; a) b3 N3 R/ _2 Z- _2 |# m9 ^
}
( D" J- H; _, Y8 h- ?4 K6 ^
}) n2 j! p' e, S# {
( h* H0 e% f6 z" E5 W- c
});; e, h7 [5 m' O* c
8 {3 X9 ] x4 U
$serv->on("close",function($serv,$fd){ K7 H4 k2 f \
echo 'close';; s( a! f: m2 A w4 u/ W# m
});
$ p, k1 V. l Q0 \8 I, u4 R' V
( w* H! T* p1 q$ j! X/ M) p2 ~
$serv->start();
% \0 s9 e: V, H' C' L7 o( T }+ e
/ w! y& s9 J6 _: d* y0 T% O, x

复制代码

主播客户端

<!doctype html>- \: F% B; H5 B- U' |5 c5 y1 L
<html>
- ^. e ^4 G$ t9 \) P1 t( Q
<head>+ q4 Y# V) N- f2 k/ m% t+ d
<meta charset="utf-8">6 a% X, F9 {+ y1 ^3 v$ ~6 e
5 p i# s) W9 K; L. i8 [: S- `
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
4 T+ ~0 v. U0 _+ Y8 J4 c
<title>404</title>
7 O, P9 }: u4 i# X* B. E
<style>
5 @( e1 O( [5 t# b
body{' _1 |+ F' P; e5 z
background-color:#444;' q5 ]) H$ }8 d4 f( u9 X) |
font-size:14px;
# [8 c5 i5 T- { Q' A
}9 a$ Y$ A7 k) x
h3{. K: q) k- ^! q F a
font-size:60px;
9 {9 E6 Y# C, X2 O6 }( j
color:#eee;. a. u0 I3 n- o8 `+ ~, x
text-align:center;! ?6 T: b; m- A% W7 }
padding-top:30px;
3 M8 K: N4 c( D0 Y. K
font-weight:normal;6 D" r( t) |* S/ g* K2 A
}
9 T: L9 W5 f6 v+ m
</style>
$ E3 H g" [0 \7 w6 \
</head>
4 P8 `7 t o# I/ ~- M
- ^) f2 u0 q9 ~# F
<body>
# n, h6 Y, P8 h; N5 O
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>$ L; N2 |& g! V5 h5 k% ^! n
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>; V m1 h" O: l9 Z
<canvas width="400" id="canvas2" height="400" ></canvas>5 V! B1 r7 H; f2 y+ L
<script>( b |* o4 { W: F8 e1 V
var video=document.getElementById('video');
5 Q. g( F* @( _+ Z1 ^, ~
var canvas=document.getElementById('canvas');
; n) X5 B' o) f" d7 f
var canvas2=document.getElementById('canvas2');
3 h0 L/ x" ?' k. ]
var context=canvas.getContext('2d');( }& \/ H4 H/ [" W& V' c! ]
var context2=canvas2.getContext('2d');/ V( }- @& `; l1 M
function draw(){ p* m- U4 l( a4 q0 x2 F! Y
context.drawImage(video,0,0,400,400);5 G8 e+ M! X$ b! t% R; s
ws.send(canvas.toDataURL('image/jpeg',0.8));
0 e2 i8 u) m6 ?
setTimeout(draw,800);* j V& R# F% |( N6 k. |& e( j
}
1 [. B( ~! H5 C' d2 u P$ J
; T2 N7 \( u1 h& V* P
//客户端跟服务端通讯2 w% K$ @: x) B* ^: S8 T. i5 Q% D
if (window.MozWebSocket)$ `6 }0 r* t6 P( J) R4 _& O
{
/ t2 T. I4 }: p, r
ws = new MozWebSocket("ws://182.61.42.187:9501");
) Q8 k2 ], H2 p- l
} else
+ B; q4 G# o# G
{8 f9 J* h% e+ m% }1 G
ws = new WebSocket("ws://182.61.42.187:9501");* r1 N& F) S: w- ~+ ^0 c, l
}% i# P9 | T. j/ T0 h. D3 @# P
0 b, s: E A% g3 N
ws.onopen=function(event){- X4 g! e/ w* `, ~" i
alert('连接成功');4 p( p1 a( `, m" |
ws.binaryType = 'arraybuffer';
w* q# S4 i+ K; N4 i0 i
draw();
. r% s/ s5 b1 I! M$ \
}& b0 n, V2 d. Y5 V& I6 M
ws.onmessage=function(event){
! W. @* m7 V! x" M) ^
//alert(event.data);
5 ]1 H* q5 M! w# [. t& u' {
//ws.send(event.data+"client");6 J4 l+ l/ Y5 g/ d+ [
qrCodeImg = new Image();5 I+ O9 d3 T6 t$ z$ K
qrCodeImg.src = event.data;6 V3 _" D4 {8 d
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
8 O+ x/ ^ H2 w1 ]5 q. T' X1 C
2 c7 U5 y: l$ |& A3 M7 a- E. g
}6 J9 g0 b4 M$ @7 |
ws.onclose=function(event){
) V( u6 k; f+ I, r* b
alert('close');
, w) z+ B9 v) d6 Z+ O
}# E( D" V4 ]/ Q! K
ws.onerror=function(event){; b/ C; N, z$ Z. J8 q9 O% p& w- _5 s( M
alert('error');7 e7 H ^% b8 i9 t+ \
}' D+ T0 u9 w& c; }& u' u0 b
//video，标签模拟视频' o; E+ E" g. ]0 b/ D5 @0 T
! t6 {& [2 t: o/ @+ y: F+ L6 z
</script>
, F8 a5 v0 n0 x9 a {
</body>/ h; u. }& c6 V( ?
</html>' W) ^, E# Y6 |! W
7 B. K0 }$ F# f6 R7 c; ]

复制代码

客户端：

<html>
. o2 M7 S- y" {% G3 d+ l
<head>2 N* ^% r( E+ q% _
<meta http-equiv="content-type" content="text/html; charset=utf-8">
7 \/ @, l. H x" {1 I2 Z1 {5 k
<title>客户端直播页面</title>5 G7 F0 C0 ~0 b# H) P, R4 r
</head>
% M/ ]' \* M A2 }& V
<body>* j, e. `9 }- @, I
<img id="receiver" style="width:720px;height:480px">
5 J3 i7 M+ W$ C4 J( I% h/ ^
; Q3 M; V; x% r& S3 h% {
<script type="text/javascript" charset="utf-8">
2 K# Y3 c$ S# h: Y
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");: ]2 M x, ?: x# @! G0 l, ^3 Q- K
var image = document.getElementById('receiver');
2 N, h$ T! E; v- D0 Q- \5 P* K: W
receiver_socket.onmessage = function(data) {1 s Q- u# k A/ N$ G
console.log(data.data);
5 Z% ~2 L. \, n) V
image.src = data.data;) e5 J# v# \. r5 h7 i
}$ V3 g$ w7 i6 N) q, e( J
</script>4 _6 n+ ]4 g6 m# g
</body>
. q! g) O$ u f( I* F4 Y
</html>
3 m* m" } ~ g5 M3 R, b; a
+ s+ K/ Q5 ]5 v1 J1 D

复制代码

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

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

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