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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);* O X5 A; W0 y& N
$client=array();
3 R0 a/ [' t1 h0 G6 x Y) Z
$serv->on("open",function($serv,$req)use($client){
! N% ~# L! d, F/ H; l+ S; ]7 X
//echo 'connect'.$req->fd;/ i, S. B+ U& q% f
$client[]=$req;( E# v. Y* q, S8 z( ~$ I
//var_dump($client);5 _/ j) k. [4 g" D2 p2 U6 p
$serv->push($req->fd,'aa');9 K. p" m" V3 F* d7 ]7 Z
});
/ D) N( B# {) c$ W$ O% @/ s, l
* `7 i) J$ z2 ?5 j; B% p2 d
$serv->on("message",function($serv,$frame)use ($client){
$ o0 q4 J5 M/ ^: f! B
/*var_dump($frame->data);& k# ]' _! |/ p6 `5 a/ B0 ~! ~
foreach($client as $key =>$val){; P' b( j* I) _4 k# r
$serv->push($val->fd,'aa');8 S+ r8 o2 D! @9 _
}*/
! r# s0 X' {' ^3 M4 }- X
$client=$serv->connection_list();& r L% q2 L/ ~5 w
var_dump($client);9 ~4 T0 R! }/ H' l* A; d0 x
foreach($client as $key =>$val){
6 m# ?5 r1 f! a
if($val!=$frame->fd){# G/ l( _1 N. z6 @5 _
$serv->push($val,$frame->data);
) w- \( @! D; K( t' G
}
; r6 P& ~1 q/ f
}3 u. J2 v/ {5 v3 ^
X1 s. y# M0 i ~- x Z
});
0 i4 }2 j. { h
) g! G1 h5 P1 R! S! r- i; e
$serv->on("close",function($serv,$fd){
& D5 P3 `. @. }: k3 u) v# i
echo 'close';& v+ I; A- L1 a ~7 I0 P. M; f
});7 {% M) N" F2 ]. T
( {( @6 q" {8 \- Y
$serv->start();
9 L. s f. x( \5 @- n. k; g5 p
3 }+ H1 q0 X2 i% I& q5 }* G1 ?. N

复制代码

主播客户端

<!doctype html>! v! N# Q' V: o
<html>
" E3 s7 E0 w j, X" A- D
<head>
: \) d3 D9 i, \4 Z9 D; O
<meta charset="utf-8">7 B7 W' \/ J" r. C5 R; }" \' p
. i' g( m7 w8 S/ ~* C7 }) k1 F* h, Q
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
: a% i2 G* B. c
<title>404</title>
, m- j/ q) U3 t3 h- c& F' s! `
<style>& p+ K+ w* L: s/ g9 ^
body{' z1 s( Y5 n. c/ {! S6 c, Z
background-color:#444;2 C) ^+ d# N+ K7 F8 l4 }
font-size:14px;
) C8 B/ |. _# j; x9 t, A
}' z" v, G8 {$ E7 b
h3{
# c# g, n; v$ r8 ]/ o: n( f: d
font-size:60px;
7 f( S) j- g+ [0 i$ J
color:#eee;
1 Y# m, F+ I+ e5 d, r' u
text-align:center;' P- a0 O9 q: |6 j) G) q9 X
padding-top:30px;4 Q, N; G5 M. B
font-weight:normal;
6 p1 i, D' {4 _; b
}
$ c$ [9 h/ T. A
</style>
- M- L. [+ A8 i' P3 n5 [9 n
</head>1 L1 x8 Q7 B# E- I
1 {- \1 u# q3 _: E
<body>$ M* g! K) ]9 H
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
/ [' M( H0 U, m2 K8 {
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
* X* j. u/ w4 F: p( }2 b
<canvas width="400" id="canvas2" height="400" ></canvas>) f& |2 Z1 c! o
<script>
( w* I2 L; g% ? J
var video=document.getElementById('video');
1 c/ d/ @4 I) B5 y' y. Z/ I4 [2 a! E8 I
var canvas=document.getElementById('canvas');0 m/ g1 g, v* `0 c% S1 @
var canvas2=document.getElementById('canvas2');8 ^6 K. j2 e) \2 E+ Y2 n9 N$ t
var context=canvas.getContext('2d');! Z& X6 J+ u# N5 C4 Y% {
var context2=canvas2.getContext('2d');+ Y9 Z$ F: g0 h- J& K9 _+ s9 R9 y8 E
function draw(){9 U' y% R5 g9 @$ ^9 M+ Y
context.drawImage(video,0,0,400,400);6 N# m) W* I# Y9 c0 k1 E* O
ws.send(canvas.toDataURL('image/jpeg',0.8));
9 g5 u4 p6 p6 Q2 Z- }
setTimeout(draw,800);
, O1 X- ~7 z+ e: o7 S4 r
}# a6 D+ X) K! U. r
3 j6 |, ?& G3 a- r. \
//客户端跟服务端通讯
' j0 W/ b! a$ e% A% ^0 Y
if (window.MozWebSocket)
" [) p( R5 _- l; S X0 i1 h
{7 |2 }( o) C# h; B
ws = new MozWebSocket("ws://182.61.42.187:9501");
; V' K, x! ?* J' i+ m' |4 G) V7 y3 t
} else/ r" k* k$ o: a( y' U
{! G6 e# j, k! x" q; v! X6 T' v
ws = new WebSocket("ws://182.61.42.187:9501");
# O, g9 E! A" d$ C
}# j9 L5 K* q( J0 i
* l- @; e" H$ d3 }4 @
ws.onopen=function(event){) {1 j- X! T2 \- S6 ~
alert('连接成功');
1 H! {' |, c+ t
ws.binaryType = 'arraybuffer';
1 Y! C9 r4 m7 J$ h
draw();
5 v$ Z1 s$ C. x' J4 l" O
}' [7 D4 [/ J! t8 b g
ws.onmessage=function(event){3 V+ A; h) V( b, T6 J
//alert(event.data);
1 f& U3 G) m `# F* b
//ws.send(event.data+"client");! Y$ l n' e& e. o+ s; h
qrCodeImg = new Image();7 }; K o4 g% ~$ t8 e
qrCodeImg.src = event.data;; ~ i$ ^5 y# S: m0 n4 D9 U
context2.drawImage(qrCodeImg, 0, 0, 400, 400);4 |6 i3 t' z( W
, d5 Q" }' K% Z6 f P" W. k
}
, x( G+ f; |5 e+ ^- X* C" C
ws.onclose=function(event){
: n3 T8 R) K B+ i
alert('close');
% D. ? C9 r0 V, n" J! ~
}
7 H I; ^" N& O, I8 g
ws.onerror=function(event){
* z( { ]) @# `$ x
alert('error');" H9 L' g5 Q3 b! v7 _' u
}. K$ T6 G0 u9 P: v) z- x
//video，标签模拟视频, c& H- k$ w6 C& L% ^6 x6 c/ G: \
8 R5 v, G) S, ?7 O9 ]
</script>
" R5 P' l) q0 ~4 i* ^; ~
</body>$ `5 _3 v1 z3 e& z7 R4 A
</html>0 X2 z5 l8 |* Q" A: ]7 Q
( }6 D) [7 F0 z& F A7 z- [

复制代码

客户端：

<html>- i" W: Y; n0 G }" q/ B' n6 r4 H
<head>
( {" H; F A* x' M6 O6 f* Y+ G
<meta http-equiv="content-type" content="text/html; charset=utf-8">
8 q8 t% |5 K, D. |. A! g5 Z5 m8 c1 `
<title>客户端直播页面</title>3 q% B/ y' j" w& y& E3 K% ?
</head>
) E7 l' }) a2 s9 v$ n( R2 p
<body>* g% V3 Q' j7 N% X
<img id="receiver" style="width:720px;height:480px">
4 p7 g; }4 V: J. d, C
% s1 v( {( m4 `$ w$ ^
<script type="text/javascript" charset="utf-8">
: L$ u- N# Y4 V7 l
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
0 l; s- V6 Z* k2 x
var image = document.getElementById('receiver');( u2 K9 d$ w7 z& d
receiver_socket.onmessage = function(data) {( ]; J. Z0 K& s- q+ @
console.log(data.data);2 ~, F l3 r* l& H4 A% P p4 q
image.src = data.data;
' T" O. D) g, S
}( [) c# R, w& B
</script>6 V8 u; k& C% V$ {
</body>, D1 R+ g8 G. K- C* n( M$ Z
</html>2 |, J+ \: l1 N9 A5 z
- q8 Q4 |2 Q: l8 H/ B

复制代码

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

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

浏览过的版块

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

浏览过的版块

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