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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);" u, D1 K2 @: s# u" I7 \7 C# U' Y$ Q
$client=array();5 N$ Y) G8 p' e2 ~+ \
$serv->on("open",function($serv,$req)use($client){+ Q p; F0 ^7 _; |
//echo 'connect'.$req->fd;: H1 ~# v4 |: \9 h
$client[]=$req;/ O' ~9 p/ k$ t1 u+ Z
//var_dump($client);
: @" }8 N# Q$ C- ^' x; u
$serv->push($req->fd,'aa');1 t6 J/ e0 E* K# [6 v
});; H/ w# G0 a" L: I
9 V2 R4 w, s0 y4 i: {, E* T
$serv->on("message",function($serv,$frame)use ($client){( o6 u- L4 S6 N. _% X
/*var_dump($frame->data);
$ B4 U& y' p' }* h1 {
foreach($client as $key =>$val){
M9 Q' Y9 P! Y7 L
$serv->push($val->fd,'aa');
" D8 j( s: n: i
}*/5 I4 D7 { q( l# B% r
$client=$serv->connection_list();! I9 e) j7 @" M8 {5 ~; y. Z3 _
var_dump($client);
- i2 R4 u+ D) T$ O z, }% \9 q: E! Q
foreach($client as $key =>$val){; i% M" \! Q4 x
if($val!=$frame->fd){
0 Z$ c& U/ N, t6 K1 w
$serv->push($val,$frame->data);
, k" C+ B: v u/ {
}
- c7 b! M3 T. R4 C4 {' o
}
. d9 [) \; N" G
4 M% W/ w* I" l( ~, f
});) H: M# D* a2 {. t
- K2 G, Z% [8 u" f; V
$serv->on("close",function($serv,$fd){
' i! q* L' I, w) `
echo 'close';% W f3 ^1 f! G8 Z
});
8 `, w5 V+ n: I' P g0 {
$ h9 t: v; M+ |% m: X+ F$ m
$serv->start();* A- n! s4 g+ x5 P9 j9 A
$ k. z0 ]$ A+ l: P0 N( P- y

复制代码

主播客户端

<!doctype html>
$ _! R) w, j. v- ]% c: [9 A
<html>
- t" {/ S- I1 X5 m$ `/ Q: K* z' ~
<head>
( |" V- ^7 q6 H( L! \
<meta charset="utf-8">
# v u9 w$ {' @
3 `' Q1 A. h! m! ]8 k1 w9 ~$ w
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">0 k9 x# X- [) |) K8 s3 W
<title>404</title>6 H, L4 O1 @; K
<style>
9 N* X7 Y$ s- a
body{# N- v0 y# W5 f; I9 \
background-color:#444;2 V# h* @ n) @8 L* ]( p
font-size:14px;
/ }$ H- T5 @' J+ U
}
! N% ]6 S& Q" Q4 M$ |- j
h3{
Z* p5 ~; s1 R: A- O$ J
font-size:60px; b& c# m6 O- O2 _
color:#eee;) T4 s7 C& @ d+ D; |" G E
text-align:center;. x' [+ H8 _' f1 p$ F* K5 U
padding-top:30px; B; z& y( \- N) h { z. r! M% i6 V
font-weight:normal;5 @7 o% X1 A+ k; c
}
, m2 c7 A4 h* a% T" i5 y* D, y
</style>
; k$ t3 _ f2 p: s. y1 S1 e
</head>
7 S, M! w3 B3 F$ w8 D3 ^
/ x5 j, p$ T Q# U
<body>
! v" `1 |: A" O" a
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>
! D- U( n) ^, J/ N# o; l
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>
) S7 F: {( I8 z6 @" W0 h. k
<canvas width="400" id="canvas2" height="400" ></canvas>
6 u1 x. _- r/ {/ P" G# g
<script>; D) x0 [: z* N1 _
var video=document.getElementById('video');
* G+ ?3 F# i3 {8 h
var canvas=document.getElementById('canvas');
7 I& z2 n5 V7 p y2 e2 X+ x/ |
var canvas2=document.getElementById('canvas2');
! Q9 z0 f0 Q L# N( [$ U+ g3 y1 H
var context=canvas.getContext('2d');; w3 H0 I0 i3 w7 u/ G# D8 \
var context2=canvas2.getContext('2d');
4 W3 k3 L( @2 L" D. t* X% c
function draw(){
' d$ S2 K3 O8 H5 }2 K
context.drawImage(video,0,0,400,400);
# N, _, x; j# C; b
ws.send(canvas.toDataURL('image/jpeg',0.8));. ]: x6 }8 O' G# k" O
setTimeout(draw,800);
2 \, V: n. P7 g; R% @& o- A8 `% P5 F
}
! p' N, {3 N) ]) n6 }9 E
2 _! _6 c! ?- V" U1 u7 K, {( R
//客户端跟服务端通讯9 p; v6 {3 `3 s6 |# b
if (window.MozWebSocket)
' k" r% I& Y6 R: _1 e- f) e
{% l/ b7 l1 }# R: g- P3 s
ws = new MozWebSocket("ws://182.61.42.187:9501");. n- l: h3 K8 w' T
} else
, L% m" y& ^( q
{
( E- X4 e1 h$ r9 x; P+ S) l
ws = new WebSocket("ws://182.61.42.187:9501");
' a/ ]5 L; t/ K6 e4 C
}2 z" ~4 @% m( p0 Z, G4 z$ V" i9 l
4 k% r3 y$ Z: f/ h4 H1 e
ws.onopen=function(event){
# f5 \# c$ W2 N
alert('连接成功');
\% v4 w$ t7 B5 f( n+ a
ws.binaryType = 'arraybuffer';0 S$ T6 V* a, s8 C" X
draw();" z( K9 R0 a/ A' N3 ~1 a) ?
}$ s$ c; P, G4 o. S) Y4 [
ws.onmessage=function(event){( b) O' m) L+ a
//alert(event.data);
( j o: k9 U1 S* |, D2 U
//ws.send(event.data+"client");
% Q- `5 B1 ]5 C( f- L( H: ]+ A
qrCodeImg = new Image();
2 P. }' R! y$ R
qrCodeImg.src = event.data;
8 G8 t S* B. |+ l
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
0 f: `0 Y% g& t @1 h. m
. p& Q5 E4 E% M1 f
}
/ M: _- f5 x6 Z& L! _4 {3 B
ws.onclose=function(event){ [- F* b! N2 q% w4 g5 z9 b% F4 y8 _
alert('close');
/ P t% e, `' O$ ~0 E: t
}
$ H9 q* {; F, x% l9 X8 N) Y
ws.onerror=function(event){" D7 Z( H/ X/ I F( }4 I
alert('error');
7 h( s- f7 c# d2 m! {0 _
}
; A" d- H! ]* T8 c8 _% s3 i3 k+ f
//video，标签模拟视频8 f5 W3 U5 x( X' y+ y% ~
: B# [! i* s( Y* Q- Z- e0 a6 M
</script>
4 }3 W5 U5 j! W7 Z6 T7 L2 `6 e
</body>* k# ^# j1 U* I4 D. ?
</html>" r# r* W0 b) K, f+ ~% j
) ~ W- F" h% p* f& U4 V

复制代码

客户端：

<html>/ g7 O( `: i* r
<head>" @2 y$ r: K& l
<meta http-equiv="content-type" content="text/html; charset=utf-8">
1 S0 g4 M7 S4 @0 q/ b
<title>客户端直播页面</title>
5 |8 t" Q) |: @ V4 ?& M
</head>
( `' U# o0 A2 v6 U& M
<body>
$ M. X8 o$ c$ U: G3 H$ r* L
<img id="receiver" style="width:720px;height:480px">; f/ S" Z3 B( {4 Z* X
) i {$ c- I V
<script type="text/javascript" charset="utf-8">
( l+ G4 r9 ~" k# U
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");
V" l0 n& [' K
var image = document.getElementById('receiver');
' q$ A/ o' s" k7 m( M4 I3 H
receiver_socket.onmessage = function(data) {
; o3 W3 @+ p5 A+ w0 r
console.log(data.data);
) q' i: _& I* h9 Z1 R( s
image.src = data.data;9 N* p* a: h' y- s! G( S
}/ q# I- S3 F4 a' D2 e. t: d
</script>8 m7 B6 F+ Y3 y# E8 c
</body>
$ J& F& {& T7 u; s4 T+ b3 ~8 W
</html>+ t5 Z0 s, d/ t( _, G( ^7 W; F
) b0 m- M3 p7 k( s

复制代码

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

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

浏览过的版块

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

浏览过的版块

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