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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
; s5 g, [9 u$ M. Z
$client=array();
( f7 C1 \4 ]9 U5 h' i0 A
$serv->on("open",function($serv,$req)use($client){/ U$ Y6 ~. U4 z- o1 N9 N6 ^# P: V
//echo 'connect'.$req->fd;
, i* `/ o: g S/ s
$client[]=$req;7 x9 h/ ?, Y/ K" F. I
//var_dump($client);
1 H1 k2 ]- U; ?% l" h
$serv->push($req->fd,'aa');5 C+ y3 O+ n3 v0 k% `; Q
});" Y7 n0 r' l, N& O% s$ w/ G
9 K. R% ^/ z1 \ u) K
$serv->on("message",function($serv,$frame)use ($client){
+ X, w0 t' X: x" D8 }6 E
/*var_dump($frame->data);
0 [1 ^1 V; n" p1 |: |( c1 u. \
foreach($client as $key =>$val){1 i( M& n, L; S( I
$serv->push($val->fd,'aa');1 H! Y2 l. i3 W$ o
}*/5 l" b% v; `6 l: n4 s7 s9 m: J) r W
$client=$serv->connection_list();
9 v6 t/ m. K3 f0 m( W: d9 M$ {
var_dump($client);2 |4 h% r% s6 f$ t4 G
foreach($client as $key =>$val){: p* y: v) g# K A2 |* v( N
if($val!=$frame->fd){6 s% B. e9 E! _
$serv->push($val,$frame->data);8 F3 B/ j1 q9 {$ }
}& B- Q9 E' o+ E) A" ~' v( L9 [
}9 n- o& l/ m; D7 g3 T
7 g/ z5 m G! x# w
});+ i* i% r8 \, x9 k# l
9 i# l* a1 s) V& x. x1 T; b
$serv->on("close",function($serv,$fd){
- ~ |+ B2 p# @4 H: t( ?
echo 'close';0 ~* f; D! x8 V0 d# i# P
});8 U w* V; _! z8 G
' ^, y* v' @' g
$serv->start();! r+ a( k+ Z; o8 v; ^; G- X
$ H' S) q( c: y, u" p8 w

复制代码

主播客户端

<!doctype html>1 H% \2 b( z2 z* A# s. ^
<html>
/ C8 ]+ v. e0 ^. p5 O
<head>
$ z0 k6 s3 s, n
<meta charset="utf-8">
) `- S5 R* J7 v- O- R" T* b
1 w2 h0 t0 X. g
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
b7 o7 p) z9 A. m
<title>404</title>
/ W2 P8 g/ H8 N+ m3 Q( d5 K
<style>/ n( S- f/ F4 |; T' ~0 R1 ~9 e
body{
) { h5 Z, o! B! {0 `; A* V
background-color:#444;
% ~( B7 @9 ^( Z: r0 @
font-size:14px;
& G" ]8 `0 q( f+ M; c
}
$ A! i3 J7 ?) E) j
h3{+ z; r* E; w' B
font-size:60px; a t$ g+ S$ N: I
color:#eee;
- @% C$ i5 L6 q8 ~$ _' y
text-align:center;3 ]% }/ d5 m( f ]8 ]5 _
padding-top:30px;
! i+ C& {7 k0 y- w# Y
font-weight:normal;/ |" G2 k" |: \( |/ w) c8 R
}
, \; G. s& H) Q# v
</style>/ Z$ f! F9 h5 ?# G8 @! \
</head>0 _) b }( Y7 n+ u# F2 j
u/ ~' h2 N' z2 j
<body>1 _3 @, R' o$ K7 t
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>& P9 l5 U3 N: D9 A$ N4 q) r
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>7 ]1 G$ H, U8 u X( |# S, c
<canvas width="400" id="canvas2" height="400" ></canvas>0 _6 R) M( o7 E* |4 D
<script>
, ~" n) r/ i2 r
var video=document.getElementById('video');" \2 }5 i# f/ M/ e6 x1 O/ E' |+ v
var canvas=document.getElementById('canvas');
5 W& H" F- P: A' l2 d' ?- c! g
var canvas2=document.getElementById('canvas2');: H$ m/ [- g! \/ Q
var context=canvas.getContext('2d');
M: }; x$ N! ?$ `' q) F: W
var context2=canvas2.getContext('2d');
M) e4 z) w( p& i- V7 }; N7 j
function draw(){
( k: }( W4 _3 v8 d4 }3 v
context.drawImage(video,0,0,400,400);- @8 {7 R8 f: _
ws.send(canvas.toDataURL('image/jpeg',0.8));
" ^- O: S" j, J2 Z+ |
setTimeout(draw,800);
4 c8 F4 n# f, Q1 C% t6 _
}
: d2 y. G0 e+ d; H% p# G9 w; V
2 R( B" i) U* ~' c5 P& L
//客户端跟服务端通讯
, N7 c# N# K$ F! T4 k
if (window.MozWebSocket)
9 B9 Y H9 k l h: p& q
{
" g) c) v7 u% l' A# E' I3 W
ws = new MozWebSocket("ws://182.61.42.187:9501");% W9 p& I" o5 `. b6 s/ `
} else9 O2 ~0 G$ Q0 v6 x
{) u2 L8 n3 ^/ f, w3 D+ _, D# f% g- a
ws = new WebSocket("ws://182.61.42.187:9501");
: M. [* m& Y3 {; n+ C
}
# w: V6 y3 o4 T' a; z! ? r
8 S! Z5 s; z- t$ I# |
ws.onopen=function(event){
x$ v% H0 l; @# Z6 t y
alert('连接成功');" q3 m9 E+ v/ m9 j/ [) n
ws.binaryType = 'arraybuffer';$ _) ]4 z# w \0 W* z n# C
draw();* B+ h1 u i g8 H) }. L) Q
}7 q% k- m, X" k: e2 |( W
ws.onmessage=function(event){
% u: ^; @/ g6 S- T) `/ D2 h x
//alert(event.data);
, s$ p, Y9 f( b9 r9 M; n
//ws.send(event.data+"client");* r) ~- s6 E$ C* ~7 P' n
qrCodeImg = new Image();
7 h2 @+ _& W$ D' {
qrCodeImg.src = event.data;. k' N; O, E1 z) _/ ^$ H
context2.drawImage(qrCodeImg, 0, 0, 400, 400);7 o2 q2 g/ x8 a' ?$ k
8 C3 ~0 z! s4 @- z/ P
}
( z3 F3 F M+ N8 T, s9 H
ws.onclose=function(event){
8 r0 K% |- e. b
alert('close');2 t6 E# J" ^5 s; v2 F" p
}
2 N- c7 i4 i; S# Z
ws.onerror=function(event){* s: T* s1 s( e# B9 h1 r9 z8 m; R
alert('error');
4 @4 F( f; c( ]0 m$ ?6 C+ F
}
" P4 t; o, R f
//video，标签模拟视频/ p) l7 w. r$ `( d: l
$ H$ }# t) C+ p W- U
</script>& o5 @3 N- n+ k5 g0 H. r
</body>
- [& I1 a- ]4 C& z2 K, T1 B+ ]7 Y1 f. H
</html>, M+ i1 N) n. |# @( A8 ]
( \- L5 ]% B4 {7 ?; j( `3 T

复制代码

客户端：

<html>! H6 \/ W, m A9 }1 c, Z3 @
<head>, j+ o8 d! U/ d: f, s1 l" m5 A/ D* h
<meta http-equiv="content-type" content="text/html; charset=utf-8">
- x( [3 a0 t5 h9 R) U/ \% K
<title>客户端直播页面</title>/ b" k" Z- T1 S
</head>/ Y6 R9 F/ G! C- V& q/ t; a. x8 }
<body>
1 m8 x% G/ F& m1 i5 P. y
<img id="receiver" style="width:720px;height:480px">
, ]7 F% G3 w* E( d! f8 r
: Q3 ~; x# x* q4 c& f- t! \
<script type="text/javascript" charset="utf-8">, n1 @- c) E) S1 E* q- o
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");% G0 h( ~1 ~6 O0 G' o; Q: G( @
var image = document.getElementById('receiver');
# E5 P$ T* @* ~1 }1 D9 X7 V
receiver_socket.onmessage = function(data) {
$ w( p; E8 q. |; Y5 ?
console.log(data.data);3 W2 D& \& b- {
image.src = data.data;5 W0 B7 @! N7 E7 S3 K$ E
}
2 k3 N0 o& d: H3 K
</script>/ D- |) g' G4 _# S, M! Z. D$ H9 Z" q
</body>! O$ w1 f2 I; G, c8 ~- w
</html>
# A& Q) j M& X8 k( a$ V
7 R2 I6 X: h! Y8 x5 o' A/ K W& o9 `

复制代码

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

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

浏览过的版块

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

浏览过的版块

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