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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
% J6 T0 D% ?7 j" s
$client=array();) h7 ~% q" g9 d8 A+ T+ w
$serv->on("open",function($serv,$req)use($client){
0 G3 E' w. M# D3 w
//echo 'connect'.$req->fd;$ ~2 c: G& }. M& q; m4 {. u& `
$client[]=$req;
! W: r# g+ K' H; W
//var_dump($client);
1 e# X3 k8 g& G! e3 K Y6 [6 |
$serv->push($req->fd,'aa');
1 f. ]7 ]3 a& ^" h- X
});3 z9 I4 Y7 T6 S( h' |% p
8 X* v- S1 Z; v8 Q' x: T5 z8 u
$serv->on("message",function($serv,$frame)use ($client){
- v: T8 f) z) U, `8 L: l2 x+ K! A
/*var_dump($frame->data);
0 c4 X$ Y0 y- p& f* G5 i2 l
foreach($client as $key =>$val){; P; [5 J( }4 P, N" i
$serv->push($val->fd,'aa');, A+ E, l9 q3 o$ r+ {
}*/
% t/ n v4 |6 {% P# g- E) E4 C; Z
$client=$serv->connection_list();% N$ Q! W% }. B5 j- |+ m
var_dump($client);/ B+ [# q0 ]2 Z+ W7 h
foreach($client as $key =>$val){8 O' M9 _# E$ S
if($val!=$frame->fd){
$ c* Z' g" G! k/ o) s0 X4 c
$serv->push($val,$frame->data);+ I# V8 u2 Z2 P5 P) ~0 w4 |
}8 x% R; B9 u/ K6 b
}9 I( a$ ^, R* f% Q
4 i- E0 G' c& G; C' P0 C8 D
});
+ w- m* y% J0 l9 C
( e$ n1 D' y! h9 L# ?1 M" Y
$serv->on("close",function($serv,$fd){
0 k- C" ?6 T+ S2 z7 }) i
echo 'close';
5 Z9 R# X& B/ h1 R( `8 a
});
; B" [$ w+ c7 L- F+ c" q( Q9 p/ `
% x" G$ e: @/ [3 j, o: |
$serv->start();
3 |- |, U( A+ S* ?: T9 ~
3 b* ?, p3 {1 L+ Z

复制代码

主播客户端

<!doctype html>- F9 ]: C. Q; w7 B% ]5 P& H
<html>
' A. A, x- v( l8 F8 b Q5 Q6 q; r& }
<head>, Z6 _) i! J2 N2 e; Q! P, V
<meta charset="utf-8"> \& y, T4 i) }, C( Q
2 O# @- X' K" d7 J) K- @
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">- _, |$ R7 t1 c
<title>404</title>( ^' {2 `, {# c+ p" d0 |
<style>: n: j' K% F. A5 t
body{
/ ?* b, Z+ f+ J2 X) e
background-color:#444;
; ~5 r: t3 P `! z4 H
font-size:14px; q& n- }7 I+ r. U7 {
}3 S n" k: k# c" z+ k
h3{
0 }( ]9 o4 ~; R$ L! X
font-size:60px;
: ~1 K% y) I% b: [
color:#eee;
- P7 H; K) l( u4 S6 F% O
text-align:center;/ w+ ~6 R% g! {& X6 Z
padding-top:30px;& S! L4 q5 j0 q" [& k% M
font-weight:normal;1 \3 t& L3 f) Y }8 Q2 q
}. i. f6 m2 \' \0 Z& Y
</style>* ?/ a0 d' b* B3 h% R# ?
</head>
; q6 p/ d: H1 t" ?" k9 ^
; j' O6 H! b' j. J
<body>6 Y2 K7 O. ^( ^* p
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
4 T% m7 e! e& M9 _. [! Z# Z
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
7 e; m; b; [3 E; X/ M" P$ P
<canvas width="400" id="canvas2" height="400" ></canvas>" \/ }4 ~) K9 b' e x8 H3 A0 ~
<script>
' x+ X8 I/ O1 L3 @; M$ x# t. Q
var video=document.getElementById('video');) r n" Q; t6 ?! ]
var canvas=document.getElementById('canvas');6 ~5 `. x- M L, q+ Y
var canvas2=document.getElementById('canvas2');1 ]/ I, J/ `! o0 Y
var context=canvas.getContext('2d');
4 _ ^ ~- p- d5 x/ O# ~4 ~
var context2=canvas2.getContext('2d');
% p S( @, V1 ~$ ^4 [5 Y
function draw(){& v" D" }9 N4 x, ^
context.drawImage(video,0,0,400,400);
! q9 ~, U! [& `% |0 Y- K- B
ws.send(canvas.toDataURL('image/jpeg',0.8));
\( Y' l0 V: B( ~9 Q& x8 b( _
setTimeout(draw,800);. B- p4 j) H( v/ E' u" c
}$ }; B! n3 e6 K2 [- _: r$ |
2 D% i6 Y0 f' K, W$ C! W
//客户端跟服务端通讯
: a u4 Z5 D8 w1 @- Z+ c5 E0 i3 \6 i
if (window.MozWebSocket)) J- \% o7 h0 R! e" |, s
{
6 h+ X+ o: } N1 Z
ws = new MozWebSocket("ws://182.61.42.187:9501");
( F2 Y& r- F. @$ k5 C$ [
} else6 [7 M0 y: r- P" B! \: q% J" [
{9 h1 v5 G6 u8 Z* B! U/ j3 {
ws = new WebSocket("ws://182.61.42.187:9501");7 }6 E& y1 l( n {/ i! X8 M7 d$ Z6 p
}
1 d4 \/ D* S6 n# E% x
7 n6 c0 H6 N R0 ^* Y
ws.onopen=function(event){) J8 c A& p7 ~0 C! S1 b9 ^
alert('连接成功');
/ |8 \" r9 o( R* T! e3 k6 I0 b+ m
ws.binaryType = 'arraybuffer';
% n% Y5 K; m6 V" Q; m( T
draw();
/ T" E' ^2 A% @9 [3 ]! t
}/ q- x8 R# }8 x0 A1 E
ws.onmessage=function(event){. l$ g6 r. b. E! V5 Z
//alert(event.data);& w8 }6 v7 P- [8 f1 O
//ws.send(event.data+"client");
5 P* _5 ^4 C! L5 ? s
qrCodeImg = new Image();
8 Q, j. V8 v) A) ?' v
qrCodeImg.src = event.data;& a$ }; l( n# Y7 A
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
_ K* `7 m5 {% d+ t) ^+ h
: W6 E% b+ ~, @3 d8 \4 I( W, c
}
7 v0 o! W* u% m! Q" Q( r$ Z, s0 O
ws.onclose=function(event){
- L7 O# ?" R% z8 X1 s9 _* a2 ~
alert('close');
# f" R- M& _% H- X- A& U
}
) V! Q7 n$ y- p! p% Y8 F- M
ws.onerror=function(event){
: F+ v: @2 K& ~" R2 D7 q
alert('error');+ {4 h$ D% z, ~- \* k* ?
}
u. i6 U5 n5 r/ V% v) v
//video，标签模拟视频# t P: d- |, Y/ p+ q
4 Q& F# |* D X( c- z5 a
</script>/ a0 C P. t+ c
</body>" D: B' z B& S- w) q; v/ C
</html>1 U: d, z3 A% N3 h" I0 C4 u/ q9 t2 g9 b
5 x4 j/ u5 ]' H

复制代码

客户端：

<html>1 [2 D' W9 q) g& A% U$ w
<head>8 y: x) \! s1 k( @$ |- k; y5 v
<meta http-equiv="content-type" content="text/html; charset=utf-8">
4 G I% E5 v3 V2 q
<title>客户端直播页面</title>$ j8 S; ^6 g x+ ^3 X
</head>
- W h) X) n# A7 V, r9 ~
<body>9 H- w" k9 v& F& [3 s8 i, c5 }
<img id="receiver" style="width:720px;height:480px">
0 j6 U3 d& ~3 d8 T) i
% ?7 Q+ S% l5 J1 n
<script type="text/javascript" charset="utf-8">
% ]( ^( }5 ]) x6 e- t$ |
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
) {/ e2 Y( Q4 q1 g) D: r; A
var image = document.getElementById('receiver');
" W0 L p: d0 x9 i: [% o
receiver_socket.onmessage = function(data) {/ S$ a- z4 H( z* |* {1 L
console.log(data.data);
D" Y$ Q) t0 W: o
image.src = data.data;1 a- ~9 r* d4 f( {2 H) R5 l
}8 o3 c2 A! }) Q4 S) ~4 j$ S' D
</script>- c5 |1 ^8 u2 ~1 \; Z% w0 `0 U
</body>% f8 c3 D* x4 @4 f
</html>
2 d3 U* R0 ~* m& g! t8 o
0 d' f' H# `# p

复制代码

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

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

浏览过的版块

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

浏览过的版块

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