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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);, {* A2 ~7 C6 [/ j3 q$ R
$client=array();
) y3 O% t+ Q( `, Z# y8 F
$serv->on("open",function($serv,$req)use($client){
% d1 |4 p. c. {* v
//echo 'connect'.$req->fd;$ q0 I$ R9 h& Q! D% \2 O: C/ U; b
$client[]=$req;
% c5 u/ L8 Z1 C6 E6 Y- g
//var_dump($client);6 o1 M% G6 {* n4 z) t
$serv->push($req->fd,'aa');
% I0 t9 f4 p. X/ e) | m' R
});
/ T% |" s; {. v
1 g& u" z( A$ D/ @
$serv->on("message",function($serv,$frame)use ($client){6 p4 ~* c+ c# E4 D3 D
/*var_dump($frame->data);
' i9 A9 c0 c" J% K* j
foreach($client as $key =>$val){# s' V. O; A6 _& @$ }9 O7 i0 I( r
$serv->push($val->fd,'aa');" H9 ^" l# Y$ |+ Z3 |
}*/
5 s0 u. L; W, n: U& U _
$client=$serv->connection_list();( J" ]1 Y8 \4 n6 Q, n5 ?0 [
var_dump($client);+ N4 S( k. A* ]! l! ^$ ~& G$ P
foreach($client as $key =>$val){
/ {) P u: B( f* P# b
if($val!=$frame->fd){( i( ?, ~* J6 @5 C' E
$serv->push($val,$frame->data);6 \" |& C& O0 j, H
}! N( _- g0 _* m w- h
}
! K0 P n0 O: l& l0 ~, I
' d2 m1 L) V% {" c; H1 m, w" Z
});
' K6 S9 x& K0 ^/ {, |
, q/ U2 n# W0 D Q# b }5 ^! n
$serv->on("close",function($serv,$fd){
9 }2 [8 R, T% D5 r0 [
echo 'close';' g8 ^$ o9 f3 H) {: W/ B$ v
});, I& H" x' P& @# T' p" |
% I, [& N. O3 E; c Q! L
$serv->start();
6 a4 ?: [" [/ f3 J/ T
( p9 r0 g4 Z4 [ t) z

复制代码

主播客户端

<!doctype html>
( \4 M9 R+ ^3 ~1 n# Q6 R- U
<html>
/ o2 U9 {6 X8 s- K5 Z6 p5 r
<head>) S& D' D/ L3 F
<meta charset="utf-8">0 {) x4 Y& d g2 s
T' @; I5 D7 M1 m0 Q
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">+ T+ i; W) `2 }* `9 c6 V+ K
<title>404</title>
; }4 H1 r( [0 \1 f3 C9 \
<style>
0 m/ q/ [. }9 v% O
body{
4 o. z) I7 \* j
background-color:#444;
$ T$ Q& R$ m6 z$ I- B
font-size:14px;4 R( R- b8 k' R8 v- u3 y0 g
}
2 {% t- B h7 l' y. c
h3{
* g7 G6 D! {7 l2 M
font-size:60px;
* {6 R: @ w3 X
color:#eee;8 |' x9 }* L* s4 v' n
text-align:center;8 g8 X! y$ n$ B
padding-top:30px;+ p/ ~$ N- H% [ R7 W W: S7 J
font-weight:normal;% L" O! X1 v0 N, Q+ S- l
}
% r$ d" J& G/ o1 P
</style>/ c5 Q3 k: ^" S! v4 m4 C
</head>
3 u0 Z# ?: _( A4 Q, @
7 s. g* V9 n! F
<body>; ]! G0 o! Z0 e( q1 M* g
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>) \ f4 e4 q1 n! Z" u
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>4 n6 Q, h& |8 g: X$ {8 ]
<canvas width="400" id="canvas2" height="400" ></canvas>! c: b. [) t! m
<script>
1 V4 J( o6 G4 Q7 `/ k
var video=document.getElementById('video');+ {* d; b+ D; K7 T4 y- B
var canvas=document.getElementById('canvas');
7 R0 Z& h- Y" w6 ]. a. p* I
var canvas2=document.getElementById('canvas2');
$ q7 T7 `; Z7 Y1 K! c
var context=canvas.getContext('2d');1 ]9 h. M/ h! o
var context2=canvas2.getContext('2d');; b6 u* y3 V5 J `) T$ N; E
function draw(){# A" l' B) T7 q7 r, c
context.drawImage(video,0,0,400,400);
- X. ] o. i' ^3 g/ Q
ws.send(canvas.toDataURL('image/jpeg',0.8));
' w# c& B; B. {7 V
setTimeout(draw,800);8 }/ Z( ^2 M& v- T! Z u
}# Q6 W6 f% ~4 f9 ^ Z" {
3 V8 R+ P+ E. K2 A
//客户端跟服务端通讯; V- a+ _( Q2 `! X, I u
if (window.MozWebSocket)
/ J$ ~& D# d: V! F. V
{
# G. A! J3 i0 a1 d! h, F
ws = new MozWebSocket("ws://182.61.42.187:9501");# S5 k+ |& _% I
} else
/ b6 p4 Q* y. j% Z
{
; v, k/ r7 o/ n" c/ A y
ws = new WebSocket("ws://182.61.42.187:9501");# H$ |) C0 P1 y" o
}
+ w; P* U9 M& a. Y, g. Z
7 _1 Q1 v- N: I/ J) G
ws.onopen=function(event){
4 w! r" q2 f! q1 A2 J
alert('连接成功');1 h7 D2 u/ R6 t& z p" a
ws.binaryType = 'arraybuffer';
- x& T# O2 Y8 n, s! p7 r) `
draw();
4 W2 `2 b6 @. \! K0 W$ q! E
}* o$ S+ \& n1 x1 w' A
ws.onmessage=function(event){
" x; x5 n. D3 {6 ~
//alert(event.data);' R; r: b) A1 C
//ws.send(event.data+"client");
, u1 t8 E' _0 M& c6 V/ @6 j1 D
qrCodeImg = new Image();! A4 | l y* o
qrCodeImg.src = event.data;
, K: J9 \5 V) T8 {4 Q" H
context2.drawImage(qrCodeImg, 0, 0, 400, 400);2 A) E* [/ s. l4 J2 `
0 ~! {) [. g: L
}
$ R: t, Y4 T/ m5 i
ws.onclose=function(event){
( U! T/ G; a, j( [: X+ g7 m( {" A+ u
alert('close');
0 v$ q; z9 h K6 b e
}) I/ [: ^# F! h3 p; j9 G
ws.onerror=function(event){
4 @- M, f5 y+ Q8 Q" a
alert('error');& G0 J4 P& R2 S) d
}
# o# k, o) e' n1 D
//video，标签模拟视频
: ~. Y3 t+ E- w0 G! d6 z; n7 m* h5 c4 H
G6 j- u2 a7 Q: R* R0 {
</script>
( e& F' v* n8 K0 S
</body>
+ Q5 p0 L! i. S% h( I8 a# j* b
</html>+ I+ [! T' J% Q" n& K: l5 Q8 ?0 G/ {
1 f& I3 m' k: ]2 k

复制代码

客户端：

<html>
- J* w: ^/ W) Q
<head>. H) v- d/ G0 V2 w
<meta http-equiv="content-type" content="text/html; charset=utf-8"># s; j# ^4 j# x6 w. O6 [
<title>客户端直播页面</title>
9 Z7 b5 `2 a2 s3 ~0 _+ u! f' h$ Y
</head>
. O) l4 C. r; j- x1 U7 j
<body>! s* h1 \$ w, w4 k: `
<img id="receiver" style="width:720px;height:480px">
* J( [+ A! q$ U8 R
, e2 i! p) h+ e
<script type="text/javascript" charset="utf-8">6 h$ l1 V5 N8 K5 J
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
# r! R$ F; v0 Q- v; U% a$ E
var image = document.getElementById('receiver');
, r6 N3 b7 G0 ?" X+ S
receiver_socket.onmessage = function(data) {: c: P/ y9 ]- r& G
console.log(data.data);1 v4 ?& \, _2 e" T# f5 Q. L7 I% J p
image.src = data.data;
( `1 ]7 g: d$ x* b
}3 o7 L0 j/ A2 \0 D6 Z& j5 M
</script>: b5 k2 t, \( L
</body>5 d9 c) _) \: r: |7 H- z2 Q1 ?4 S
</html>/ M& s5 `" D- }
9 b9 ~. j9 `. \! y4 p

复制代码

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

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

浏览过的版块

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

浏览过的版块

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