管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
主要使用 webstocket
! y* ^% E% s) E* ]- P1 N+ T4 q6 Q上代码 前端 观看页面 - <script type="text/javascript">' ]* g1 r- H( S: N# [
- var ws = new WebSocket('ws://192.168.0.150:9502');
3 J6 j: `4 ?2 V8 r
) k% |( g9 I5 h* v' Q) m- ws.onopen = function() {3 H+ P9 Q7 R1 C9 v& j3 C
- console.log("连接成功");
" U Z1 S- l8 @; C% F! i - };8 S7 h3 k8 J p& r& w: U& w7 j
- ws.onmessage = function(e) {; I% U1 K2 Q' c; ~ Q E1 d. B
- console.log(e);
6 i; z' x4 k0 @# y, D$ Q
! L* b/ Z, E6 d6 } H- var data = e.data;% M3 d3 h ]# H/ w
- document.getElementById('player').src=data;% }. Q& ?* ]0 ^
- };( }" M `! ^, `) k
- ws.onerror = function() {
& Q/ p5 u- {' K: s - console.log("关闭连接");
% e Y, K8 D; n8 C( l, \ - };
9 e! x* t) m- _5 o2 F, a$ D% O - </script>
复制代码录像页面 v' u+ q* u7 u0 g
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>& r3 i. B( ^# Y$ B* y; [
4 M4 L" K, ]2 L
7 s4 P8 X3 Q. h
0 S4 v+ n+ r9 `/ r- <script type="text/javascript" charset="utf-8">. ]2 L8 u/ R. {+ I( h
- `' Y% _1 U# Z: {% ^- 4 N# y/ s4 y) O) k& v5 F7 A0 x5 D
- var socket = new WebSocket('ws://192.168.0.150:9502');6 T, t- e" b' o. C" Q) p
- //socket.send("嗨我登陆了");
$ L; e' g7 D+ y; Y, S5 y/ Q ^1 _
, h$ Y% A4 b$ v( Y$ M- var back = document.getElementById('output');1 t! O9 E( G5 l/ j* A2 [ g) |6 Q
- var backcontext = back.getContext('2d');/ ?+ D: z" K) ?. ~2 K
- var video = document.getElementsByTagName('video')[0];8 O+ \# S$ a. A
- 7 U! Z" j, I; n: b& v# y- H
- var success = function(stream){
. h) Y. a. m. a! X; p - video.src = window.URL.createObjectURL(stream);
# q w- Q: p. Z+ O - }
$ z1 E+ C6 e& v& B - - o, o( L& B' q& F% U# \7 Q
- socket.onopen = function(){
& u# Y; B: m: C" K% I7 ]5 d - draw();
1 a, v: k2 P1 z% K - }4 ~1 e W' i6 {$ ]. O4 s
- . l$ o* t' L. i2 z
- var draw = function(){2 q- K4 K0 l& A# q( x
- try{+ p1 Q' f+ `1 p0 U: ` A5 A% M
- backcontext.drawImage(video,0,0, back.width, back.height);7 Z% j/ @- F! K4 k/ E% R
- }catch(e){0 Q2 q1 U- `% d s4 ^* \ a6 N
- if (e.name == "NS_ERROR_NOT_AVAILABLE") {
) ^. H1 y& W& x* i7 ]5 k - return setTimeout(draw, 100); c- D1 |# O+ b2 X1 j- v5 R
- } else {
" ~7 ^' k- E: q0 Y% C - throw e; E; L$ n6 ^0 y! m' K
- }
+ B0 x! l- G2 B9 ^ - }
0 O1 S' [9 @4 ?0 a) h - if(video.src){, f, V. z( z/ _' W- }6 U+ T- R
- socket.send(back.toDataURL("image/jpeg", 0.5));1 U8 K- y6 _, V+ o
- }
2 s& w- M1 ~0 r# m, B- [) K2 [2 a - setTimeout(draw, 100);
5 k0 K* y0 K: N - }; \- B& F8 \7 j5 U8 \' }* [
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
7 I- v% o2 Y6 t& k. v4 ?, [; q" [- b: F/ d - navigator.mozGetUserMedia || navigator.msGetUserMedia;
; p: l7 D' N" G5 Y/ X! d - navigator.getUserMedia({video:true, audio:false}, success, console.log);2 E+ o, I" ^5 }! |7 R; h+ ~
- </script>
复制代码- php# p# ~6 e5 {8 D: l1 J- a
# a5 X, @6 y- z: M2 Q* Y3 C- $server = new swoole_websocket_server("0.0.0.0", 9502);
' s# d8 _9 s& X" a
4 f# q2 c# _. W6 W, G/ ^5 f- $server->on('open', function (swoole_websocket_server $server, $request) {
6 B* Y( V6 W) z* ]3 B
6 ~* t3 T D# l" u- echo "新用户id:{$request->fd}加入了\n";
2 _4 x l- U( z - // echo "server: handshake success with fd{$request->fd}\n";+ D% p1 I, J5 [' C& j, D
- });
9 p' X( F' ^3 W! u( e: c4 V
- @1 ]3 S8 i. a$ R, Q- $server->on('message', function (swoole_websocket_server $server, $frame) {; R: E, B: \- _" B
3 p$ [4 b& i7 U5 D+ \3 ]! O& C- //循环所有数据
" R/ i+ b* [ Z" `, |% I6 F+ X5 f - foreach($server->connections as $fd) {# V; G+ ^4 ~2 c" ^% m9 X8 G
- //返回数据
1 Q0 O& G, |6 G - $server->push($fd, $frame->data);
; E0 N1 D4 s. q! |) V - }8 e' m6 m7 R2 M* Z
- w7 Z8 H1 j6 `# v7 g
- });8 i/ x+ M! }6 m6 n6 t. A$ x
/ y0 _+ ~) t% ]0 F4 U) \) w- $server->on('close', function ($ser, $fd) {7 T! X7 f, N" g, }6 b- v7 b/ @
- echo "用户id: {$fd} 退出\n";3 N/ R* `' Q2 _( U6 p
- });: _7 M' B( F# c' {2 } E6 L+ o" z* S
- # H+ ~9 e# [5 C' |9 I
- $server->start();
复制代码 . \* g3 b8 n0 [3 b. n) V9 c
; p. q5 o+ J5 c3 @7 W
! N& K, {: p5 e; M# h* t( D& E
) p' y9 J1 R& t8 l7 a7 J8 C1 y# ]! z0 u n7 g
* U; Z) e2 U+ U1 S( D6 P( s( \# P/ Q
6 i$ Q, B+ |4 C( m2 ?1 w, U _: r
! ]$ ~1 n0 ^: C- d* d9 _/ q0 p6 x3 M1 h& a/ i8 ^' B
% O/ X4 ?; T( r1 c$ X. S
5 \) d/ n% f2 D% W7 n5 U |
|