管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
主要使用 webstocket
9 t( Z1 O# _0 U' ^1 e1 q" J$ x# [4 H上代码 前端 观看页面 - <script type="text/javascript">% i. i# D3 f7 W- A5 `4 x6 _4 _7 u
- var ws = new WebSocket('ws://192.168.0.150:9502');
x- i& m3 {4 U& b
. r$ r& h$ F8 N1 \" H2 _0 W! r- ws.onopen = function() {9 f: [, ?+ H3 J3 t
- console.log("连接成功");; t' t4 }% }( p1 a* A
- };9 W# b) L' y W
- ws.onmessage = function(e) {
6 ]- Q2 n) B7 n( Y - console.log(e);
. S+ m* b/ c, B- n1 I. p' N - % I0 M( ^) e6 o# v$ _) R) @. B
- var data = e.data;
0 m( u7 l) h# r! |8 y' w( C& k* B - document.getElementById('player').src=data;" u' h0 L) n# l; \# c
- };
$ h3 z# g' r! s+ X- N - ws.onerror = function() {$ V( ?- x; x' N/ g
- console.log("关闭连接");( O, V3 n7 b8 q5 P
- };' J) D: _6 J$ ^& W
- </script>
复制代码录像页面
7 q1 |" P) f$ v最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>) q9 d9 A4 I# n7 a8 ]& _
- 6 N, h9 a0 P1 `$ W' ^7 F6 A% s
2 A ]% W, Z3 h& s
% u+ X- R7 @4 o% `- <script type="text/javascript" charset="utf-8">
, v0 X# j% {% g2 n - 9 ^8 i; |+ B8 R, Q. r2 }
-
" X% C$ t( C8 Q9 v8 d - var socket = new WebSocket('ws://192.168.0.150:9502');5 A+ S& X1 Y* o i7 c0 ]
- //socket.send("嗨我登陆了");
v/ L7 u1 p5 X2 k: k+ [( @
: W" x z. h4 `! E" R- var back = document.getElementById('output');
0 r, h& E* ^. ], S& s- b - var backcontext = back.getContext('2d');) U$ J0 o- @$ V& x" s/ b) H# V
- var video = document.getElementsByTagName('video')[0];3 T- V- s. q1 }6 y7 ^' ~6 B' b
- % ]* d# u4 T0 {
- var success = function(stream){
7 q$ I0 H2 y7 j t8 P/ P0 b - video.src = window.URL.createObjectURL(stream);% }( K: D% e6 G/ W& |. F
- }
2 k/ k3 |' \) ]1 }( k - ; r: r7 A' p( D( P
- socket.onopen = function(){( |8 g0 J8 p! I2 X; S4 @" {, K
- draw();5 v8 e% N* v5 r' T+ s5 f
- }
$ f8 C; ^# A. F% F& X - ! i* b7 q" l( X* P
- var draw = function(){7 v: w; K, `; d. w; v' \$ m
- try{/ ^( L7 |) H- G( g! u
- backcontext.drawImage(video,0,0, back.width, back.height);5 A. Y* ?, B6 I1 K" e& ^. O: G3 O
- }catch(e){
3 @4 A' J) Z( @9 H: L% R - if (e.name == "NS_ERROR_NOT_AVAILABLE") {( m' |* v5 x/ H0 E! `& f4 C) Y7 i9 P
- return setTimeout(draw, 100);* _" \! s; L1 I; t% V$ s7 u$ V. X! g
- } else {
7 x- t6 Y9 d4 z: X" l% I; j - throw e;3 w& p5 Z5 h+ Q7 C& ?9 l3 i" @
- }
, P3 ~; u z& W - }0 P1 Z0 S, @/ R9 Y8 s
- if(video.src){
% j& z& `% `1 j4 k - socket.send(back.toDataURL("image/jpeg", 0.5));8 N; g" w% w8 l+ j& z7 o( ]( R
- }
7 w5 X' G& @! Y5 M - setTimeout(draw, 100);& d1 a7 r q/ x7 s) j
- }
0 w/ Y2 G( [1 z1 E, N t2 o9 D - navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||* L0 v" o" C) {" v: X
- navigator.mozGetUserMedia || navigator.msGetUserMedia;* g4 c/ Y8 i! h$ l0 M W
- navigator.getUserMedia({video:true, audio:false}, success, console.log);
0 [2 i U ?. E9 C - </script>
复制代码- php
! R. I0 f) f8 j& l- h/ |" @
: S, ?* |' J' M- $server = new swoole_websocket_server("0.0.0.0", 9502);
7 x {9 }7 r/ ^
0 U; O& N0 j6 o# E9 t- $server->on('open', function (swoole_websocket_server $server, $request) {7 S V- B% P: \! w9 z/ [. C
- 5 {. R: T7 [+ p0 t
- echo "新用户id:{$request->fd}加入了\n";6 H1 W' N+ U( e' ~
- // echo "server: handshake success with fd{$request->fd}\n";2 t4 L9 S: Z+ ?
- });
9 J. R9 M# y) d( w6 O - 6 F0 e2 N) w# p: W
- $server->on('message', function (swoole_websocket_server $server, $frame) {
. l: i4 ?1 d. [0 a- _( c
4 D& @9 y4 H; Q E( X- //循环所有数据0 l g5 X$ N/ m1 I; r# ^( `- T5 I
- foreach($server->connections as $fd) {% h9 M4 z) \+ |& K1 l: r/ d- x
- //返回数据8 Y7 z f$ ~2 \% \
- $server->push($fd, $frame->data);# m6 ?" M; w; G* Z* |
- }
+ N/ h' T [" ~- H$ M - : [( W! a" X$ W( g
- });
n: \. ~& K2 A, x9 q% c/ D" S7 T! g
! u4 C# g1 g8 a3 G- $server->on('close', function ($ser, $fd) {
5 \3 U: H0 a# o/ l( ]) P - echo "用户id: {$fd} 退出\n";% a# Z& D/ n! F, e, \
- });
: d+ T3 C2 ?( P( a - - S% A' t. H, A5 I3 v2 {: g2 c
- $server->start();
复制代码 3 u; R) C# U6 O6 m) {1 y
; v8 N* ~% ]. Z
9 E) l- b( X$ a1 @/ j$ i/ A
4 e. X( E" H8 z& B+ j6 J5 \. D; U5 B7 [" C- A! X- v$ O, B
W) B" R, u! s. k, T/ m& [- c
; q+ _7 S& K3 \
4 b% _) k: e3 e% d7 D9 M* T/ E! M* ^5 t* D; i
, Q- Z1 x7 J" d1 _6 L3 h1 r
8 d0 G; x/ w g2 ?
+ k2 H$ p1 W; F$ p7 l |
|