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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
# E" l# V1 p" W% X1 n
$client=array();
# t( d, g: X# S& o5 ]. X, O3 X
$serv->on("open",function($serv,$req)use($client){
//echo 'connect'.$req->fd;
5 R3 b$ l# B: o4 Y$ \3 {5 X+ ?
$client[]=$req;' u3 d/ F3 F0 v4 M& }' q
//var_dump($client);
* D/ T2 M# X _
$serv->push($req->fd,'aa');) W/ B+ p9 M* g
});6 o+ t* h4 H5 o8 p. \1 a
( ]. l4 s1 E7 e
$serv->on("message",function($serv,$frame)use ($client){. q0 b6 v6 c+ U' c5 z ?8 u2 P
/*var_dump($frame->data);7 u: Q5 H5 P; k0 b: b/ c- z! _& n
foreach($client as $key =>$val){0 M2 H7 q0 P1 U* g# P. j: A
$serv->push($val->fd,'aa');
3 D; ^( d U- _1 Y! s8 Y1 @
}*/
L: T. A, w9 E; D: P3 f
$client=$serv->connection_list();# }$ n# T l4 r6 m$ h" {
var_dump($client);9 p- Q/ T4 `9 q8 y: V# U4 A- y
foreach($client as $key =>$val){
/ J8 S( x$ O# T) m( c7 \4 |
if($val!=$frame->fd){
, K- B6 O" D% @7 Y9 R l" l
$serv->push($val,$frame->data);& P; D9 g4 H6 @" [: B y2 b
}
6 w- H/ z5 n( s! ^2 L
}
* J3 q: {- A+ i* n* c% }
( d( T- E( [# _8 A' Z
}); h% A9 W# k* ~$ |% r$ X8 w7 {: I
% S% w( `" u. a2 W9 p( `
$serv->on("close",function($serv,$fd){. w, q2 U1 r- r) \; f2 F# q
echo 'close';3 W5 \- C( b4 J+ J: C% m5 C$ u( B
});
3 o" y, j2 u' M; |# j
& P1 I% `$ S" V2 G9 f
$serv->start();
% u0 _( W: k8 e$ s/ s( Z
0 \2 j8 x* g. H' E% X% [

复制代码

主播客户端

<!doctype html>6 H0 {4 B2 S9 {1 V
<html>
; @$ o, H* K1 S4 `
<head>' w, ?- _( a# l% |. l( k
<meta charset="utf-8">
2 X$ j B i K+ ?
: u0 S0 Y' h6 h4 \8 T
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">6 F# q r e0 g- ^
<title>404</title>
; }" w' }" f# _4 `8 V
<style>
3 E. }6 M7 I( u; s" o
body{
+ W/ ^& i v! t- W1 }5 [
background-color:#444;
, Z: l0 _' W! L
font-size:14px;; C3 e$ q4 ?3 Y4 g9 p9 z, M
}
" G( G" x; l, u2 R! U( u& V
h3{0 P. |: R& Y3 ?
font-size:60px;8 ` j7 M$ r. p( X: s, l! z! X
color:#eee;* f. J* P7 k, e& Z+ O- I7 B' z
text-align:center;
; \* e) J. Z, W% ^! O9 t$ n
padding-top:30px;
. o0 h1 k) s3 N7 C9 b
font-weight:normal;
! o1 B9 F/ Z' T/ q
}# W7 R! p- }0 ^8 |* |4 V
</style>$ @; |+ d$ @/ `) f
</head>
% s$ i8 r$ Z5 ?) Q
+ W, e5 N7 P9 s) ^) V8 G
<body>
4 ~+ E& ?. E+ z# D" [
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>! Q) Q/ N% U! ]4 P
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
' z8 y1 Z9 O5 b6 ^
<canvas width="400" id="canvas2" height="400" ></canvas>
% l+ d `0 m: o6 x% k$ a8 C9 u
<script>
) S1 [; Y8 \7 z3 ]
var video=document.getElementById('video');
, Z1 S& M& c" Q: [+ ~6 B- Q
var canvas=document.getElementById('canvas');
, f) p6 A' z0 q8 D
var canvas2=document.getElementById('canvas2');9 L2 L8 [! L$ \1 d! T# H C
var context=canvas.getContext('2d');
# d; \* `# n! u/ U8 z( r4 i
var context2=canvas2.getContext('2d');# R& m6 ?( _/ Z7 v- D, U
function draw(){
$ o' ]- r& T9 G4 S. u
context.drawImage(video,0,0,400,400);6 v' Z1 t& d0 \
ws.send(canvas.toDataURL('image/jpeg',0.8));
( I& v# h- [6 k0 ]) h' t& ]" r
setTimeout(draw,800);, w& t' b, L% J1 `# h
}
+ u; |; S! H0 S' L4 I
% u# P8 [3 ?& W/ N; \
//客户端跟服务端通讯
4 W! O- S. U% p
if (window.MozWebSocket)# n2 v2 e o) N4 u
{
+ x; w# C0 K9 f7 O. I0 H- o! O
ws = new MozWebSocket("ws://182.61.42.187:9501");7 P' B% G" K% e' h. v: g
} else% c# ~; H# ?* z# i/ X5 o2 V; _
{& ^9 k, i6 i9 \# G4 c4 h4 S3 z
ws = new WebSocket("ws://182.61.42.187:9501");
3 j. j& d4 z) S+ N' w6 j; @
}/ C; C1 c4 i2 l6 m S0 P1 m/ L+ c
! c9 {6 u5 U Q7 A9 Q# v& n+ e7 t
ws.onopen=function(event){7 C4 P7 u/ ~) i# o
alert('连接成功');
2 y: B, {) I& ]7 W9 `
ws.binaryType = 'arraybuffer';0 m, c) b( Z: t- u, I1 n, u
draw();, _; }6 n1 c0 N
}
1 h/ u9 J+ X5 h& n. Q
ws.onmessage=function(event){; Q% @7 L2 V! m7 d! y" K
//alert(event.data);9 ~( T- }, J( Y/ h
//ws.send(event.data+"client"); X6 k w7 S) y. L. G; }/ m: L
qrCodeImg = new Image();
1 M ]9 W: g) A. ^
qrCodeImg.src = event.data;7 J. |# V3 N' j1 ^
context2.drawImage(qrCodeImg, 0, 0, 400, 400);' ?0 A. r* C U: h
# Y7 L/ |2 e e8 Y
}6 A& `7 U/ v+ F& t
ws.onclose=function(event){
3 C8 m( e+ n+ E# w
alert('close');4 I/ R7 C4 J! I E @0 K9 M1 ^
}2 }; L+ z2 W3 K' Y6 l6 s, k. `( Y( `
ws.onerror=function(event){
7 C! d5 U1 j# v% c6 I- b; Z! C
alert('error');
9 h$ @+ Z# A- Y3 k/ S& y3 [' C4 w
}$ P; d% s0 x; U. | I
//video，标签模拟视频
0 W" B& |: ~3 V2 F( `8 ?# {0 r% m
$ E: V, z; N) Z* Q. |$ d
</script>
& ^# j$ h6 y/ s( A$ K
</body>% B" x9 D! W: p% Z, A4 M
</html>
& G1 S/ R- B# } f1 e) {& g$ U
' c5 z9 P( G9 i, E) r

