主要使用 webstocket
4 J! u/ _. g' d, q, O5 t0 W上代码 前端 观看页面 - <script type="text/javascript">
; f1 Z- n5 M; F - var ws = new WebSocket('ws://192.168.0.150:9502');2 T' y% z! o. ~! ~5 A: n
- 9 {: J2 |7 h0 O M5 a
- ws.onopen = function() { \1 z8 X( u6 T1 h- I
- console.log("连接成功");
! s( T$ |% d: _) m: D - };
1 ?5 I+ N8 r1 ?3 v3 z) Z - ws.onmessage = function(e) {
2 s$ {8 G% n/ P7 v! p% i7 q+ y - console.log(e);, U: v. K# `* N8 y8 l
$ E- [8 j ]& M6 o) V' ^- var data = e.data;
6 v* |" O6 q0 V1 |7 I( L - document.getElementById('player').src=data;
) X" q8 T1 O0 A( S4 x. q - };/ m5 _' `) v* p" }6 p/ |- U9 z
- ws.onerror = function() {& r9 c$ B! H% G5 K" s
- console.log("关闭连接");
7 N. a/ Z- D2 R7 @* s- j. p1 h! q/ g. L - };
9 S: s# a/ D0 _5 T% M+ ~: M# w - </script>
复制代码录像页面 ; k, f$ p* d3 R/ L0 V
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>. K6 f2 _3 x7 X: y: x
- p3 }1 E1 g% I8 F
- * T# S R+ t" u/ K1 J( N
- ; k5 q3 i+ ?6 ~5 s8 b4 J
- <script type="text/javascript" charset="utf-8">
- @) Y8 A" c* _2 d5 l - ~! K. p$ s+ n9 N" B" F
- 2 Q; j1 @( u) {# b# m
- var socket = new WebSocket('ws://192.168.0.150:9502');
" S) i& K `: d - //socket.send("嗨我登陆了");! M: E$ D; A- Q6 I6 O- ]5 V( Q* l6 h$ J
+ e2 y0 {3 ?8 C! a# ?' g- var back = document.getElementById('output');/ H6 e5 b9 r6 ^( A) n7 w
- var backcontext = back.getContext('2d');
c0 f+ J2 d% ^: }& `7 i3 a - var video = document.getElementsByTagName('video')[0];$ @3 y: C0 w% p" U. U* y
-
2 d) `% F1 P- Y4 } - var success = function(stream){, z" A1 ^6 |% |2 K3 o
- video.src = window.URL.createObjectURL(stream);
* E3 x ?6 f3 H8 W* i8 H* G - }6 [: z% O3 L8 u/ c t
- 7 H. k* k* X% D( b
- socket.onopen = function(){3 T% J. D4 s1 d' [1 D. Z6 V
- draw();8 D: F1 x0 e9 H6 Y2 h- R3 M
- }9 ?( c, D! C4 U! \9 P6 e- Z
) P/ g. ?1 ?2 K- var draw = function(){
! i% l& y8 z) S2 K+ q7 ]6 \1 m - try{) b" ?' K) B' d" x$ C
- backcontext.drawImage(video,0,0, back.width, back.height);
5 |% J7 [% [6 l" x4 F ? - }catch(e){! ~( r# m e) J. F0 e
- if (e.name == "NS_ERROR_NOT_AVAILABLE") {
# Z/ ~, T. d: Q3 ]6 Y - return setTimeout(draw, 100);
" f, w l/ Z* n2 F$ X/ k - } else {
, m1 E1 m" k' } - throw e;* i7 ]; m! F, l0 n/ Y
- }6 r( o+ s5 I$ w7 }
- }
$ k& \% O" K: G - if(video.src){/ ~3 L, s4 a1 Y. P S' J
- socket.send(back.toDataURL("image/jpeg", 0.5));
: T- t: l! ]2 u: A: c - }
0 y! R9 v! [% A1 q& Z5 `; p - setTimeout(draw, 100);. t" F- D$ \( X! E8 ~( D
- }
" {" W w. K* D2 c - navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||8 N0 e* I+ r* C# Q( x! [6 d: D
- navigator.mozGetUserMedia || navigator.msGetUserMedia;
7 ?! `# @$ K8 j$ q! g) g - navigator.getUserMedia({video:true, audio:false}, success, console.log);
0 ]6 r. Z+ t4 H - </script>
复制代码- php: S- O& T/ ~; ] A% j& E
- * o# E6 q3 v+ \5 a0 R
- $server = new swoole_websocket_server("0.0.0.0", 9502);7 [* H* G5 h; b
- 9 Z9 G1 A- J2 F& x
- $server->on('open', function (swoole_websocket_server $server, $request) {
2 q- ^$ J, ?! C0 D4 S
! D" b7 `$ H" b- echo "新用户id:{$request->fd}加入了\n";
' |7 p: P: U# J% p# W* n# i( t- N* p - // echo "server: handshake success with fd{$request->fd}\n";
* q9 H+ M5 d# Y7 E) Q - });
( O& Q8 W9 a$ N, S5 {0 W
6 G. R- K, x% ]- $server->on('message', function (swoole_websocket_server $server, $frame) {3 b% e F. n6 l8 A) s& w: ~2 ~+ D
- 8 K# h* Y" G0 R! P' u8 Z) t
- //循环所有数据
- H b8 `8 y! T5 p8 |7 K9 P# h - foreach($server->connections as $fd) {
& B+ J$ L' P0 M* N- Y; F - //返回数据! U5 v) T% e/ J% R: F
- $server->push($fd, $frame->data);
/ E2 ?6 e, m C4 |2 ^* Q - }
* W& B; N! S2 R1 O4 z - 6 D, D, ~- t, U+ m- d P, x0 C
- });
* U: t: X; h5 G6 Z9 [1 }0 {
' h/ P. ]. J: |- $server->on('close', function ($ser, $fd) {; K: j! F; Q+ ^! z! k
- echo "用户id: {$fd} 退出\n";, B7 q& t5 O: M+ j0 a% Y; i
- });
1 K+ v* ]3 D2 R# v6 K" c2 D* d+ `
& U j5 z2 Z: |' f% K) D% o- $server->start();
复制代码 2 j9 k" R; o1 x* z
2 q7 G7 S: L$ K0 [4 J4 p
8 r. ^ K1 |- [- V2 v& G7 h# p; \% [: Y
1 }7 u2 c# ~2 L' j& m5 ^8 ] D$ R% V3 D
' x* p( g2 H: y; B3 n: E0 J9 p
3 M5 n. U$ s! N9 @+ s
7 S: X+ G, o+ C, z( T4 A7 r) W3 e9 `0 c) E) }
6 {! f# `0 z" }$ O' d. S6 j4 T4 p6 j5 }% \: y" a( Z% N+ k3 t$ D
|