管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
主要使用 webstocket
9 _. W" U) B$ ~4 U6 G上代码 前端 观看页面 - <script type="text/javascript">
! a* e: @* o, Z% ~4 y - var ws = new WebSocket('ws://192.168.0.150:9502');
, S8 Y! }& R6 y - 5 s: @1 Z/ U$ |0 M6 u
- ws.onopen = function() {
/ r f0 o" @. F/ X1 I/ S/ S - console.log("连接成功");
) J j' r8 y" ~+ ^ - };* d9 i; v0 w) \7 Q6 g' t1 V
- ws.onmessage = function(e) {1 |7 d/ \: C+ l8 O
- console.log(e);& R# c! a; P- W" K# U6 V+ i g6 `
- I x; T: `: P. k$ H/ L- var data = e.data;% ^+ P: y3 ?, a W/ B0 q' S l U
- document.getElementById('player').src=data;
& \& [1 ?8 Y( B+ Z: O. G, Q - };
( e' }6 W3 q- H7 s: L; F Q - ws.onerror = function() {% Q' t, u |1 D* E& _+ U' l; M( c
- console.log("关闭连接");. ~7 }# u) y( R5 O. P. J3 L3 G. P
- };, r4 l/ Y, s4 Q1 K
- </script>
复制代码录像页面
' z: B9 ?# m7 P0 p G# Q4 n, p' S# \最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>* y4 h7 m p# {) r% L$ s% v, c
- `7 N `" J3 Z" i! J
4 i2 Z6 w- |0 O" M- ) L `* ^& N, A3 F
- <script type="text/javascript" charset="utf-8">7 ?( T4 A0 m+ i4 \2 L# P* M
! ^* i2 O: C1 P6 \( B! T-
l5 Q7 p- r$ i - var socket = new WebSocket('ws://192.168.0.150:9502');
% N) R; X1 Y4 a9 \; j; l* B* h- R - //socket.send("嗨我登陆了");; `) M; y. Q" g \* p
& x" ? S9 T2 u# V, F+ T: {- var back = document.getElementById('output');
9 F$ `0 y( A1 o+ u - var backcontext = back.getContext('2d');
, s, w @' l: {, l - var video = document.getElementsByTagName('video')[0];
) C7 W/ [0 z& @" s8 ~. _ - * B7 B3 A6 X4 q1 |" p! D i; K
- var success = function(stream){
; C4 m3 j( i C' ~9 y4 D2 r - video.src = window.URL.createObjectURL(stream);
' }5 q3 @6 R2 x% M" g7 R, J - }6 j h( D7 _& Y, S' A. A6 E
- z$ ^( d* B C( k$ Z: x6 ~
- socket.onopen = function(){: W! h3 @$ @" P% t$ a5 n9 D) o' U
- draw();
( P) c$ t1 T. b j+ \- K# R7 k$ A5 ? - }; R- a/ r, S0 D, `; K+ f3 k! g
- . |# q, _" f( k3 D6 V: s% }5 h
- var draw = function(){1 Q% t- Z- `2 h: B9 ^8 F: o$ d
- try{
/ q. J; s' m! |: G( n! l( o - backcontext.drawImage(video,0,0, back.width, back.height);
5 `/ R1 v3 Z7 O4 I - }catch(e){
: d, L1 L7 W2 n, G - if (e.name == "NS_ERROR_NOT_AVAILABLE") {
6 l( t; |) v d) `, N, C6 ] - return setTimeout(draw, 100);
, D/ Q0 z3 P2 v3 f - } else {
: Y* t1 m R6 S - throw e;: g% X3 M, k0 z A! T: s
- }. ` P' C; T! T" o3 h z: o
- }+ O! p$ j: L0 p+ {4 M3 K; v. @
- if(video.src){4 e1 c. M1 H3 _' }) `* z; E4 j
- socket.send(back.toDataURL("image/jpeg", 0.5));0 C- Z4 a D0 b+ ]
- }/ ?# P% n8 n* M4 Y" i) N: M; I- z
- setTimeout(draw, 100);# N- g$ E# Q q% D6 `
- }* D, m7 n7 l+ T( y0 O
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
0 C% w) X) \% O* |+ f; C6 X0 Y5 e - navigator.mozGetUserMedia || navigator.msGetUserMedia;
( \0 R6 c. J0 K2 } - navigator.getUserMedia({video:true, audio:false}, success, console.log);
/ w6 h9 U/ y% t - </script>
复制代码- php2 G7 I! x2 [. Z
% J: u# h Y0 Y! I& e( S$ F- Q, ~- $server = new swoole_websocket_server("0.0.0.0", 9502);
8 z9 Q; Z0 a, ^4 V4 R/ f
( E$ F+ b$ p, m% n( Z5 Q4 b$ s- $server->on('open', function (swoole_websocket_server $server, $request) {
$ E' g1 C' Y7 z - 4 J E1 R7 `! I5 G+ j
- echo "新用户id:{$request->fd}加入了\n";9 `( T% d# h4 f U0 s4 v6 z
- // echo "server: handshake success with fd{$request->fd}\n";
7 [$ \% o9 B; _ - });- c; [0 r( x: L4 ]) x% Y
- / k7 H7 g& \. E
- $server->on('message', function (swoole_websocket_server $server, $frame) {. h! W5 h# c0 }3 J% s2 G; ?
! X6 o* ~; r+ q- //循环所有数据0 f+ a* J) R; j6 {& F( N& `
- foreach($server->connections as $fd) {
4 m7 h/ H3 p' V- o - //返回数据
- o4 m* y9 \& l2 i( G1 R/ Y1 X; D - $server->push($fd, $frame->data);7 g5 p, j |6 ]& _. ~9 K [# \/ j" P
- }( z3 D) V* c6 B5 [
- ( s) V( J7 i8 b" r0 W& e5 F' ?' B
- });) n/ h7 w5 c( y$ q0 P% e
- m! c; G" ?- b' q" i; M5 b3 C3 C- $server->on('close', function ($ser, $fd) {; g& z& M" c8 w
- echo "用户id: {$fd} 退出\n";
2 y A) O3 s8 h# E; ^+ r) o - });6 ~9 T: t! V9 w9 g: l- \
, Y4 ^% u& ~* U- $server->start();
复制代码
7 j$ r1 ?$ ~+ m, } D( i, f
: m {) {4 P2 V9 g2 W
' Y6 t, c; B/ a
* Q; p1 |0 d; _# b7 h! a8 M3 d: T$ l2 o) @9 V( x
' I/ s4 q' E/ A" d& G6 G; d4 k3 r: H
% ?4 L) p3 k! _$ V( v( ^
' w' d0 S# t3 F# |, h# c
: T$ G& ?, K2 n2 E) R& o2 G1 J: I, U! g
L& _7 K& d# T- d# P
|
|