管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
主要使用 webstocket
! u; d( a8 i8 i8 z! t5 D, F上代码 前端 观看页面 - <script type="text/javascript">
M+ T& b& p3 h - var ws = new WebSocket('ws://192.168.0.150:9502');
6 @2 w( c5 p1 g( S. V) a( ^% F8 q) ? - % @: J0 J; h" L" T4 F% m p
- ws.onopen = function() {: B6 w( m' \9 }2 H, y/ W
- console.log("连接成功");
+ L. y9 Q f" N" |* |/ U/ U - };7 A, N' O3 c; N; K6 Y
- ws.onmessage = function(e) {
/ l) X+ c9 i' P4 o' a - console.log(e);0 I% \* k+ R8 G% {2 ?
8 ] R1 f* ]8 P/ g- var data = e.data;7 j- t+ r1 {: ]8 I) L
- document.getElementById('player').src=data;! A' O/ g9 ^3 G3 Q( M. l1 B
- };
" |: T9 s5 Z/ }! k; }" C) N - ws.onerror = function() {$ ?; ]3 M* p6 `) I
- console.log("关闭连接");
: R2 s" D6 q0 n( z4 a - };9 m) W) R; x9 X9 U# K3 U
- </script>
复制代码录像页面 % l/ S% g7 S* A. n
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>
" K/ c7 I& o' J7 ]/ Y" E
, n* R5 I! Y" X( Q, M7 |) t- $ Y* _3 n7 h4 e6 f1 _3 H7 u6 h
- # u. R- H% A2 ?3 J0 ]0 u, Y1 ^
- <script type="text/javascript" charset="utf-8"># P. ]& X; X. }% o. |
- Y6 N4 z" F. \3 g3 `* [
- ( l" T L7 X$ ~9 k& Y
- var socket = new WebSocket('ws://192.168.0.150:9502');# T0 } s {3 X7 O! _
- //socket.send("嗨我登陆了");3 {& V7 g( A4 {8 ?3 H
- 0 i6 d( y8 E; T# z4 G/ l& V
- var back = document.getElementById('output');% t; v) h! r9 Q: u. w
- var backcontext = back.getContext('2d');
, A" N( P5 U1 _6 q& y - var video = document.getElementsByTagName('video')[0];
& L% [0 T9 e+ I, P, Y -
" l1 j4 H& B9 x6 X7 g/ k v - var success = function(stream){
+ ?3 U: _4 Z3 ]" R - video.src = window.URL.createObjectURL(stream);' q/ V; z/ p+ L8 J$ N! e
- }
+ h. \3 ~1 ^# Q+ A( X$ j: k! s - 9 E. y" d j/ o, Z
- socket.onopen = function(){
5 l' f4 [: M& t - draw(); t- N+ h; a7 g! [! g% b3 D8 v* E
- }
$ q. X" r1 H: P5 n) k' a% S
3 d" \" g0 U7 q* b) E; T+ ^- var draw = function(){3 F% J/ J% C% c- A- S' S
- try{" g* _, E2 l4 `. h9 E1 T0 |- G( k
- backcontext.drawImage(video,0,0, back.width, back.height);
, r( s+ b0 H6 J - }catch(e){
4 M* F: L% X( A$ H - if (e.name == "NS_ERROR_NOT_AVAILABLE") {: L: L* o1 p9 d+ t2 C
- return setTimeout(draw, 100);- D4 F9 s+ w8 w }. Y: {
- } else {# _5 Z2 k# S0 L' e: K! ~* [# i
- throw e;$ ~7 k" w6 c' R
- }
/ o! m6 _( u) q7 j - }( @4 j! Z. G! K, P% D& p$ T
- if(video.src){
* |& }" v3 B$ o' \ - socket.send(back.toDataURL("image/jpeg", 0.5));
4 k9 j% I& I8 L; G; A# } - }
o7 z) G7 f9 C& ]; M& m# ?$ f b/ v - setTimeout(draw, 100);
' B- D( ]7 n8 w" m - }: u6 h9 Z: I1 V
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
8 G8 u2 J: e" M: Z f+ I4 {" O - navigator.mozGetUserMedia || navigator.msGetUserMedia;
. {; i; j/ d# G7 m - navigator.getUserMedia({video:true, audio:false}, success, console.log);
- k' R9 T2 o3 { - </script>
复制代码- php% J& I/ V$ |9 n4 F" U- g
- ( q$ ~9 [7 V' C; O( }/ }
- $server = new swoole_websocket_server("0.0.0.0", 9502);
C5 [; k( W$ ~9 g& [9 X - 2 }) d* q( z9 G# c2 L
- $server->on('open', function (swoole_websocket_server $server, $request) {! }: g# y- a) N5 m7 }9 e
- 3 l$ z6 n6 M9 I3 k
- echo "新用户id:{$request->fd}加入了\n";5 e5 b! u- j4 @
- // echo "server: handshake success with fd{$request->fd}\n";' x0 V8 `, }/ a M) {2 }
- });
0 F& |3 G! c( r$ T! X! p. c
: j7 h4 |3 b( d- $server->on('message', function (swoole_websocket_server $server, $frame) {
m* W; d9 c$ ~- {
9 @+ r/ |' F" i! ~- //循环所有数据
+ d. H7 V/ s1 u6 a - foreach($server->connections as $fd) {
. y7 f- |2 I5 J# J - //返回数据
: x/ e% c' n5 R, T7 R - $server->push($fd, $frame->data);
( z. l5 T) `: f& p - }
7 u' w/ [& n& j/ J8 y( ]8 f
1 t! S# t) y5 p& v2 L. f- });
3 m' l$ A& X# P - ; l! U o& K; E( {) X) G0 D
- $server->on('close', function ($ser, $fd) {1 f! y* F! o9 q; B# T/ z" d9 h
- echo "用户id: {$fd} 退出\n";
: X3 g. Q% E: l2 j - });8 Q( ?& Z6 a! m! B+ ^
2 N. h1 r' O* l8 o+ w( v9 v- $server->start();
复制代码
) u! P! o$ L4 K' b) u/ p9 w/ o5 U* M( w" g7 u, {
3 \/ n% Q, b" [. X6 _
$ z. z. v/ W: u5 S1 @; |# J7 T8 A. E7 G2 F( O$ m5 l1 z( u
7 w. L2 h5 |) r3 f3 P+ `5 F6 N, X
9 H, O" k2 G- ~+ O" v4 R: ?8 X5 E6 r/ x
' w* R/ b( j& H7 x4 I
. N: a5 o* q9 ^" c
$ F# y2 c, ~7 L; Y5 C0 f
8 a* H& k9 h# I* P |
|