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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
5 U! V) ?* X2 m; {% A8 r6 P; [
$client=array();3 w0 o8 S0 N: H0 y' i: x
$serv->on("open",function($serv,$req)use($client){
# `- b' K1 a; l5 p2 b- J$ J
//echo 'connect'.$req->fd;3 [ o% i' H2 ]2 J' {
$client[]=$req;1 B5 H5 J8 Q" S# u
//var_dump($client);8 `; N+ A t" Z+ f$ a% x/ P
$serv->push($req->fd,'aa');9 [ i; F6 a3 I% `
});0 p6 o# i) v9 f, |* j8 f
2 K: D( ?; X5 z* z. n' _' S: R# p
$serv->on("message",function($serv,$frame)use ($client){
, |. O6 k1 n4 Z1 f! H/ c2 L9 D
/*var_dump($frame->data);2 X2 N3 A/ u( j$ g% u* g( I
foreach($client as $key =>$val){3 a! v, H# a- y% Y
$serv->push($val->fd,'aa');
7 [5 C2 o! f! N" |2 ^) M
}*/, ~, N6 |) K6 J O7 |3 J( C
$client=$serv->connection_list();/ ] u/ }% N/ b
var_dump($client);" d, ^! S r' i- l1 f0 J
foreach($client as $key =>$val){
9 O- }% }6 `7 H: t& Y! T
if($val!=$frame->fd){% [, i: f2 Q/ V* c* |5 N5 k
$serv->push($val,$frame->data);
# |% s" C0 d3 G0 H/ \3 V
}
, j8 ^5 u' I a- I w+ J' y
}3 ?, q1 E' p( ?, @- @4 d( h8 \! J
% `3 L" H5 e! m B& }
});
R/ b/ S6 L( A% T
, U) I: i2 ^" h) G+ x
$serv->on("close",function($serv,$fd){
; r5 \4 _; }1 C7 x" b0 N% Q
echo 'close';3 l; X8 h0 g- b3 k: m
});1 P: L9 L! }! q$ [
1 d" U- }+ [. @4 N6 b( h" v
$serv->start();1 n. I* {& G+ [$ e/ s# d
' l: F* P1 L4 D

复制代码

主播客户端

<!doctype html>: Q3 r$ I+ {" d; w+ Z/ @# ^5 a# Y* L
<html>
9 x. x! ?* {+ w* z0 \" u
<head>/ u: h A- y. j2 o6 W
<meta charset="utf-8">3 m- J: }# R- `5 \' g! [
. u6 k3 Q" ~* ` I5 r6 b
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">8 v( _8 p3 x% d3 z
<title>404</title>
% G% g* f8 U) s
<style>! E9 v& }3 J" Q3 }
body{! s/ s2 [6 W! A# E& m b+ P
background-color:#444;
: N/ {8 R# i) y; L( O a" A. o
font-size:14px;
% r8 U' l ?) O1 }) z" o! V
}
8 B* Y: S2 H5 u2 v4 ?
h3{5 u8 N4 `, G" K; j7 i% u" V* L
font-size:60px;
8 F9 x# o, N/ h" ^
color:#eee;
% k: H X! A/ m: i( o
text-align:center;/ Q1 o8 v; _& C" R: M
padding-top:30px;& g S M# P4 A9 k5 _, }; f+ q* Q
font-weight:normal;2 X$ e" }; k! q% v3 M
}: ?" M$ m, X! V2 U y
</style>
" u/ X5 C7 x" j
</head>
! H0 j e3 A. K! I1 {( z
. H9 d; _+ Q. S R. p% T% y6 e
<body> Q% n& p, q8 Q' ?& _: l# ]% G; q
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
( c6 q8 z0 `! O- s
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
! }. I7 C- R% Y, S
<canvas width="400" id="canvas2" height="400" ></canvas>
<script>. v5 g N( i t
var video=document.getElementById('video');
, b: @7 @. [; H: s
var canvas=document.getElementById('canvas');
* j+ O/ C! d: h" s3 a
var canvas2=document.getElementById('canvas2');. P5 a- O' Z* i" C/ `7 {
var context=canvas.getContext('2d');, z [; L6 z) L1 J/ O" H$ W
var context2=canvas2.getContext('2d');
+ C/ s4 E6 \$ l# p+ x: A7 m
function draw(){
( w& `5 [' v% W: z2 Q# J4 m
context.drawImage(video,0,0,400,400);4 c: F" \: [% Q8 o9 H8 y
ws.send(canvas.toDataURL('image/jpeg',0.8));
! L" Y3 l+ Z" T) B: [+ l* X; J6 I
setTimeout(draw,800);) ^; _' _: c, J" q7 |; t [/ J, g- e
}
' D# T2 e8 ]9 l
0 J, h0 l$ v7 Y2 T
//客户端跟服务端通讯/ x- F2 r0 n/ I# b5 C6 ~
if (window.MozWebSocket)
& F1 \" o8 q, q* i3 {) F- i' N
{! p0 E" M% g% `+ L1 e$ t
ws = new MozWebSocket("ws://182.61.42.187:9501");( w9 n/ E- X, [& i4 q% B
} else* R. r# T4 {) L
{
6 P% K5 z( W/ E9 m1 [ }. U! u
ws = new WebSocket("ws://182.61.42.187:9501");" D! f4 @ v! F7 C6 S
}6 ?/ w! F4 {: s; b
& s5 e5 u! J8 S6 y5 B0 H) }
ws.onopen=function(event){
8 W6 U0 @$ S# _/ T" S( Y. E& ~
alert('连接成功');
' D& O, A$ T* W! O
ws.binaryType = 'arraybuffer';2 e. B8 s2 r0 {3 `6 P6 ?
draw();
( w1 y8 D; j/ F6 H6 w
}0 z; Z3 s5 E ]& ^1 U4 T
ws.onmessage=function(event){
0 L8 x, e4 o+ ~1 x {8 J7 j
//alert(event.data);
6 Y4 l7 [$ j, e# F
//ws.send(event.data+"client");
- ]$ e$ p. O7 D/ C5 x O+ n
qrCodeImg = new Image();
) c# y& c$ x% @
qrCodeImg.src = event.data;
3 `- N8 ]- @' b3 P7 J( n, m
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
; m- R0 E$ z' V C/ F2 p
4 [& n& N) f' @! D
}
2 o5 F( P' K. b) R$ `
ws.onclose=function(event){
* |, @, r8 }* X
alert('close');
' m% }7 v' ]/ p% t# l0 D$ j M6 n
}
2 R# D( }$ e h4 ^; C2 b2 B/ M4 e, T
ws.onerror=function(event){0 u9 \4 r) j( k/ W& o+ U# Y
alert('error');
) h- L E$ d8 H3 f' E# L) J/ b9 N
}
7 d$ h* p' c0 S' B. w
//video，标签模拟视频
& p2 f: F2 a$ m' V2 Y/ `
L' K% h V. V9 h1 z
</script># W6 g4 Z$ a8 |% {
</body>
$ A- P! V5 s, M
</html>, \7 | C7 ~2 n. { E% X
( ?) ~ E/ T* W

复制代码

客户端：

<html>
6 H9 W5 h3 T }1 O
<head>
5 Y5 m. v1 c O% W3 E6 H- S$ p
<meta http-equiv="content-type" content="text/html; charset=utf-8">! l% n% j8 i/ ]# h
<title>客户端直播页面</title>
: @/ g2 Z# }3 \/ N
</head>
$ M1 l0 h* o$ w5 q4 o
<body>) O" a& f* x* U' @
<img id="receiver" style="width:720px;height:480px">) K. B3 ~" w1 v1 Q2 \
" O6 H- j: x9 B2 w' M
<script type="text/javascript" charset="utf-8"># z( g. e# H1 Q% _: l c
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
4 {+ h! t6 r' p1 s/ y0 F
var image = document.getElementById('receiver');8 Q! G% a h" K6 M+ C- t
receiver_socket.onmessage = function(data) {! J5 q" v5 ^# J* S% v; Y
console.log(data.data);
# W2 V$ v) y, x. c
image.src = data.data;9 Q7 S6 l6 F1 ?( y* V* E' P
}& o8 U" u" g- }
</script>
, I' k& B+ S* _7 \7 A% R. u" j# w) F( C
</body>
+ |5 k& Y) r7 {8 Y" n$ r
</html>* |0 \! ^: e) M4 q/ |8 A: E% W) s- H6 l
5 e1 x8 b0 r: a- \ M% E% ]

复制代码

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

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

浏览过的版块

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

浏览过的版块

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