管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
服务器代码5 x6 w! s- k( e0 Z- C7 ~9 J
- $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
复制代码 主播客户端$ m* W2 ?+ M: W0 |1 }. o7 V! L
- <!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) _
; ?% Y0 ~' O- }8 X# K3 U0 _ d& W, U# w- <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
复制代码 客户端:$ O% I, M7 d# j" v# `
- <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
复制代码 3 k) h6 j0 a0 y, ?+ j, \, D; `
+ n, H- ]2 ~4 @/ z
- H) r: @1 M. T$ f$ X: V8 S' O/ p4 a0 n; N" J1 D
4 u, D+ @) {) ]# s/ W* E6 Y& j3 w8 O) B' m4 F2 V
|
|