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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);' k. \, s5 [+ {$ d& \% g, V6 G8 M
$client=array();1 ^" `5 ^8 U& ]! o
$serv->on("open",function($serv,$req)use($client){9 ~( v8 o1 `: }1 F( P K
//echo 'connect'.$req->fd;
6 w# i- [4 p+ k9 y
$client[]=$req;0 k# C8 v# Q% d- H
//var_dump($client);3 ?' g9 u, U8 A8 B6 m0 S8 k
$serv->push($req->fd,'aa');7 L0 l, ?* J, O7 d7 P+ z) p
});
: e. V. k) T+ R6 O- S d% c' s
& A( k: z" r& W' G/ D8 s
$serv->on("message",function($serv,$frame)use ($client){
% r7 Z8 v* {" f
/*var_dump($frame->data);9 O; J! V( U1 g* m: F5 \
foreach($client as $key =>$val){
4 ?: U& @; O" u( p6 E- L2 w
$serv->push($val->fd,'aa');
l2 u ` G, \3 I
}*/( S1 b3 s7 \1 x3 ~% c" h
$client=$serv->connection_list();
- O7 B; H1 X$ L9 y% l' F- O# J
var_dump($client);$ Y+ ~. o1 S9 y+ X/ ^
foreach($client as $key =>$val){& U$ H1 H; Q. k1 t0 ~- ?
if($val!=$frame->fd){) J) v1 K# C* s3 E3 `. E( p
$serv->push($val,$frame->data);
/ W+ l' q( z' P0 M( {: l, m
}
- y, N" L: {' ?. e8 N( n
}
$ W) \) z8 Y' r8 a% ~, q, _" Z9 C
# W4 [. X Q$ i: h4 h) h
});' \& S1 _5 c% \1 r% ] Q, l: T$ C W
; I7 Y# ~5 f! \! {$ p
$serv->on("close",function($serv,$fd){
2 v7 V2 a1 A8 j* _9 a/ B9 `7 M
echo 'close';
9 y* C0 f" ?# Y. p9 M/ M1 X, a' d
});4 Z& V) Y: }$ s! P# }, N
( Y0 m; p1 n e2 v) C8 }9 A3 g# f
$serv->start();& I* }: W+ j7 O% A5 y5 g
' l, b' V/ b; S

复制代码

主播客户端

<!doctype html>" [$ h4 L' x. ^+ H
<html>0 |" `5 I! z# ~5 ~* T: f- f$ S* H
<head>
* h: ], Y7 o/ T9 ^4 t( z
<meta charset="utf-8">
1 s/ ^' b8 H# C8 V! Y: K
9 {8 s# b% w0 c" T
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">! B' m: X! K* i9 Z6 x0 h0 i
<title>404</title>
, [$ i" ]# U6 j, p# ?
<style>
$ e! u) _9 q& K' p7 P. @& n
body{
/ }+ Z+ A/ n ~
background-color:#444;$ v5 u0 U: w4 O9 h
font-size:14px;1 [% @1 q7 g8 z7 X- X
}
1 N" d. {" F0 `, H/ ?+ v; k
h3{ t& }, `5 B _$ f5 V7 T1 _' C/ B
font-size:60px;
* d! `/ ?9 l- \
color:#eee; i: O6 m- {: T& J8 U0 a$ V9 v+ G, L3 p. T
text-align:center;! l/ u' ^; ^- k7 T/ u
padding-top:30px;
P. r/ h; K! J2 Q7 O
font-weight:normal;
- {- }1 R# \7 c+ ~8 W, ]3 Y, c) i
}
& g9 D* @2 j4 z5 u5 S
</style>
( e: p/ N' }4 _0 d6 |
</head>
% Y9 A! ] j7 P: ^/ T8 J
: M8 A6 q& A, \
<body>
8 _$ I$ k- O- @3 {! \/ @# l* ~1 w
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video> _ s9 n9 N, E, G9 T
<canvas width="400" id="canvas" height="400" style="display:none"></canvas># R+ z o) |( j8 Q x3 Q1 I
<canvas width="400" id="canvas2" height="400" ></canvas>" r J/ p' e; L6 W( \
<script>' g! T0 n, |* |" R
var video=document.getElementById('video');/ c+ {1 H8 ^& b+ Y7 ?
var canvas=document.getElementById('canvas');
, t$ _' i0 h' O" y q
var canvas2=document.getElementById('canvas2');
8 T4 a" v' t+ C, k! L2 O, U# X* D! F- J
var context=canvas.getContext('2d');5 L/ g/ h6 h1 L! p+ J! k$ R3 s
var context2=canvas2.getContext('2d');
' S1 F+ Z; H1 e) Z. L
function draw(){
( q4 C: K3 G/ N4 q* T; N! F
context.drawImage(video,0,0,400,400);
) N1 I$ G4 ^1 x% b' I" r, U
ws.send(canvas.toDataURL('image/jpeg',0.8));
, \5 n3 B2 ~5 H/ \/ f. W$ u8 u: v
setTimeout(draw,800);9 `9 z! D8 j- D2 S7 i
}
* _5 B$ b4 w2 f; b3 A
7 t0 h% b* w. {/ P0 Q
//客户端跟服务端通讯+ i& m: [9 I) x7 V
if (window.MozWebSocket), `: r: G5 Z8 B" o$ c# u
{
3 t4 ]" w8 o$ l" C' ~5 w" L: Z7 Z2 C
ws = new MozWebSocket("ws://182.61.42.187:9501");
. V, D% e" C/ ]& W+ X; _ `
} else/ W7 n+ f+ L, ]% C% Q8 q/ P; p
{
1 x- g8 \9 B! y; w, j
ws = new WebSocket("ws://182.61.42.187:9501");3 j- {8 e; a* q! @! e) q9 A k) G1 s
}* |# b9 ]2 h M. V, [. c1 ?
% p. g% X8 A4 u3 f- w0 f4 B
ws.onopen=function(event){# O2 y2 A' c2 k3 S" Z1 `, t
alert('连接成功');) `8 Y% E+ ?" s8 i: S% h# o3 f4 z
ws.binaryType = 'arraybuffer';
5 q, x% D, g- d
draw();
6 H% M) D' H8 o3 a5 T! G! w* [
}
( ]9 y, t0 b+ B* f5 W9 [9 |. }! S# d5 K
ws.onmessage=function(event){& X( i0 X7 y. ]: E
//alert(event.data);
k; `' v1 x% P0 B0 k" {( d5 @
//ws.send(event.data+"client");
4 {" E+ F- r7 Q/ y7 {) x
qrCodeImg = new Image();0 A* v# h( a; k+ A" ~
qrCodeImg.src = event.data;( C% p7 `7 N. B
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
* ~- c, c! o1 }* ?. F
3 W4 @; R% b8 D7 i4 J+ ?
}: B: {7 R1 Z0 W
ws.onclose=function(event){
# T& o4 N3 ~: q/ F: q1 N7 G
alert('close');
" ~. y1 w/ Q# Z. a1 B) R% C2 A
}2 ^: y$ h" R/ w5 Z
ws.onerror=function(event){
3 g+ h, q! W5 ^
alert('error');. k1 ]5 E9 H- [ M
}
/ |1 m! @5 g' ^
//video，标签模拟视频1 E/ y! Y! w0 Z2 Y8 p+ t" Y: P
( U; ?" [( M. F9 V2 ?/ o
</script>
: |) z0 h9 {, F2 V, }
</body>
! F- g3 b: [' v# {$ E' N% l, H6 X
</html>
0 ?" H) M. C8 g, Q9 V0 l
, s+ x) b1 L, m2 j4 _

复制代码

客户端：

<html>
' p: i3 w4 w+ O
<head>6 ^9 U0 e+ |% Z$ H% }) X W
<meta http-equiv="content-type" content="text/html; charset=utf-8">
6 W; g1 K+ O! L8 O8 F4 F8 z
<title>客户端直播页面</title>
; V- g7 h; ]1 |* s4 P! y# y/ h" k5 p( b
</head>7 E; ?) n% q& ~; e0 K B# v: V
<body>5 C" k1 q# w4 O/ z! k
<img id="receiver" style="width:720px;height:480px">
( H' I9 N9 }- v& D+ }
6 n7 X' @9 r# F9 n2 Z8 i" X
<script type="text/javascript" charset="utf-8">
5 r/ X! o7 y) Q' ~, I
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");" k) B7 E! O( H
var image = document.getElementById('receiver');
0 g2 G4 t2 m1 d" q; a
receiver_socket.onmessage = function(data) {
8 m; x! u! _5 @
console.log(data.data);
% I' I6 {5 g+ x+ [8 A
image.src = data.data;
1 B" S l8 A6 ~' G+ D7 W5 f
}+ a0 { e' B3 r- Z) L
</script>/ ?8 S) |9 @) j Y D4 [6 t
</body>
+ Y) o( {3 [) _! B) u
</html>) o% R: A- M, b/ E- a* u$ f5 {7 I! W
: s* v2 c B1 R: ?/ b

复制代码

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

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

浏览过的版块

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

浏览过的版块

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