管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
主要使用 webstocket
, Z. g X _ |1 l+ g上代码 前端 观看页面 - <script type="text/javascript">
8 \! ]2 C, H6 V4 T m5 F$ @3 ^" G - var ws = new WebSocket('ws://192.168.0.150:9502');- a2 ?1 s# [: M0 x2 _
- 5 Y$ E3 \. U1 y. \* O
- ws.onopen = function() {/ ]# |+ s, q/ S
- console.log("连接成功");
, }6 ^# v- _6 O- x - };! }1 ?2 u2 J7 G7 P( y8 Q
- ws.onmessage = function(e) {
* P5 ^* @" K; e4 p o% z" ^& I - console.log(e);
) y d, t3 e; `& l9 v4 j" S
2 B" C% V8 i" E- S3 d- var data = e.data;$ x5 D9 N5 M/ w! S
- document.getElementById('player').src=data;
& W/ `4 Q; S. C3 t4 w - };
" V! G3 i" ~% E: N& H - ws.onerror = function() {
% v6 X0 O: N# j$ k! i( D! y0 b4 B. ? - console.log("关闭连接");
- M1 m2 i' f/ C( F - };
" g/ |& t* S( H" J7 G6 }4 e' {! v - </script>
复制代码录像页面
8 K' u; S# N" _最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>$ z# F7 }3 Q6 N- C4 a1 ]# h7 q
- 5 {2 B% Q( L$ T4 N z$ D; a5 \- n
- 8 U. ^2 P3 G2 r1 X
0 B) B+ Y' Q3 e1 d3 g: u- <script type="text/javascript" charset="utf-8">4 A: j% O4 d3 Z0 d! @! H
$ J* f4 P2 h% L3 U. C5 S- # z# G4 Q5 B1 C7 z4 [ D- j5 L
- var socket = new WebSocket('ws://192.168.0.150:9502');9 C9 ^. X0 c0 [4 {* ?
- //socket.send("嗨我登陆了");2 R7 B6 e$ w0 K/ v5 Q+ V
; P; g) u6 }. h6 m: K- N0 z- var back = document.getElementById('output');
0 a2 }7 i- \. b, f& L - var backcontext = back.getContext('2d');
2 C* C6 `9 q v0 v - var video = document.getElementsByTagName('video')[0];
- G8 u q; P$ l" |$ {" i+ M3 ] ~+ H -
5 o) h5 h; g& Y- S t6 C& M$ z$ ? - var success = function(stream){, @( A- b4 e; ?$ r1 q, G
- video.src = window.URL.createObjectURL(stream);
2 n% @/ ~" x' U: T5 Y2 K U# _7 E% s - }
" T6 r: @: C7 [6 F6 q1 D
7 y+ [" F. F% v/ N" T5 X( a4 L- socket.onopen = function(){
8 `8 N0 r, Z3 c/ ^ - draw();2 f7 R% b5 u& O) J4 I( n. z2 D
- }/ N* D A9 h% n/ |2 n( F5 \
- 9 _$ W6 W/ ]1 B, H5 f
- var draw = function(){
! J3 o- L9 D) ^$ S+ e( f% t - try{ A P& k+ x, `# ?; t& d4 [: c
- backcontext.drawImage(video,0,0, back.width, back.height);
( T) H" r$ ]$ |0 u - }catch(e){* {, D# L' w* ?3 C
- if (e.name == "NS_ERROR_NOT_AVAILABLE") {
5 Y# U7 j% d: p - return setTimeout(draw, 100);
6 B3 V( _1 S% j- D d1 |0 p# @' z& _ - } else {
" ~4 w' N( v8 y1 g - throw e;3 ` B( H, J& }( n N/ ]( z
- }. n( ?$ M3 k# o
- }9 e$ L7 m4 l' X r' \3 u
- if(video.src){
+ `& X( c0 B! K - socket.send(back.toDataURL("image/jpeg", 0.5));* R& A* W- F7 G7 O- ?
- }
! `! w' |7 u- t; ]2 q - setTimeout(draw, 100);5 }4 N/ p& G+ n# R$ Y7 s
- }, n3 [9 {9 j! e4 w# ~5 }$ ], Z
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
, G# n' P2 N0 m- ]4 C - navigator.mozGetUserMedia || navigator.msGetUserMedia;
1 o- w# y6 @# s& j) j2 r/ m5 p2 i# N - navigator.getUserMedia({video:true, audio:false}, success, console.log);
; V, `, C) v( r8 [ - </script>
复制代码- php
( x) j" b Z8 C
) B3 Y) c9 F4 a2 f5 e- $server = new swoole_websocket_server("0.0.0.0", 9502);
( M' Y q) L2 \9 W. [0 B' O - 3 c$ U5 J( p' ]' K% g4 x; A- w
- $server->on('open', function (swoole_websocket_server $server, $request) { c% d+ `/ g* O( R/ P! w' j! l
- 0 r: ~ X' F. H& H8 _$ r
- echo "新用户id:{$request->fd}加入了\n";! l8 \! M9 l( a
- // echo "server: handshake success with fd{$request->fd}\n";
* r9 A' c' r e+ W( f$ Z+ v, l - });$ ~, T. M2 O) f: x$ X
/ Z0 ?0 i+ A- Z0 m! @9 s7 N$ _- $server->on('message', function (swoole_websocket_server $server, $frame) {. Y. t' q# j. n- Q
- $ }9 H' @) y0 _1 G
- //循环所有数据6 t9 T( R4 f* _! v" M) l
- foreach($server->connections as $fd) {
0 I6 F4 k& ~3 b8 T - //返回数据
7 y% _9 f$ b$ f$ r8 y( ] - $server->push($fd, $frame->data);9 A* @% O- Z/ L" |) d3 g8 ~
- }. }; K1 Q, b- D* o: t5 U, x7 c
6 K% b; Z6 N `' J1 o. a- });5 f& p# `7 j9 [: P- I
- - E) A6 _, ^3 c: M5 W" K
- $server->on('close', function ($ser, $fd) {
; a, v) A0 x5 R* V P - echo "用户id: {$fd} 退出\n";1 Z5 {8 }0 m/ a
- });+ K; Z+ {2 q! U
- % e1 b9 _7 b8 S' M+ ?
- $server->start();
复制代码
* n! L* k: M! v" a; u. j
7 C) s- u* q" X* {, |
# T. r4 u5 B; n& ?) @1 g2 [/ I, H+ }% U2 m% v+ [
4 f. C n# o9 I: T* Z) q1 R( c
, s. L5 H- D( r% X7 i7 P1 z {6 D. y d& e% r% ]
9 J# q9 B; B' A% u ? ?
$ o' }! i0 t, j" W/ E9 e, ], Q0 t
, N# y6 R; v8 T( K# C$ N( o9 U+ W4 |$ E9 \8 O9 R$ |" z* g' [* a' N
8 m$ g% q8 l% z( Z5 O |
|