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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);& }2 b2 b! u# k7 v
$client=array();: D, l" D ^2 L) \: c
$serv->on("open",function($serv,$req)use($client){) `- B% w9 k {4 u! R
//echo 'connect'.$req->fd;) z u+ Y! w& H$ K( i" o
$client[]=$req;9 a) }8 L2 s' s: x% R9 h
//var_dump($client);: y7 u: c" z- J; M8 P
$serv->push($req->fd,'aa');' `0 i2 _. C1 a! F7 c1 o0 X
});
. d8 |2 w6 K2 q3 h! t, |3 _
) Y; e. R- |, M
$serv->on("message",function($serv,$frame)use ($client){
7 {/ \+ A' ?: @5 ~1 m
/*var_dump($frame->data);* d1 }; c0 v9 i. p2 @2 [7 k
foreach($client as $key =>$val){
: C+ {7 d( }1 B
$serv->push($val->fd,'aa');# r9 c" g# }4 V7 A. W: o! N; S
}*// P) L( I" A( Y: r- f
$client=$serv->connection_list();
% B+ O, d( i5 T% u1 }1 R/ i
var_dump($client);. e4 l0 Q" V- P0 F0 d+ u S5 S4 {: _9 k2 c
foreach($client as $key =>$val){: T9 w! k) f3 l" c1 u* |% ^% {+ a D
if($val!=$frame->fd){
0 }( T0 _- f+ x( K- F# C
$serv->push($val,$frame->data);' k0 d2 _1 K' i6 g5 h1 {3 g5 x
}# _" @. b V' S9 Z. v' M# J" e
}
- \2 w J0 b3 L7 ]" s
% H& R/ L( _* V1 v
});& @- v/ \. I' Q& R1 t/ V
) a& G' [, n+ }! B" l
$serv->on("close",function($serv,$fd){1 O' [2 `" O: P
echo 'close';
* q# t3 q! }8 S/ j) Q' [1 H
});9 \5 u2 ]# T6 @# t" O$ p7 I
2 A9 g E. X) I+ C5 J: k" g
$serv->start();
; k, j2 }/ i( q
, n% H; ~; `% R$ e

复制代码

主播客户端

<!doctype html>3 G0 @2 H# G# Q5 |, O8 ]' r
<html>
( _8 g/ R9 @# j0 ^
<head>
' s, ?* J1 ^2 a- Z0 w8 a
<meta charset="utf-8">9 m7 K; J6 o/ S) _
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
# \6 W+ ` v7 X! J
<title>404</title>6 s% e+ y F' [- E
<style>
5 n3 ^( w' J* e6 n: ?; k8 t
body{' F2 r) R# ~' J7 P
background-color:#444;
9 S# V0 g! a+ J- W/ X
font-size:14px;
7 ~8 T; p9 [1 j
}/ B# h0 q8 B+ u3 i& U
h3{/ ~6 B4 K/ O' N; g. G; \; s' x; t
font-size:60px;8 L! E* t4 R1 \5 k
color:#eee;
! o# g f5 h. q& ~" ^* |. D
text-align:center;
& Y" b$ I& _6 h- [1 Z; x/ ^1 h
padding-top:30px;
' t i3 ?, Z$ S3 i$ r8 E, k
font-weight:normal;
2 m0 w* r L+ _+ r$ t
} E L" C9 p$ v1 U2 Z
</style># J( ?8 B5 c0 r2 X& _
</head> s: w0 X' c3 j4 Q
$ P# A( V: B% k" G; E2 `8 g
<body>
' O1 B. h( y, ~* y+ e: C
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>6 j. u. D" m. E) h
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
S( X Z, F# c
<canvas width="400" id="canvas2" height="400" ></canvas>
z" d# P* C. ~
<script>8 d1 _/ _* W, K* v0 @
var video=document.getElementById('video');
- l7 w' R j2 r9 A) Y
var canvas=document.getElementById('canvas'); q3 F% y) Z( R' S- _5 B+ f8 U, g# v
var canvas2=document.getElementById('canvas2');
) c& N" Z; S$ W/ u/ G6 j+ g5 _" g
var context=canvas.getContext('2d');$ J Y0 g3 i+ s5 |6 l
var context2=canvas2.getContext('2d');
- ^* j' z% T6 ^0 E' h# U
function draw(){. q- @" R# p( t8 J+ S9 ]# k
context.drawImage(video,0,0,400,400);
. w, C' X0 [- L* t% Q
ws.send(canvas.toDataURL('image/jpeg',0.8));/ t9 T# m7 M; K+ N0 q$ J
setTimeout(draw,800);7 w( s1 Y5 @5 c
}
9 l& f/ H4 m; g; _) X
1 a2 \; M) D, s
//客户端跟服务端通讯+ z/ l# x* {- b+ J
if (window.MozWebSocket)
6 J0 A ~% Z, O$ w; ~
{
$ V" J& f8 W7 \/ @0 d7 @+ }: ^
ws = new MozWebSocket("ws://182.61.42.187:9501");3 \! |( I+ f' \" {) u* ]
} else
6 P" U8 }' c) ~
{! E& ?; H/ ~9 {' z3 @( ^( I% u
ws = new WebSocket("ws://182.61.42.187:9501");
% e+ A* ^6 a- z$ y
}
! A$ e: |# E- k" Y1 E) Q$ ^
; e5 ^1 x3 b( L' i0 e0 u$ g: D$ o
ws.onopen=function(event){
0 ?& ?, D5 C# T! F$ N* D
alert('连接成功');; ~) N5 v; e8 h- V) X
ws.binaryType = 'arraybuffer';
* g5 K- O3 j6 D/ I/ ^9 q
draw();$ n9 V8 t3 i2 ^1 l* U
}
9 Z5 e- U9 B# {8 X
ws.onmessage=function(event){" j7 ~# e9 y; s! x- @ O
//alert(event.data);
; N9 o3 e- M4 `: f
//ws.send(event.data+"client");3 [' S1 ^6 [! \5 o9 N$ x
qrCodeImg = new Image();
! l" U. l' T1 {1 L
qrCodeImg.src = event.data;' f% J5 F; C: J
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
( f8 r+ |( o! V, M2 r/ D
8 ~+ u+ w0 G% ^9 @6 k6 y& d
}
, ~# F3 q+ g. P$ ]) E7 W
ws.onclose=function(event){9 N" W! Z- k- S9 a3 K; j7 E9 U
alert('close');
# {9 V1 B* K% C+ a( t
}
8 K& y( S2 Y3 A& c2 P
ws.onerror=function(event){
& }% G, D- ~3 \& J, E
alert('error');; b1 J5 f- U! _ ]4 U9 r9 e, n2 `
}
; h2 k( [( W$ Y
//video，标签模拟视频2 g) p& c, `1 G. _; k5 h) q8 w
. T- t% H) q; J& y8 R! _; J2 Z1 [
</script>, T9 e* y3 |& Y X4 |9 c5 X' W
</body>" ^& O3 g/ r- ]2 Q# V
</html>
* T6 G; v( h5 }6 ^$ l ]7 u
4 \3 q ~2 c2 H9 n. Q

复制代码

客户端：

<html>- H0 g/ a( V0 a# j! ^
<head>
: P9 e- r8 u! Z& A. e) O8 R, K' ^
<meta http-equiv="content-type" content="text/html; charset=utf-8">* ^- d' i+ g! w" n4 I! B
<title>客户端直播页面</title>- X+ ?/ U* q1 R \
</head>
5 ^7 D. t0 S# s4 y
<body>
' p0 s& q+ l# ] A
<img id="receiver" style="width:720px;height:480px">
% j/ G9 C/ X+ _3 q
, M4 a8 D4 B) T# E# }5 Q
<script type="text/javascript" charset="utf-8">
$ O+ [' `" }4 B7 _( e
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");3 R* z& i n+ c( _) n
var image = document.getElementById('receiver');
# S# {% s# {) A9 p0 N
receiver_socket.onmessage = function(data) {
5 b8 ]" ~9 K& ~" R
console.log(data.data);5 L' b: g9 Y8 d8 i
image.src = data.data;1 w L! }" t$ [: ]! J% z9 S; h6 n
}
/ j* Z: z% D f- T/ r0 ~+ d# x3 S
</script>: s }* q" t) T' g. ]2 ]- m
</body>
' i+ z8 L; @) _' j3 e
</html>" x: V/ i' z- d9 v. ~9 j
. F1 n' l/ m/ M4 w" h& D

复制代码

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

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

浏览过的版块

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

浏览过的版块

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