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

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

服务器代码

$serv=new swoole_websocket_server("0.0.0.0",9501);
( |, j; ~( V0 ~" H& V# E6 t3 A# G
$client=array();
% p; D8 {3 Y" e2 J* n% q4 V
$serv->on("open",function($serv,$req)use($client){* e- B: S' ~ v9 V& v1 ~
//echo 'connect'.$req->fd;
" `' C" z7 ~3 X0 l- T
$client[]=$req;
" }" _; x: x' ~+ w
//var_dump($client);
7 ?2 c# f8 Q% X, e+ t6 H1 y
$serv->push($req->fd,'aa');; m; L" ~" K" _3 Q
});: F3 b: y1 H# M* k, D. S
. Y; I" Z7 a' A3 r9 L+ B
$serv->on("message",function($serv,$frame)use ($client){
7 F1 T' T" k) D* E& }- M; l
/*var_dump($frame->data);
- ^# V7 d$ g, I6 P) E; A# |
foreach($client as $key =>$val){
) d2 k$ H+ o' v7 Y4 ~' z
$serv->push($val->fd,'aa');
! v& `5 P6 d1 @/ O+ Z; N9 l" K& T4 t
}*/* C) f( h/ R9 [$ R; U/ V
$client=$serv->connection_list();
9 [8 e( l3 p; M0 j+ t) K
var_dump($client);
$ \/ |2 ]+ r( Z* n: M
foreach($client as $key =>$val){" l2 u1 e. d$ j1 {- D! N! b
if($val!=$frame->fd){
7 K1 c7 h9 u9 t$ \$ l2 H7 ~
$serv->push($val,$frame->data);
# `8 Q* u5 f" \
}
' C' u( O+ y% O) ?9 V, h( z
}
/ t7 D# g% b0 u4 U5 f
; d$ T7 ]% Z1 p" B
});6 F6 m# K) @' ~7 d+ R- z, z
. C6 ]& r/ L \- V1 T
$serv->on("close",function($serv,$fd){( F, F& F/ p# o! _
echo 'close';
" \6 K. S' T' \1 Z9 t$ N
}); n- H6 {8 T q, n
$serv->start();
* c N$ [* y# \5 ^
3 d* R4 c9 c* y' `0 m5 K

复制代码

主播客户端

<!doctype html>
" k) t Z Y1 f/ o/ ]
<html>: @! F+ n) L1 S0 K$ r0 u* |
<head>
" n1 |$ G' P6 E, Z
<meta charset="utf-8">8 I5 Y4 x# G/ ]- j
% ^ ?4 T5 L5 N+ a
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">' x% |( I+ }! ]# o/ C
<title>404</title>
* a- P; U$ N h- c) g
<style>
$ e) z/ [( S& k* U3 i: V. H* i" L) b
body{
: u" G; r4 Y0 g/ p8 f/ n
background-color:#444;# a; f" i# c8 y; |
font-size:14px;
3 K8 t% N a; p; F% n$ w
}) L( C/ t) i1 e# ^% N
h3{
8 w+ w, D" n9 O% y% y+ H4 s; P
font-size:60px;
) M' _8 L/ q6 k+ n: O
color:#eee;
! g% o& W9 P. |) g2 h% b/ i: {5 S' Q9 g
text-align:center;
% ]: V1 k! k! k& [
padding-top:30px;
0 ?! p: A& A1 _: ]3 T9 \
font-weight:normal;/ |+ h% a% U% v5 i ?6 p
}( ^9 o& G$ U U- \9 ]5 V {
</style>: J: |9 p \( d$ ^! O
</head>
+ ^$ z d7 ~' \- L
, k, U% I& m& b" \3 U
<body>
# z. c% }1 `4 w
<video src="test.mp4" width="400" id="video" autoplay="true" controls="true"></video>1 E; t3 }+ ]: h* v1 m9 Q
<canvas width="400" id="canvas" height="400" style="display:none"></canvas>6 {7 O2 w1 @ Z
<canvas width="400" id="canvas2" height="400" ></canvas>" i$ u( o* K' v3 M* [2 A, ?
<script>
( }9 j. f I W! K
var video=document.getElementById('video');' A5 u1 ~2 Y6 w- E
var canvas=document.getElementById('canvas');+ Q# x; `" Z: n
var canvas2=document.getElementById('canvas2');& T) u- Y3 S0 q: K1 i' S
var context=canvas.getContext('2d');1 T1 U& ~/ \; C) l2 P
var context2=canvas2.getContext('2d');
! j" y7 ?% C! z) M. }9 l) i0 _
function draw(){! U+ C$ C3 J: t! [
context.drawImage(video,0,0,400,400);
# m3 Q/ y/ d. `4 q0 T: M' B
ws.send(canvas.toDataURL('image/jpeg',0.8));( z& z$ c) k) |+ m- C( B
setTimeout(draw,800);
( N7 |; {: X1 `0 b0 l$ a% [
}
% c0 y/ u1 q' C+ v/ a5 @
$ X8 u4 I9 p. d/ s
//客户端跟服务端通讯0 ?: z* n2 O) F# W1 I1 D: B
if (window.MozWebSocket)
& g# [. Q) L2 h- h' p
{
, U- l7 m* ]9 u8 U$ R) F6 t3 d
ws = new MozWebSocket("ws://182.61.42.187:9501");
* {% ?4 x# g3 A2 |1 l+ X, Y
} else
$ z7 s5 b! m& E# m2 z
{
. |0 k- H# T, f9 L( ^$ Q8 U
ws = new WebSocket("ws://182.61.42.187:9501");1 m6 A$ w& [+ e, o/ A
}' D/ _: \" J! S& i- m+ J1 u
7 N5 w& p6 ^# h4 p% {$ [
ws.onopen=function(event){% R* G' J" \4 L3 ^6 C% \
alert('连接成功');: p1 D1 ?+ H) d
ws.binaryType = 'arraybuffer';
# |: G% r. l8 C
draw();. p( ? D: D. t/ c+ O2 [
}3 P; j0 \, j: x
ws.onmessage=function(event){0 z6 D9 w# H9 d ?
//alert(event.data);
t( {* X6 t3 ~2 X
//ws.send(event.data+"client");
& j3 w# C' U; D6 _$ W/ P
qrCodeImg = new Image();
% m' o/ S- y! [6 o5 R! o# _
qrCodeImg.src = event.data;2 F W, v4 x( i. n" n; e
context2.drawImage(qrCodeImg, 0, 0, 400, 400);
. ], O; } x7 `0 u7 z1 h! Q
* D' U0 p' M @2 T3 _
}3 B0 X2 O4 d- O8 o
ws.onclose=function(event){; H; L) `" A; }3 J7 U% m1 S6 M
alert('close');: g( d9 P/ n2 e* `( a* m
}' [1 b, D2 `2 ^2 g; @" G) \# R P2 c
ws.onerror=function(event){
6 j# V3 v. ^7 [+ U# L4 ]" O( Z
alert('error');; ^5 O0 L' }1 c/ S
}) f# v5 N. e: s! P* s
//video，标签模拟视频% z) u2 u, S( t; l5 C- L
+ S8 G) D' b) p* T& W
</script>
3 l/ a$ b5 L2 y9 f
</body>3 a* X- o0 g' }9 v
</html>
" y, n4 _" ]$ d5 r, F; D" U
; d" N, e b* m E

复制代码

客户端：

<html>
p& [9 g2 ?, ^2 L* x |' {2 ~
<head>
3 n m* b' L! R3 W7 f& o" K
<meta http-equiv="content-type" content="text/html; charset=utf-8">( p; g0 w" s. w( Q$ J& K3 w
<title>客户端直播页面</title>, s5 h$ p0 A* ~& M0 Q0 z
</head>- e G/ I! Y0 ^( F7 j- n- j
<body>
; b' a9 Y/ x2 T
<img id="receiver" style="width:720px;height:480px">
% _8 e$ z% d( W
5 t6 G2 Y& k3 @, C; m
<script type="text/javascript" charset="utf-8">: h: F, \+ ?. F1 G! U" k. W8 k
var receiver_socket = new WebSocket("ws://182.61.42.187:9501");0 k. r2 @' D9 o, { V+ c
var image = document.getElementById('receiver');
3 \4 a! r- p/ E$ [7 _
receiver_socket.onmessage = function(data) {
" \4 M. Z* m0 K7 D7 q, W. k( w
console.log(data.data);
/ o& R4 ~3 X- A* ]- ~5 R/ l' d) R
image.src = data.data;* j/ l0 y- ^ ^' w
}
0 }( l Q( c G% T, k# R
</script>4 ~, Y5 i# i0 d
</body> R" U) r( d: V2 ?0 D7 d6 K& _
</html>* |! b2 { O* R+ ]7 s( v
, k& I3 |! ]5 w' x

复制代码

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

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

浏览过的版块

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

浏览过的版块

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