管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
主要使用 webstocket
* \, K2 B( i3 E/ e9 v3 M- z. w上代码 前端 观看页面 - <script type="text/javascript">9 { t! w/ F' [
- var ws = new WebSocket('ws://192.168.0.150:9502');
3 h1 |) o% u# O9 j. l5 w/ W
9 Q! D4 \6 N% o* u& I. h, K6 r. d- ws.onopen = function() {- s9 p( ?8 m* ? o8 Q- ~, X3 ]( i0 }
- console.log("连接成功");0 T8 D- a$ L$ o b: w* A- h
- };( u! r7 G( b' t3 |
- ws.onmessage = function(e) {
2 I8 r- |+ b1 H7 U5 j, F8 W# t - console.log(e);
. L- W- j- {2 x c* p1 r1 I
$ r. Q4 s& j, |9 E3 n! p/ J- var data = e.data;
/ ?' N& t# w: `7 ` - document.getElementById('player').src=data;
8 h2 g. p. Y4 i6 `6 b! l - };
$ c6 k" o, E* }' T/ C - ws.onerror = function() {
" L+ l& g* t1 o1 U" Q - console.log("关闭连接");4 w v1 z _& h$ o; n3 P7 @7 A
- };$ e! R% j5 }2 Z7 K1 z6 \; ~7 E
- </script>
复制代码录像页面 3 e% \ p0 a4 a9 J
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas> x6 y; N3 P2 L) n, A$ ^
- 4 X. ]) F8 e: d$ Q$ x' [
7 y8 M9 G& S: x4 z- 3 \4 _6 p& ?' W" s4 ~% R
- <script type="text/javascript" charset="utf-8">! h9 a* }7 \, O1 r3 [# M7 e) u
- % q5 o' C" }$ F3 D
- 4 u. c2 N, G4 [$ B7 U3 S
- var socket = new WebSocket('ws://192.168.0.150:9502');0 x4 I/ [ h; b# T
- //socket.send("嗨我登陆了");
0 v$ I& f5 ? v s0 l( m - 2 j% ]; _+ h# d8 f5 P
- var back = document.getElementById('output');5 h" z3 {7 c9 g$ z! G
- var backcontext = back.getContext('2d');! B" D- m# n8 B- C% m! `
- var video = document.getElementsByTagName('video')[0];8 l# @' _' W1 b% _! g
- & @: I* X, m+ {& p/ N9 ~ C0 K" l3 N
- var success = function(stream){
! M, |* }) H- R3 I: [* {! L# C - video.src = window.URL.createObjectURL(stream);
( U6 U8 Z; `9 S+ O4 O+ ?) G - }8 h5 a) x$ [! C
7 C% V) I5 I+ X6 P3 g4 L- socket.onopen = function(){0 K0 H9 \7 w' a# M, Y2 x2 r
- draw();
4 g9 q' L9 d) B - }( G' H) s e# D) Z, d
: s; p. } @8 `, M, b- var draw = function(){
7 A( r+ G4 {3 t7 h% ]. `5 Z! ~ - try{1 e$ m" ?, G, G- V
- backcontext.drawImage(video,0,0, back.width, back.height);$ H+ d6 S. z+ m/ l) }, f
- }catch(e){' I8 u& U% I. ?0 {7 C
- if (e.name == "NS_ERROR_NOT_AVAILABLE") {( U6 q: _4 u- e9 h" A$ p+ O
- return setTimeout(draw, 100);0 A: Y/ s5 Y5 j
- } else {, H# h; f: o5 M n
- throw e;
# I$ w2 l$ I( R( d - }
8 R% Q/ N" i# Z4 u4 E. _9 f. `# G8 c. Q - }
! R* V1 y( V+ A/ s: e - if(video.src){
& g, }' t4 L0 F - socket.send(back.toDataURL("image/jpeg", 0.5));! g( D: l! z5 \$ J' d
- }5 @/ j4 M+ m- \4 P: a
- setTimeout(draw, 100);
1 ~; h& \5 N7 E - }2 v& r6 r3 t& e
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||0 W: H9 D: o# S Y1 `
- navigator.mozGetUserMedia || navigator.msGetUserMedia;/ k% i! V$ g5 @4 D# v
- navigator.getUserMedia({video:true, audio:false}, success, console.log);
& G. Y9 w9 q( j& \4 @. Z - </script>
复制代码- php( n, L7 z. K" ?5 T# x8 B
6 d8 z' }7 H8 h% a! Q- $server = new swoole_websocket_server("0.0.0.0", 9502);/ s e g* e7 W- @" w) X- {
1 H6 M, g( Y4 | v- $server->on('open', function (swoole_websocket_server $server, $request) {
2 C& f( ~5 d( t7 B0 i - k' [" G, u; r7 A& P
- echo "新用户id:{$request->fd}加入了\n";
. [3 S* v' u; S, J, E1 d i/ x& L - // echo "server: handshake success with fd{$request->fd}\n";
' }( h. w# h v, L - });; v2 K$ U- f9 b: B D
- 5 o7 `' S6 N* }
- $server->on('message', function (swoole_websocket_server $server, $frame) {
7 z& p- ?, c9 P8 v# C
8 H( M6 r, n3 S- //循环所有数据) `- D' ?; M: G' a2 f. t. d' o
- foreach($server->connections as $fd) {* y* b) [# g2 s9 |$ c1 i! s; d
- //返回数据6 h i7 T+ g# t
- $server->push($fd, $frame->data);
3 v: V r# D: e6 [$ E4 ]; w - }
: W ]2 ~/ h" \! |; q1 Y- m% P
y( U- T. B+ R1 L: F9 V: k: i- });/ P$ C; i+ ], G9 ] j
- 2 Z7 ^8 v# e$ K4 W, u7 c! q3 Q, H& J
- $server->on('close', function ($ser, $fd) {# o0 e5 E4 T: d9 T$ x
- echo "用户id: {$fd} 退出\n";
' }2 ]9 k1 n+ J$ P8 s/ l/ \ - });& m' x6 t; o2 {% w
- & r: z) A Q5 j6 u! Y# G% v
- $server->start();
复制代码 6 E; I1 A0 g1 f9 R4 u
% B/ L1 f/ K% I/ D/ Z
& F: S+ p+ r. m7 h3 p# J6 ]+ f2 R& {0 |* E. P
3 q! ]- G: c. x1 f
# y: T3 M; O/ R1 y9 k4 U e8 }3 ~" e! V2 G# r4 w- H
# ~& p8 w( U8 Z( ]
@ H3 D, s8 z% X$ M- ^
' b0 s+ @$ I2 f9 G Q4 U# B1 x0 R- p, J) ~% x; w; {; d4 C [
& ?" r& g# y& f' q4 E6 K |
|