管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
主要使用 webstocket
3 _0 P; k2 \2 s7 [, k上代码 前端 观看页面 - <script type="text/javascript">
, N) I' N; O/ M" y q9 ~0 o+ @ - var ws = new WebSocket('ws://192.168.0.150:9502');
. s$ J9 y6 u/ l - : p5 B" X5 T9 \! v) @
- ws.onopen = function() {; {/ J* I5 q/ n3 D
- console.log("连接成功");
m* y$ Q M0 l3 @& m - };5 I. ~1 k: W# }0 l2 ~
- ws.onmessage = function(e) {
4 I9 |! Z" [! t/ s+ a8 Q+ Y - console.log(e);
, b {' _ r% e - . }8 n: O' D9 G3 t( f$ [' d
- var data = e.data;. r, h+ N: N; l
- document.getElementById('player').src=data;
0 r1 f& ^# O/ B' K" ^3 B& D2 Y4 o( U - };
8 l' Q' w" f/ E+ x+ c - ws.onerror = function() {
& ?. p4 H7 b" `: f$ g4 r1 G4 Y - console.log("关闭连接");
9 l, R+ C2 J. L) X - };% {: u* k5 e, k: a+ R
- </script>
复制代码录像页面 $ I/ R: y3 h5 V6 G
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>
C' i# P3 L2 M# ?( B0 J - " V& B: A. W" |
- ! `! s+ S0 ?, a- l& j3 F9 T$ ~" u
- ' s/ P- ^( a! l3 m' j1 A: V- \
- <script type="text/javascript" charset="utf-8">
' k, Q5 X! Z V& i* W% a9 q- E% O
( J$ N# T1 X- d8 V& b4 r4 d, a- 3 S' E; i4 ]2 k, g3 A P: [
- var socket = new WebSocket('ws://192.168.0.150:9502');+ z6 c; X& u, |6 T& f
- //socket.send("嗨我登陆了");
/ g& U: C/ }' Y - + x5 O m' K$ Q5 }: b; V* u1 r4 V( I
- var back = document.getElementById('output');- p: N& D2 z6 \
- var backcontext = back.getContext('2d');$ d1 B! p" `4 f0 \2 c0 a
- var video = document.getElementsByTagName('video')[0];; E$ @2 c( f' o
-
3 X- D0 e9 y& X' J: v. u: m/ N/ y - var success = function(stream){) L, d# L# I! x# l
- video.src = window.URL.createObjectURL(stream);! |; f+ R% P3 v& Q: ?3 p
- }
$ o: o1 Y* X' P3 Y! `+ j - * s1 @, F; m1 j8 s2 g/ J
- socket.onopen = function(){8 g$ s9 A5 O4 v, q' v" D1 s: Q6 H" V: G
- draw();
7 E/ v' |' Z; w/ B - }
a. d4 a0 b+ \% \
. V6 |! s! v; t+ R+ m% M* o- var draw = function(){ r C$ @; p4 h+ }4 P
- try{
0 A- _1 x$ N4 R' J - backcontext.drawImage(video,0,0, back.width, back.height);
, Z/ M7 W1 O7 q) H1 w - }catch(e){
+ G$ M6 T% {6 d6 m; A9 F+ l - if (e.name == "NS_ERROR_NOT_AVAILABLE") {
* y3 a% Q" Q- ]6 e - return setTimeout(draw, 100);
& U+ f5 X2 y1 l/ |8 z. C+ Z - } else {- @) L3 O& h/ L6 H! M1 K5 v* l/ O
- throw e;
7 ^; [; H8 {' G2 i$ N0 m - }& N# A T; k6 l+ C& J! G2 q) Z
- }: ^/ ?6 C! Q! _( |6 D6 L
- if(video.src){/ _ E% \4 i) l3 r3 s
- socket.send(back.toDataURL("image/jpeg", 0.5));
9 b7 z1 B; ]* v/ d7 Q - }
' [2 `& D6 Z5 u: b - setTimeout(draw, 100);
) b# g$ A5 J: f6 A; Y1 d - }7 |; ?8 _' i) E; a9 Z" M8 t
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
$ h2 H; u5 t$ k# t - navigator.mozGetUserMedia || navigator.msGetUserMedia;
- x p! G2 Y4 ]) b# ^0 d7 B* q; B - navigator.getUserMedia({video:true, audio:false}, success, console.log);
5 f5 _! W/ o* D% D6 p7 \8 k0 w - </script>
复制代码- php; B Q# ?5 s5 h7 k* D
- 8 r: k5 z: @$ Q- k
- $server = new swoole_websocket_server("0.0.0.0", 9502);
6 Z1 x$ T& ?" b* I
5 X: X6 c# e5 Z% h( [: s- $server->on('open', function (swoole_websocket_server $server, $request) {' ?, }- k5 [, a; E' c: \
- - u: @' A! q: F4 c# y6 {1 i: F8 |+ F
- echo "新用户id:{$request->fd}加入了\n";
1 T F9 d3 C' e% ?( A - // echo "server: handshake success with fd{$request->fd}\n";" V6 @% l4 z. T! H! O
- });, W, v& _3 E/ z7 n
- # L6 M/ Y0 J( U# z7 \: h
- $server->on('message', function (swoole_websocket_server $server, $frame) {# Q9 K% p' U' Z1 d7 ?% X
- . Q O4 B6 q* @' m' q: \$ U
- //循环所有数据
" z# b! d# p% {7 U% s0 U8 y, u - foreach($server->connections as $fd) {
8 H0 h* R" b, w - //返回数据$ v m# U0 r, J: X
- $server->push($fd, $frame->data);; ]; `% Z! x! Z4 C; h- {
- }
6 ~, ]! l5 ~! `! e
# S+ j9 B5 L7 K5 e+ U& j- });& T9 `- b k+ ?& j
4 S4 l! [$ E5 h) H- $server->on('close', function ($ser, $fd) {
8 a. ~2 l( y0 i* E* j# ^3 y - echo "用户id: {$fd} 退出\n";
+ |8 @8 {# R0 C' P1 c9 ]1 o: G0 A - });
/ X2 g4 O) L: S
' _* H5 K1 m* j4 [. ]& |- $server->start();
复制代码
) M& _5 R# v0 @5 Q' f+ R+ D6 O. l* M) p; s: t. H! p6 ?
+ {% {1 k9 i+ T/ l9 u; A
% a( ?- u, V0 X3 J2 r, T5 C
+ \* d' }" _8 d" V$ B8 C: q+ L
% R1 k. D$ l' A
- A/ k: J" G- \! Z, o1 y
6 d; y4 z* ~# H. k) f
* F5 n$ G( E, A6 ` ?4 k" `: M+ [( Q: p
% A1 B& o% N( D7 x$ o+ j
: S l: Z- ]0 O: s9 t! @ |
|