管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
主要使用 webstocket/ O5 E4 J+ q" a$ e P) R4 [ ?
上代码 前端 观看页面 - <script type="text/javascript">5 @* \! _; V8 Z# \6 E, C
- var ws = new WebSocket('ws://192.168.0.150:9502');! u7 g$ [& y/ p! Z* W, _
- " a! M4 B% K+ L! ?8 T
- ws.onopen = function() {# S8 j. G6 X m( ]: }8 V& q9 j
- console.log("连接成功");
# i; _+ B# X, u% \; T - };/ @2 W6 j" r( C9 x X
- ws.onmessage = function(e) {! W7 H6 [/ h0 W* l! l3 c! @; ]
- console.log(e);
$ j9 b% i0 I1 r - + C7 f; {! c# @ G5 w, }; G( O( P
- var data = e.data;' L0 c) W- H8 v, S1 W& L, e2 z/ D
- document.getElementById('player').src=data;
, L$ x+ N. h, e. c- f - };# c) k: Z& R, M$ m. U& h
- ws.onerror = function() {* j! B( [2 `: G
- console.log("关闭连接");
, E5 ?7 E# B+ K9 ~' a - };: s6 a, Z( g( V( U# Z
- </script>
复制代码录像页面 $ o- `0 R" O# A# z* f$ K
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>* W- Y) x- o8 `1 N1 {) z" E
- * d6 i4 Q4 }% ]0 |( C
" B9 l& Y3 Y6 F. }+ _
. `) `6 @ t/ [: ~: Q4 Z* M- <script type="text/javascript" charset="utf-8">
+ [8 e( }4 v' b* s
$ y$ g0 p6 F/ U+ [-
3 w/ n: V) E, u4 O, l; e! P - var socket = new WebSocket('ws://192.168.0.150:9502');) X! Q$ B7 E4 \3 z l9 Z; i
- //socket.send("嗨我登陆了");
! \4 g. i; f+ H& A* q - ( k# Q/ y& i5 M' d- a" e
- var back = document.getElementById('output');9 u9 E9 |& C4 O0 A1 ], F
- var backcontext = back.getContext('2d');
3 t% R' ~5 t) w5 b+ q! r - var video = document.getElementsByTagName('video')[0];
' M$ n d! {8 z6 k9 w - # l/ m4 n% w' |: ^$ U, A: b
- var success = function(stream){2 P) [8 D8 i: o" Z. U4 G: H
- video.src = window.URL.createObjectURL(stream);' r' ~& E) Z S% C
- }
- M- x( B! P9 f/ ?* C2 m - 9 U$ K8 [, f5 O* f2 b! r
- socket.onopen = function(){$ ]( @4 e% H. @
- draw();
! s' N Y& V0 k$ x/ V0 j - }# m* a M! W& q5 C
- / ]& k* i* E! q7 T$ \
- var draw = function(){
' B& L2 S+ c7 o+ v0 f1 V' y! n6 N7 s - try{) {: r' W o$ w3 i
- backcontext.drawImage(video,0,0, back.width, back.height);
* \) r$ R3 L; B( K" m - }catch(e){
% C% q/ o) s$ I1 a1 y - if (e.name == "NS_ERROR_NOT_AVAILABLE") {
2 I* O2 p* x$ v. G$ k* B' { - return setTimeout(draw, 100);
5 B: w% [8 `" y2 Q U - } else {
' D& a/ m h' m1 [4 o3 _' m4 f4 g& t - throw e;5 P C( Q& o, \* @" d4 K0 [0 e
- }5 g$ ]) H9 N. w* B. l. u& M# S
- }# \" E( ]- y) `5 X
- if(video.src){7 Z, f: F& Q" h8 m& P
- socket.send(back.toDataURL("image/jpeg", 0.5));
( U5 ?- E% h, @& S - }# |: L* N Q! R4 M! e1 R
- setTimeout(draw, 100);: f; R/ p/ [- g" w C: W
- }
' f2 K1 b1 |* _9 M - navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
2 A0 ^/ a- y7 S! `. G - navigator.mozGetUserMedia || navigator.msGetUserMedia;# y! J' b. i! J l R
- navigator.getUserMedia({video:true, audio:false}, success, console.log);
. @( y+ k! T2 a1 m( D# j - </script>
复制代码- php4 O, e. g) r1 \$ z4 w$ C% G
$ t1 c! \" x9 H. I1 q* B- $server = new swoole_websocket_server("0.0.0.0", 9502);
. @/ m# f* t$ |2 j$ U
9 z- a6 R2 J& Q- $server->on('open', function (swoole_websocket_server $server, $request) {
" `# M1 e$ x7 l9 v; `& [
/ ~; j) D: F% C+ B' v5 P- echo "新用户id:{$request->fd}加入了\n";
8 P" Z7 ]1 x0 i* \; l! m1 ] - // echo "server: handshake success with fd{$request->fd}\n";5 U9 b! ]5 _+ a6 j3 ?; N5 y5 I
- });
7 c9 p5 ~; K' k* Z6 p- {- }, o7 `
; b- s+ `* N, ]; k6 C- $server->on('message', function (swoole_websocket_server $server, $frame) {+ q2 C6 u t' p e. v1 r5 K
( L6 u9 n+ c; [3 X# N0 N$ `- //循环所有数据
' @' m2 l! a" f - foreach($server->connections as $fd) { `, M7 t* j! \% O: a
- //返回数据1 }+ o0 O: |% v/ _* P$ o) c% a
- $server->push($fd, $frame->data);
5 ?( N4 p# c0 d% T - }
$ U4 F% r! W z S! ^2 w - ' J! o3 ?- D% e5 Y5 C1 N5 j
- });
3 z- y' } e B. \8 t; i- F! _
4 I" e% M; {& V5 C4 u- $server->on('close', function ($ser, $fd) {" A) j2 ?- |% ?" P! \3 ]8 s
- echo "用户id: {$fd} 退出\n";$ N' F# j, [( F6 v
- });. @) e& u# z2 y. z3 @8 q) Q
6 f2 S* U' X: S$ ^- $server->start();
复制代码
( c: m# R( A# Q1 }: g0 `5 u# ]1 T$ ?, m3 }4 {
- Q9 ~: C8 Y, `
2 [& f) k" P, Z" M) i/ p1 s! C( j6 h
! N; F( G7 ?8 o4 N* M# x( h1 i+ N5 v; E' H8 k8 n8 Y$ Z. v" R
) ?# r# B2 G: d' V! F1 y/ X6 c0 k
3 n4 G7 v; F1 g- `( g, A; Z
: k+ ^5 C0 W1 K
1 a: ^' t2 e& I4 D2 V0 N% H8 n% w7 F0 N1 x. w. n v
|
|