管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
主要使用 webstocket I1 K4 y1 s7 F2 w1 E
上代码 前端 观看页面 - <script type="text/javascript">% g9 Y( h( p/ V$ ~2 |, N
- var ws = new WebSocket('ws://192.168.0.150:9502');
2 o4 r% w k) Y' o( G; g
; M+ S9 [' h4 J0 y# }) N- ws.onopen = function() {
( o$ W5 D6 n% ]6 I) d1 @ - console.log("连接成功");$ H6 {& m' G; A4 ?/ |
- };
( ^- ?' m) f Z- `9 w" y) g+ N - ws.onmessage = function(e) {
; M, h( S8 C; D9 _4 H% t - console.log(e);- [* l* S) M3 o/ j
" B" x8 e7 E' z+ f- var data = e.data;
6 ^8 l" W: J& R# h) ~ - document.getElementById('player').src=data;+ X: d1 J$ \9 D/ e9 ^: X
- };
6 J% l; S* }; [# Z - ws.onerror = function() {2 |. L' x; r$ h: _' ]
- console.log("关闭连接");
" n ]. q e( z/ K - };% Q0 W8 a0 a0 r% @" {; d. \' ]
- </script>
复制代码录像页面
# x$ M6 L; \; z+ I最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>! j7 I& a4 i% N& _9 C
- 8 [1 w2 [ d9 n/ H# d) |8 e
- - r) J" W0 p: `6 j% L/ w# a( n
$ _: D1 M+ C( v$ t( l4 w( t- <script type="text/javascript" charset="utf-8">
; r% t3 m n" @! F
9 O$ h0 L0 L# S. g' l2 C4 y6 f-
& D K& }7 T& T* v0 U- a* ` - var socket = new WebSocket('ws://192.168.0.150:9502');
9 a/ Z* L2 c* K+ h. a1 a - //socket.send("嗨我登陆了");
% D3 a9 z/ h, D2 e8 @4 ^/ T7 E) q
3 G6 _5 R) T+ `" u# b2 W. x- var back = document.getElementById('output');! ^6 W7 t( v. ]- {6 @1 k
- var backcontext = back.getContext('2d');
. P/ c0 ?# H3 L. `- o) I - var video = document.getElementsByTagName('video')[0];9 |" f" K& M6 j& V5 |* ^" p) G" N* e- G* \6 z
- 8 a/ P9 }8 i: R9 S6 Y
- var success = function(stream){3 }% s+ ]2 P, b! E& [& d- s {
- video.src = window.URL.createObjectURL(stream);
9 B# E# b4 H5 D - }6 u u: ~8 C0 Z
- 6 H0 W2 G- c6 H# R
- socket.onopen = function(){
7 ?6 H) m! J% \; |: T8 i! A, k - draw();
' }1 l4 u8 c) D. D7 e* E1 r, s - }7 ~2 D# {1 r) N) G8 c9 a- W* ~5 o1 b
* s1 |% V8 }- }$ ?% {1 d- var draw = function(){! H1 ^3 O/ \5 d" Z3 {
- try{( K$ L$ P" A9 b& I8 G( a
- backcontext.drawImage(video,0,0, back.width, back.height);4 ~3 l5 X1 J, a8 v* P( a) i& X
- }catch(e){
: U7 H8 X0 F; N f2 N - if (e.name == "NS_ERROR_NOT_AVAILABLE") {. B: e4 `: y) {1 P6 F9 \4 x
- return setTimeout(draw, 100);5 F/ s& a$ H. l5 ^
- } else {+ Q- @7 |) ^% B( p U' J3 M: q
- throw e;
' m- C6 ^8 ]+ o) \' w! m/ L - } Y6 K8 i1 D+ H4 ~- L
- }
! R3 j4 Y8 Y* e% t# ^4 s - if(video.src){
) R' c- I& t# ^9 R1 x, C - socket.send(back.toDataURL("image/jpeg", 0.5));
. U6 q& ?! g& k+ n/ k - }
7 S( K5 d1 S+ x - setTimeout(draw, 100);
( k% J; C* u( D8 D! N+ i1 \! C - }: P. M: s$ ~1 [- A
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||+ T+ g- o% G9 ?7 S
- navigator.mozGetUserMedia || navigator.msGetUserMedia;2 o; E# E( i# J
- navigator.getUserMedia({video:true, audio:false}, success, console.log);' U+ J C$ y7 E) K, W
- </script>
复制代码- php
% M- C1 A+ ^, P: ` - : Q6 V; [, ~' p* {
- $server = new swoole_websocket_server("0.0.0.0", 9502);
" G8 |/ ?. L6 u* i! }5 x - 1 C! [) ~- u5 \9 G/ y$ o j9 ]+ S
- $server->on('open', function (swoole_websocket_server $server, $request) {
7 R1 ^, u8 S- J+ M( b - 5 [. L( B- K3 `; o) _* s2 G
- echo "新用户id:{$request->fd}加入了\n";3 n# T+ D9 i; D) Q
- // echo "server: handshake success with fd{$request->fd}\n";
7 m# P3 b, b" t4 g! P& S' y/ V - });; v8 X4 K/ }; \1 A' ^- ?
* ]6 u$ @ o( d7 R& G: X- $server->on('message', function (swoole_websocket_server $server, $frame) {$ {" j0 d1 \5 n$ C6 _( f6 _
- & [. a- \5 l0 S4 j, g; t' y8 t
- //循环所有数据1 @0 A- R6 b' r1 \: L- t
- foreach($server->connections as $fd) {
7 u9 K2 _6 J6 X! n1 e1 c' r - //返回数据$ ~- j4 c) \) `
- $server->push($fd, $frame->data);
8 e0 d; E$ X0 G9 r% T2 ^: T - }& ~ ~, N% h; G/ o1 B
- ) z4 O" q/ l$ e! x$ \
- });! N$ n: c7 ?4 [* g! i1 R
3 e6 |' ?) p$ C4 b- $server->on('close', function ($ser, $fd) {
2 H0 p2 C5 q, ?' Q# T" X! T - echo "用户id: {$fd} 退出\n";& c! B5 K; e: H% l- k5 `1 d- u
- });
2 B1 g, B9 i) u& X - % K9 l; S. R) L, M) s% S7 ?7 k, U
- $server->start();
复制代码 ' K% W& u! a; X/ x8 U0 @
) F: z. ^" v" U9 n1 e( T R" |
' y2 V/ U, K2 m7 ?- f+ f8 _
& K9 w! h: g2 R: i
* k, y! s, t2 l7 K5 y: p V; @/ t
1 Q# x+ g1 v/ e& ^$ O" R7 K3 F' z( P" C: w* r
; @ ]$ O$ E; L$ d
2 H# c3 T6 ]8 X% U5 x
! m0 C' H. q& C8 q7 L4 \: B1 `0 R
: V6 i5 c# a; G
3 g9 X w6 A: ^. a) T |
|