管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
主要使用 webstocket
: ~4 n3 Q1 q; O& ^, `上代码 前端 观看页面 - <script type="text/javascript">4 W4 t0 }8 r+ g! o% D- I$ Z
- var ws = new WebSocket('ws://192.168.0.150:9502');
1 d" y7 W0 M5 T+ _4 N) L
% f8 r# r/ q8 \: M+ O- ws.onopen = function() {
J6 c- E6 I& \$ k2 {; o$ X1 ^9 {; B - console.log("连接成功");$ Z6 Y0 l# H7 F. }* M3 ~3 d
- };7 u; Y8 r9 I1 |- d2 y
- ws.onmessage = function(e) {
/ K: O% A& O; n2 p$ y - console.log(e);
' K3 C) j$ v9 V/ @1 s
3 I8 b# [8 V3 [/ ]7 F2 S- t- var data = e.data;0 `. F. Z5 |' E9 P/ [ ?
- document.getElementById('player').src=data; \" D0 M7 q9 j- }3 l5 \% t
- }; x8 }4 x# v; w8 b: Z3 r& ]
- ws.onerror = function() {
7 T6 v+ Y' W' j& X% d$ [ - console.log("关闭连接");5 d5 j# X( R& u2 ?
- };
/ m' z4 R2 }* v0 d; r- q - </script>
复制代码录像页面 4 Q+ W1 X) c$ E/ d o2 x4 H
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>0 t( s; u% H9 a; ^6 x, t$ O5 t
- i' k0 O! I, L4 k" T- & _$ y: M7 L1 D3 m, B0 E! L) v
- F q2 o* b9 e i7 W2 r3 V
- <script type="text/javascript" charset="utf-8">9 h7 X: `5 [2 E8 s& [( b
* \6 B/ L+ b' N% }* H-
8 M# O1 c8 _. w6 ] - var socket = new WebSocket('ws://192.168.0.150:9502');
' x/ n: z- r: N, l - //socket.send("嗨我登陆了");) U6 x) m- x: p7 F* u
% l; N7 B% L( ?4 q4 P6 A* N$ }- var back = document.getElementById('output');: h6 U( l; n' |: k4 F" L. f1 I
- var backcontext = back.getContext('2d');! y/ V/ B1 ? b
- var video = document.getElementsByTagName('video')[0];
1 \) V- M( A9 r - : s, t9 X& q; F: y1 ?, s
- var success = function(stream){
5 L2 ?* F5 d: l$ P. Q - video.src = window.URL.createObjectURL(stream);
, l9 z- u p& q/ Y3 }$ d - }0 Y; \, W1 E4 }/ D# x8 ^
- 4 d2 S" j. y4 i
- socket.onopen = function(){
- H6 d2 v! w Y - draw();) @. y R6 L, C1 A0 _: K: _
- }: j, ?; ]9 Z; p! u/ {& P: R% d
" ? o2 P! F. w4 ?& N# s- var draw = function(){" L5 J2 K) O3 X# f- z" C3 [+ v
- try{
- M0 t2 y9 _- y6 l - backcontext.drawImage(video,0,0, back.width, back.height);
- K3 h- G2 ]- j% y6 P1 M+ i* V# F - }catch(e){
/ x. g8 J% @4 S' q3 u/ |+ U - if (e.name == "NS_ERROR_NOT_AVAILABLE") {2 L" N& C: \* d
- return setTimeout(draw, 100);
- t2 |/ a7 s4 n3 g- _/ I7 @+ G - } else {
! j6 _; E( c3 e# k: |/ q" [ - throw e;
* B7 e' L' x5 p1 Z - }
+ h3 f1 @) Q( W - }
6 Y: n) T. \ x" q$ F - if(video.src){8 {) I8 u7 I J9 T5 N
- socket.send(back.toDataURL("image/jpeg", 0.5));* ~ s. L4 U* q: b! P
- }
- I" }& F: t9 R. R* y9 w - setTimeout(draw, 100);
4 ] Z7 b/ H- `; H4 s) l! c. \ - }
! D: c4 C( n7 ~0 y* |: Z& ~ - navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
3 U8 x7 c/ X- v( q, L/ h8 } - navigator.mozGetUserMedia || navigator.msGetUserMedia;
" l, S/ u _3 V& h: U9 I4 p - navigator.getUserMedia({video:true, audio:false}, success, console.log);
3 r+ u+ y. t/ g$ l6 M' S - </script>
复制代码- php2 w/ I+ I" J; Y4 u9 X/ m" S
- 3 O- l0 \/ L/ x& r8 b3 j
- $server = new swoole_websocket_server("0.0.0.0", 9502);2 n9 o5 f. i$ r8 Y5 M
4 u: Y0 x2 k1 x5 m- $server->on('open', function (swoole_websocket_server $server, $request) {( ^5 ^) K' Y* d% b/ V
- 5 ^8 ?. l0 w, o: k
- echo "新用户id:{$request->fd}加入了\n";
0 h/ f, @- U X( i) M& T - // echo "server: handshake success with fd{$request->fd}\n";, y" P; L# m* p/ ]
- });' s. Z1 b( `2 S5 N b# b0 v0 Y# N7 U, G( p
" J! W( d! A4 {' Y7 x- $server->on('message', function (swoole_websocket_server $server, $frame) {9 K- n Y. x& A) m$ G
- ' P) M: W, W+ p
- //循环所有数据
8 K. g& o) V) H& x& k( x, q - foreach($server->connections as $fd) {# o6 \) m4 c4 B' @5 x
- //返回数据
5 U" l W# g- b - $server->push($fd, $frame->data);
/ [& a1 V0 O3 ^$ u1 ]5 x/ h - }+ J$ u/ {, _% u% Q0 Y
6 Q! n! k1 A$ ^: k) O: N" V u9 C- });8 o# I4 z* @! M8 C' W
9 N' M0 Y5 g# l' b! O- $server->on('close', function ($ser, $fd) {
- r$ s# m( E- x* y4 U6 g8 T. z - echo "用户id: {$fd} 退出\n";
8 V5 x; u2 d [: x( i - });& g" X1 \5 b) r& x! Q
- 4 H! |6 J( J% p2 ~8 u) ^2 B
- $server->start();
复制代码 $ r% D0 `: [. ^
7 Q0 F3 F2 j4 _$ b1 A% t; Y8 P
& E' R: o" s- }+ x; D) F
, f7 E0 ?3 |4 R2 A0 r4 o0 v( q* P0 Q" R2 K4 \' Y
& Y( |5 B4 W3 `3 T" O9 Y, H
" Y7 `3 B2 M; c6 J2 r; @. P
/ X) f4 ~0 X" a6 Y! U% o$ U- q: `0 ~9 ^9 A7 i1 R* ~3 B
% l& C) o$ t' k3 G
3 t' W( ]- B/ w- \
4 h. M# b4 a2 z& j8 g, U
|
|