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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);9 ^# M; I3 p) q y; N5 w
$client=array();7 m- L' S b5 e. S n& s
$serv->on("open",function($serv,$req)use($client){$ ^: t8 n! p4 f6 N. r. T
//echo 'connect'.$req->fd;
7 ^1 @- `3 |' }4 j
$client[]=$req;+ k9 F0 l C% Z
//var_dump($client);
% Q, r }2 c' W, c. t: J
$serv->push($req->fd,'aa');
9 X" ?' I. c* O* _3 Y6 `9 P
});( h+ Z9 O" i5 {7 L, J
5 S, U+ n$ p% G: m) k' S
$serv->on("message",function($serv,$frame)use ($client){3 n$ W1 l) u% s; x( h
/*var_dump($frame->data);
7 u$ u: ?. ?( k. Q
foreach($client as $key =>$val){
& v8 ^* K3 C) U9 Y' |
$serv->push($val->fd,'aa');3 \ L! P5 ?2 ^; W+ j
}*/- O: n7 r- L6 b! B5 h, X
$client=$serv->connection_list();
' Y1 T2 q& r$ A5 k% Z
var_dump($client);0 Y" ?2 ]1 H& @) {
foreach($client as $key =>$val){
: d) _$ ?7 f4 [% k6 q$ J
if($val!=$frame->fd){' V! j4 T& k; H, S# P" v
$serv->push($val,$frame->data);
- x/ N! i6 V/ P0 @. s9 G4 T( t
}) @9 E: m* G0 J7 h
}4 f9 ?) q# K! d K. W- h% y. R
5 g# p* W- [) F+ u
});
9 L4 m7 h! a6 J3 x0 o
$ ?; _$ F( J, k# A3 a7 l$ L
$serv->on("close",function($serv,$fd){
/ [$ F% n5 i. _8 L3 C
echo 'close';
( U+ N9 J* l1 u0 r7 c
});
/ d Z7 t3 V& q9 V3 Y# s2 y1 H
7 r0 X5 P3 F! A# K; o0 [& H
$serv->start();$ G1 i/ L# `2 F) @9 m3 K
3 C* Z& q- ]( a/ ?& \- N1 e+ _/ a

复制代码

主播客户端

<!doctype html>
9 d! x1 I4 r; t& p. g3 ?
<html>
: F' _5 a* V6 m7 S
<head>2 m; x9 ^( v0 z5 r$ F7 h: e
<meta charset="utf-8">
1 i5 W" q/ `& N z" h
" }9 q) O% e' z) Z- ^) d
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">4 b0 b/ e M3 x0 T$ Y4 Y
<title>404</title>9 l5 `+ ?# G% Y! D9 d( h% C! i' K9 z; J
<style>- S5 N- g9 l6 F g6 u/ r! H
body{. d& S- }6 n! J* e
background-color:#444;
0 s8 R' ?4 k% ]- ]: C
font-size:14px; }3 y) k) F6 }% I" M
}
% {5 ?+ K# Q- j+ y
h3{
, O) A5 k0 Y% R. E% {3 @
font-size:60px;7 I. p2 C+ y5 l# y
color:#eee;) w, I6 T9 j. R6 T0 h
text-align:center;* \5 l( k- `) d Y& ~2 q: Q' N$ b: Q2 U
padding-top:30px;
5 L0 h( M& g5 q( j$ j# X/ K0 @
font-weight:normal;, `/ i' K0 B7 H1 Q
}
% _2 e$ n8 S4 l8 Z9 r" F" M ?
</style>
" K F: z4 Z( R5 d5 n& y
</head>
* `* y, x8 |# `6 m- q0 h' |4 i7 ~
4 v7 p" f8 H7 v! g* d/ ^3 M, r+ L
<body>
1 `& }; }* `9 a4 }5 W+ S
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
! J( _0 s) G' \
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
$ e5 m' J" H3 B: z" G' P4 ^
<canvas width="400" id="canvas2" height="400" ></canvas>% j4 K5 B7 t# R' M# G: G. I
<script>* V: j1 {) G+ z! [/ T
var video=document.getElementById('video');$ ^! h8 L9 |$ Z, ?/ O+ ~6 `4 D# d
var canvas=document.getElementById('canvas');! D4 g7 r" o6 L5 e2 P5 x( @
var canvas2=document.getElementById('canvas2');+ M: D: m5 v! @6 x1 V' C, [' }
var context=canvas.getContext('2d');9 m3 b. I0 Z3 P* b) g& Q- T! a) s
var context2=canvas2.getContext('2d');, @5 G# `/ Y! F k( Q# m$ P( q
function draw(){( A) s8 e0 h: P( g8 U
context.drawImage(video,0,0,400,400);
) `) R. Z+ q4 N0 x0 m5 o
ws.send(canvas.toDataURL('image/jpeg',0.8));
4 R; P8 o/ s# }- v
setTimeout(draw,800);3 D0 B6 o$ E" O
}9 K& ? ~; ^: I+ ?1 K% ^
4 t% N I1 q4 `+ @3 ]/ y5 |% p2 A' g
//客户端跟服务端通讯1 F l/ y9 k8 v, n* s7 y( Z
if (window.MozWebSocket)
% E8 `, a8 i% G! K/ k# N9 h
{
* ~, ~, G& [8 }- M2 o1 Y: ]( h
ws = new MozWebSocket("ws://182.61.42.187:9501");
/ N# M2 o- l# H0 l
} else
: Q; \9 d y+ `% H
{4 w9 ^. l, A: c
ws = new WebSocket("ws://182.61.42.187:9501");5 h5 D+ R' j7 U9 L; ^( J( t5 l& T
}
6 z* K5 U. s+ W# `1 a
1 F! _2 u; o" e3 D7 y4 \+ _" c' g
ws.onopen=function(event){) n! m/ n: k! N
alert('连接成功');
6 p$ k! }1 i2 H5 F
ws.binaryType = 'arraybuffer';. E$ Q$ h9 O8 B7 L
draw();, v, o# L/ B& g7 }& s
}
5 \" `. X& H. I8 r
ws.onmessage=function(event){
: h" a; \3 N7 p. C+ e+ ~
//alert(event.data);
7 p2 M2 N! w* [8 F7 a, M* c1 P
//ws.send(event.data+"client");
% C& O ^: N+ r2 G1 a0 q
qrCodeImg = new Image();* ?+ [2 _( f$ E( j9 @! D. f; T3 w% A
qrCodeImg.src = event.data;
6 F+ B u; y8 a! b7 h
context2.drawImage(qrCodeImg, 0, 0, 400, 400);8 }' y2 b: ]4 |5 Z) k5 _; f& L
* r% D2 `& J6 N8 N' A6 D& \
}
7 b( M) g0 R/ {
ws.onclose=function(event){6 v2 p( k% o, x1 [: {4 f% Z4 m: ^
alert('close');
9 q5 t; F$ z* {1 D& s: }7 g+ H, e7 a
}8 C4 y% j O5 h" I1 ^' f
ws.onerror=function(event){9 |$ x1 [' h2 Z' f4 ]
alert('error');
2 r$ {+ Q) ]0 @: `7 h- h& x; {
}
6 M% x2 c+ J% G8 _3 G* M) m
//video，标签模拟视频% ?/ x! Y: n& W# h+ c
- P# F0 C; _& M9 ?0 e- p
</script>9 L! e( p4 h+ a: I/ n/ v/ j
</body>+ A0 p0 ^" Y- {" h$ O
</html>- L. J b0 C) m0 M9 J+ m
5 K. B; G* {6 C- W1 S3 u0 v

复制代码

客户端：

<html>
9 O3 Q; m1 h2 c1 i
<head>
/ o7 Q$ H1 d1 K) B7 v8 O
<meta http-equiv="content-type" content="text/html; charset=utf-8">5 ?' u/ g" [) j. V
<title>客户端直播页面</title>- L/ Y6 }) i+ F( v5 e
</head>
9 \2 R4 Y. y# d6 K u
<body>& i7 y: a5 {1 P; @
<img id="receiver" style="width:720px;height:480px">& P7 _" c9 O$ ]& r5 I3 c. W* U
( v7 T; B5 Q+ d y7 T& W3 t# R
<script type="text/javascript" charset="utf-8">4 Y/ h5 L0 S! C5 t$ o2 q) F0 D/ p
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");" j- n- y/ J5 S+ e. Y
var image = document.getElementById('receiver');+ G1 h- X2 V: j; L$ O
receiver_socket.onmessage = function(data) {
1 P) \. o6 R; O" R; r/ ~" J
console.log(data.data);3 w3 ?6 O- w+ y: D- w" W$ T
image.src = data.data;1 n+ o$ ^: U! |
} \! J9 s# t+ J4 }4 T
</script>
% C) |+ e, M5 Z6 s6 M& X4 N* e
</body>
8 {- j! o$ c! e: t* Y6 w, G
</html>1 i9 ?7 y7 Y) x/ z# K1 u3 _
]: s7 ^2 A) R) H, x

复制代码

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

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

浏览过的版块

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

浏览过的版块

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