复制代码

客户端：

<html>8 A0 R' X- F2 P8 F' {
<head>% q, t; @2 p$ N& D
<meta http-equiv="content-type" content="text/html; charset=utf-8">, V' R$ B1 H( @: O: k% s
<title>客户端直播页面</title>
# D2 p" C, B* W
</head>
9 k8 p6 @, |4 J! b
<body>
) C+ W( N5 T# d4 z) H
<img id="receiver" style="width:720px;height:480px">
% o3 B; A9 h- r" C: a4 Z
8 ? [' C, J; \; K$ U7 G* ?) j6 o
<script type="text/javascript" charset="utf-8">
$ I1 |( L) B) K6 d
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
8 w" Z2 F" d1 }# a) H
var image = document.getElementById('receiver');6 o# H4 `& ]% J6 X, l1 K4 g
receiver_socket.onmessage = function(data) {, B3 b! _5 I, ^
console.log(data.data);! o/ E" Z3 v4 J
image.src = data.data;' L6 |: Y# C6 l- D0 J( ]3 O9 P
}7 k( `, Y3 f8 q/ w1 n
</script>
$ q" F1 O& u# L' k& N/ O4 ~, ^* V/ P
</body>5 R6 z# X( k$ K" ]' P) j. g3 O5 N- p
</html># q2 k' Y2 |7 ?* g
0 e% ]! _1 g& N& V

复制代码

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

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

浏览过的版块

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

浏览过的版块

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