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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
2 Z! l# t, [, E* U0 ? r! I
$client=array();
) \# u; b. ~% l1 O# v
$serv->on("open",function($serv,$req)use($client){9 J8 z2 I* i# c
//echo 'connect'.$req->fd;; h, `7 Q. H1 K; g
$client[]=$req;' Y& Q% c* T, v5 ]
//var_dump($client);
% \) y& {, H! P; `: D
$serv->push($req->fd,'aa');" E# z9 N! N6 _; z. b' x0 t$ @6 M( h
}); ~6 d$ I0 l- Y/ @) H: f
1 t! |( E3 @- M
$serv->on("message",function($serv,$frame)use ($client){
5 N: w& }1 B5 V# {9 Z1 K
/*var_dump($frame->data);3 b5 g% Y, J& I! ~: S. n! C$ g: s
foreach($client as $key =>$val){+ b h( u& ~: k" Q& ?
$serv->push($val->fd,'aa');
8 W6 w/ M1 V: i/ @' @9 U
}*/
8 L) J/ t6 U$ Q$ w: T
$client=$serv->connection_list();
/ ~4 j6 v0 ]+ ~# q3 V
var_dump($client);
' ?5 x8 p) J: v
foreach($client as $key =>$val){: b* P/ N! g2 o" Z
if($val!=$frame->fd){" v8 e* t8 D# U
$serv->push($val,$frame->data);
! z9 n& g0 ]% G( F* U
}. ~2 X$ t6 C" _
}
3 \$ G+ ^ h; F
; f) P3 R$ V- i( M- p% J! B
});1 r4 X5 n# Z. G8 z2 k# r- m
7 u# A! w. f0 A! f. L$ m
$serv->on("close",function($serv,$fd){7 [6 P, G4 [7 M
echo 'close';
- n) [# w! x/ y: z$ G
});9 s6 M3 }# R7 b5 P1 X
( h$ |! e5 l3 v( R) [
$serv->start();' v5 \- n# Z" W' y; E. ?7 [
! |# Y! E, h. a% ] ]% _

复制代码

主播客户端

<!doctype html>
6 d( G; ^! M0 f9 P- H6 ?2 p1 f
<html>5 H; m% u1 n8 T# w9 s, q$ v& X+ u
<head>
2 x- Z! n7 ?' [, l6 W
<meta charset="utf-8">
; V. D: Q8 [* W6 j2 D% P
0 E6 d! U) Z3 w: |: j
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
. Y( _/ F% W, r" Z
<title>404</title>
# c6 V7 W; t, n" O! J6 `8 \5 F
<style>, E2 b$ S1 l! s( G
body{
, t- `6 K% i% J9 ~" B0 i8 e. ~
background-color:#444;
7 B4 d# D) f- `$ K9 F P7 y( w
font-size:14px; D- D1 d. f, f* G& D
}1 y: m6 `& q+ ^ v' z2 Y6 x/ s4 P
h3{
7 i% P- |3 K4 T' q
font-size:60px;. m! O9 S, D' L( z
color:#eee;3 Z3 i5 I9 M, g E; y1 B2 K
text-align:center;
- U# D6 R$ E3 F4 `3 i: B6 [: P8 T/ v
padding-top:30px;
$ E5 u' s9 A' e
font-weight:normal;0 `9 p0 N) a2 ~' I
}
f/ u. u3 p. W3 n' T& I* H
</style>
1 b* O) J1 |' _, A/ n3 j) ^% L
</head>
\5 G# k5 f4 K# U m
1 C/ {2 B7 I$ [9 L0 J. v& N
<body>" P J& S( F ^; s. ^
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>5 `" j) f$ C# `& j( T* r0 ~2 M) C
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>. `" A/ F& b: F, J, {* h
<canvas width="400" id="canvas2" height="400" ></canvas>
) E7 P; f9 T2 h& g" z! W4 n7 u
<script>7 L! z+ W" k+ r' K; I0 n( t
var video=document.getElementById('video');5 u' T$ G+ h+ c+ R1 z& N: [
var canvas=document.getElementById('canvas');, l+ {( k" x. `$ ^' d
var canvas2=document.getElementById('canvas2');6 l6 f: E3 ~6 c3 l T
var context=canvas.getContext('2d');1 ^# {8 N! N( K6 m2 d
var context2=canvas2.getContext('2d');# M, R. D r6 h4 B
function draw(){
6 i5 n* f Z4 ^1 L1 d1 {
context.drawImage(video,0,0,400,400);; U0 c6 i7 i* b, J& F
ws.send(canvas.toDataURL('image/jpeg',0.8));
0 l, b1 A& d7 I4 X# H: p
setTimeout(draw,800);
! `! U1 v: z/ z- C& z
}
2 l- G% @2 P$ z, Z6 L2 x5 [) o
5 z% p4 k& t/ E' K/ ?
//客户端跟服务端通讯: ]! X1 T5 K9 U. d5 u g
if (window.MozWebSocket)4 \; f! \8 O3 J; Z- s, L4 u- l( u
{
1 c7 J) `7 ~. E8 z
ws = new MozWebSocket("ws://182.61.42.187:9501");
4 M, B( e5 s- `* q2 T4 }/ S
} else# S. m+ ^- }8 ^ z; e1 c
{, W- q D, x1 n( [. S4 P
ws = new WebSocket("ws://182.61.42.187:9501");0 x+ @- a6 H& h$ p% ~2 {1 h9 U
}
5 r' v& \/ Q F9 h( J
3 a; T! N3 X. P4 R2 C
ws.onopen=function(event){
3 d0 N& C/ P. V# ~' C. v( M
alert('连接成功');1 d3 L) ?( ^% ^' x
ws.binaryType = 'arraybuffer';
* Z! I$ V7 J+ B
draw();
! Z; G" Z, k. q
}
* @ o& X9 b- ~- j9 W1 }
ws.onmessage=function(event){
* }3 e% `! A+ i" B
//alert(event.data);) a( `% D7 @0 R* [) u
//ws.send(event.data+"client");; @$ }: s# \; y$ B
qrCodeImg = new Image();
' \3 m* Z# g( M/ `5 G+ Y
qrCodeImg.src = event.data;
: \7 e. g4 k! j4 c" e) [' F
context2.drawImage(qrCodeImg, 0, 0, 400, 400);4 P; n$ `) {- i( j
3 ]9 c, o* a! I& o/ B# z1 o
}2 T- |0 [- _8 E" \
ws.onclose=function(event){! \; E$ w" N2 F7 V+ g j
alert('close');
5 z/ q: o5 n, Q" Z3 C1 j/ l3 I5 n( K
}
; B5 z: v9 c7 h% l0 m9 P
ws.onerror=function(event){
. b% V7 r: p0 s! _! X. T5 ]4 U
alert('error'); f$ ~ C. c4 D; [& K* T
}% Z# A+ z, o8 ?7 ?+ w" r: N
//video，标签模拟视频
6 y% } C& o# c. H
4 l) R3 q7 m% x, T: ]9 m. V- @$ [ N
</script>
# K. f/ d; U0 i6 L0 Y8 M0 M9 Z
</body>
& ]7 \3 a+ A9 w) x$ x- N$ e
</html>
. S" M' K! n, J: @3 _& a' C
4 F1 b% Z M$ M. V

复制代码

客户端：

<html>! e3 t; V: u. D: P
<head>
4 U; ? O7 N( t' p0 D4 [
<meta http-equiv="content-type" content="text/html; charset=utf-8">
0 F7 `" U5 R2 x
<title>客户端直播页面</title>$ [; ]3 g; ~8 g) q* ?% ^! J
</head>
. c8 l3 j) R7 {$ ]% U! e
<body>
# r6 K" d9 Z4 N5 R2 q, L
<img id="receiver" style="width:720px;height:480px">' q+ U; e" [6 Y3 i9 m: q
; q* H& T5 ?2 e6 c( s
<script type="text/javascript" charset="utf-8">* H9 w& f- E8 N4 ~
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
5 H9 [' q$ j3 ?0 M
var image = document.getElementById('receiver');
) k4 J; b, r5 E' `+ {8 Z) \ n
receiver_socket.onmessage = function(data) {
( f3 s A! h4 w9 c2 U
console.log(data.data);: Q9 w/ b" N. V! ?/ d4 B# u
image.src = data.data;
6 M3 U3 c d3 f& k; a' \& {3 U
}' V0 Q V, x5 a+ f
</script>* Z* C. ?. d1 r8 f2 X P. y
</body>
. x+ r7 s5 m/ O+ z5 _
</html>& X4 T3 o7 f, _8 I# { }+ f7 p
. v" h8 l3 @9 [) A

复制代码

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

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

浏览过的版块

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

浏览过的版块

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