管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
主要使用 webstocket
% L5 [/ O. N1 ^9 P6 K. N) g上代码 前端 观看页面 - <script type="text/javascript">( ?$ Y' C; R4 A8 I, k- d( w. d1 q
- var ws = new WebSocket('ws://192.168.0.150:9502');: ]( \0 R( X" x+ a7 |
6 Y a% U4 f3 ~0 M+ H$ ]* v- ws.onopen = function() {& x) s" x$ Z) v& x2 a
- console.log("连接成功");
2 _3 b# |. g6 d9 F1 n - };& f+ T$ u; C3 b0 P- u
- ws.onmessage = function(e) {
) g5 B0 F5 b2 W - console.log(e);
1 z, f( a. L2 ^+ t - % N' @2 Z& W9 V5 _3 W+ L& i& G* d
- var data = e.data;
5 c0 e ^- k% l2 z" r - document.getElementById('player').src=data;
* B0 O2 J& }: ?% _) ]; Y1 O - };
9 v) i$ V4 k9 r - ws.onerror = function() {! h$ o+ a0 ~( }
- console.log("关闭连接");1 p0 t; } [2 {+ l& F
- };
: j* ~# H9 b* L( L+ d2 F5 p - </script>
复制代码录像页面 0 i0 I( \5 \8 J6 c$ A( d! z' s Z
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>! t' I0 q: T2 C/ n
- . y8 r y; V1 [( g) ?: R; v& W
5 I; M# R9 O5 L3 [3 q
2 f0 P# Z2 X; n- <script type="text/javascript" charset="utf-8">/ ^( `( q1 u! O3 ~, P8 C9 [
- + |; }/ s1 Z* }9 `) Y" X
-
' z* O3 l4 |% N& z- }+ W - var socket = new WebSocket('ws://192.168.0.150:9502');& w* E3 ?* [# a4 g& [! P5 `
- //socket.send("嗨我登陆了");6 l( s. e) f& H1 d. f
- 0 Z/ a k5 J1 {3 j5 x: x* Q
- var back = document.getElementById('output');+ r( x3 w! J0 Z6 D
- var backcontext = back.getContext('2d');
- g- h7 k* a+ y P, m% Q K - var video = document.getElementsByTagName('video')[0];0 A& }& J4 t& j+ I h
-
4 n/ _2 C3 e2 y1 T& W2 o - var success = function(stream){$ w0 B1 S. P, `! ~6 L$ N0 Q
- video.src = window.URL.createObjectURL(stream);! P7 y) N2 \, B- i% D5 t2 H5 z, c
- }! a7 M7 ]" w1 P3 z
- . d! Y0 Y+ Q7 E- K1 Q, L6 {
- socket.onopen = function(){
+ ]1 ?4 V- ^) e - draw();5 r0 @8 ?$ v5 N2 [
- }/ y; N a' I n& A, W" d. L: p7 Y
. y7 V- @) c W+ z1 X0 T- l- var draw = function(){
2 x3 Q5 i$ t! ~- g3 l V - try{
$ b3 A4 G) U/ }* @ - backcontext.drawImage(video,0,0, back.width, back.height);: [) R, O) J8 y5 D/ z3 q! `, ^
- }catch(e){# q$ N' G& D% L- \/ w& B* R }0 J
- if (e.name == "NS_ERROR_NOT_AVAILABLE") {2 m w0 q# L1 A) G
- return setTimeout(draw, 100);$ {* N' f; q' V3 W T: B3 q
- } else {
2 L# P$ J* B# O$ S7 r G+ j - throw e;' b4 Y9 j+ }% H. \5 ~# ~
- }, o+ \9 ], c+ P( _
- }
0 {: u# P7 [1 g2 X - if(video.src){
* O" G8 M7 K" t& h7 t+ e9 ~% P - socket.send(back.toDataURL("image/jpeg", 0.5));
. f' m2 D& B8 L9 v - }7 T3 v9 O0 R* G
- setTimeout(draw, 100);
d* v. {# w9 X - }0 P+ U& `7 L% C& q+ P! k1 r( q' r& }) I
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||2 c6 @# B+ L7 u1 u" [9 o9 i
- navigator.mozGetUserMedia || navigator.msGetUserMedia;
- S/ T6 h# b, n, j$ ~7 G. y - navigator.getUserMedia({video:true, audio:false}, success, console.log);; n6 G& R1 B: V' o L' k9 @' @
- </script>
复制代码- php# C( s7 z& n" E2 V+ L& N- T- k+ e
$ w" F9 |* T. }6 w; U- $server = new swoole_websocket_server("0.0.0.0", 9502);
, w6 ~/ ?, J! m9 I2 g1 ]
+ U' {, S0 _0 Y) s8 h- $server->on('open', function (swoole_websocket_server $server, $request) {
* B: Y( c1 K0 W8 E' i& M( ? - / }; K6 z+ B# E& y2 W
- echo "新用户id:{$request->fd}加入了\n";# f4 t9 o& h) e- w& N: Z ?% z0 X
- // echo "server: handshake success with fd{$request->fd}\n";0 o. b' O+ G' `- z; I( {2 u
- });
; Q0 M7 A* x1 y0 l4 e% y: u2 H9 {; w - 6 g; q7 ?0 O+ U4 T/ ~
- $server->on('message', function (swoole_websocket_server $server, $frame) {/ e$ s7 S8 A) D3 Z8 |
- 9 c+ v* }+ P+ ?- D: a* R! l( x
- //循环所有数据
9 Q% F5 M" g5 E - foreach($server->connections as $fd) {
; g( U# T) D: Q% h$ \2 H1 G - //返回数据
. x3 M: M! Q: Z3 {; @1 ^6 r' k$ L! N - $server->push($fd, $frame->data);" L* `- y3 r6 v8 w9 l$ b
- }& d+ G# `: D- R% l
- * x( O& F" k% _5 e) e
- });( [1 v/ \: V* s( I
- 6 ~; A% } D1 k e& b1 g6 P$ M8 m
- $server->on('close', function ($ser, $fd) {
* p5 q: ^' C m! n' P - echo "用户id: {$fd} 退出\n";
# Q5 u/ ~) W& m( t4 J# O - });
' V( M) G3 H; X4 R+ ^ - - m+ d+ @1 d2 ~, b
- $server->start();
复制代码
# ~3 z1 d: t* a7 L; K0 N3 h% n4 h e# f& S8 ?- k
. }. a g1 B, t+ e1 i
+ H4 e5 V3 [! t3 `7 h
: o4 P& k$ ^, u- ]$ a. l4 H) N2 @% J( n8 @
+ X T. U; L v( Q% M% j% S. a- g* n* r
- ?, o7 K* l/ H3 F6 w; B( D4 l* d# @0 h$ ^
3 l ?! B4 J8 n; f G* N' ^- z3 d/ X) r4 K W
3 U4 L4 U' d: E
|
|