管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
主要使用 webstocket# O8 t$ A# d: Y& A. d
上代码 前端 观看页面 - <script type="text/javascript">
O0 t% h- c2 t2 v2 {% Y3 y3 J% ~ - var ws = new WebSocket('ws://192.168.0.150:9502');9 u+ n! l! Z" Z
- - L- a: W6 Z6 V3 d1 L5 I7 H2 \) W5 B6 |
- ws.onopen = function() {$ h8 ]9 \; V& g/ Q0 v$ S* V/ g
- console.log("连接成功");& P: d) m6 y; H3 N' Y( q
- };( T- M; N5 P- k
- ws.onmessage = function(e) {4 m6 r& \( y M% s
- console.log(e);
$ q6 N. f# ?7 }1 Y; c: A4 r/ ] - $ L, q& y0 ]2 ]! k( K' {
- var data = e.data;& a" e m! t( b' y R# S. r: f
- document.getElementById('player').src=data;
/ x0 s" S! n5 V v" V5 }7 l p; \ - };
. c9 T( Y: l7 X' S" r4 ~ - ws.onerror = function() {
7 i9 W7 n: Y1 S" v9 ]6 k# k" r - console.log("关闭连接");
3 R8 c0 v" T' K. S! W$ p# G - };
. I1 r2 H5 Y7 h+ \0 _" C - </script>
复制代码录像页面 5 g# {$ s0 a. F* ~3 ~ T: ?
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>
; e+ O2 ~2 k7 O
8 y, x% s, I* H& t% a/ o1 h- ]$ o. B' L; l* X7 h
$ o$ q. o* P- W, F: w4 k- <script type="text/javascript" charset="utf-8">0 e1 d# ?9 ^7 E+ I: j! u4 ]
* o0 e! ^1 n7 s% u' a/ ~2 n% L1 r-
& @' N2 _% q% U f4 Q0 t+ I - var socket = new WebSocket('ws://192.168.0.150:9502');
* n k6 U! C1 }, ^+ V* h, G3 ` - //socket.send("嗨我登陆了");
3 p0 A- U4 ^/ l
' F+ k3 u+ t8 O3 W6 x/ \- var back = document.getElementById('output');
! [3 c! U2 p8 ]: J9 L# u - var backcontext = back.getContext('2d');- C, f- J: ]+ [& b, i) g
- var video = document.getElementsByTagName('video')[0];5 q }0 W7 a/ K% J
-
0 [/ ]- [% M3 t1 O% a( K; z+ @5 s - var success = function(stream){
8 _2 I6 _3 w$ n( ?, p3 {/ l - video.src = window.URL.createObjectURL(stream);
/ i1 x, J, z4 S4 w" z - }
7 N0 l2 {5 ?$ s/ F( q - : V2 `. F+ j. v8 F, |9 b
- socket.onopen = function(){
6 ~& }) q& x1 s0 l+ c - draw();$ h/ d& k; s- t/ z
- }" E8 A& E6 G3 Z- y& x* _9 r
- " ] _1 d" F, h+ m5 c
- var draw = function(){
1 b/ f* c o* I) u! @ - try{
2 L/ y4 D1 K4 w! J$ a% k( ] - backcontext.drawImage(video,0,0, back.width, back.height);
6 D! ]' e& D& D8 X - }catch(e){
2 B4 B6 b z* T+ p# T - if (e.name == "NS_ERROR_NOT_AVAILABLE") {
5 R. ?1 Q, u9 x' l( j - return setTimeout(draw, 100);
# e* [" ]! Q2 Y; p0 h* @ - } else {
- z5 T& H6 X, v - throw e;
: |4 v9 b7 d- r - }
) t/ Q2 c' @2 Y" n1 @) U$ A - }- @/ I, [* n- s- X
- if(video.src){
7 `# v; D7 Z7 q% |8 \ W - socket.send(back.toDataURL("image/jpeg", 0.5));
! R& W4 f- i2 B - }$ _8 [9 J# J& s1 @
- setTimeout(draw, 100);' | x6 e; M" ?; s/ z6 E
- }0 k- r9 D& x' v- r
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
2 e' ?$ i, B- w! p* { - navigator.mozGetUserMedia || navigator.msGetUserMedia;, ^: L0 L6 N ^- q! l' K
- navigator.getUserMedia({video:true, audio:false}, success, console.log);
1 l( k3 r) t* o( V% L% q - </script>
复制代码- php
0 e1 h* k' l y/ ]0 _2 Y7 I& R - : b. q* f( H: Q8 Z& e2 k3 {6 Z& [
- $server = new swoole_websocket_server("0.0.0.0", 9502);
/ w0 s# ^! b+ R7 R - " M( L; ~, {2 l! t }/ s
- $server->on('open', function (swoole_websocket_server $server, $request) {" e2 b+ H; a1 d' x
- $ f+ L4 s ?( h$ O
- echo "新用户id:{$request->fd}加入了\n";. p) ~, m( }! k3 a+ H& @+ D1 W5 o; m
- // echo "server: handshake success with fd{$request->fd}\n";- c/ q8 k% `% r) T
- });
Q% l( t" s; j* g. f! e2 P - 5 m* S; m8 S1 u5 U; z) ^, ?9 z
- $server->on('message', function (swoole_websocket_server $server, $frame) {( \) z( \/ @0 Y( G: C6 v0 Z' {
- 7 i* h1 b$ l3 |
- //循环所有数据
3 n4 ^2 J7 y/ |7 | - foreach($server->connections as $fd) {% ^! U' e; O2 L# S. Z
- //返回数据, S& d6 o$ Y$ L9 w$ J+ E
- $server->push($fd, $frame->data);5 U3 |1 w% i% K x. t' F& R6 M
- }9 u1 b$ N9 l; h4 C
- # e5 |5 I! @2 [3 s8 @4 q5 q' G
- });8 m5 N+ Y# V$ R. m' ~1 l- s
2 e) d# x4 R K- $server->on('close', function ($ser, $fd) {
5 p D+ m' d+ e6 [ - echo "用户id: {$fd} 退出\n";6 D* ?2 C, p+ Y& n
- });
: A" t% C6 n8 V1 E$ |# L/ C
6 b7 H# I- J+ w' R2 |- $server->start();
复制代码
# A9 F, e% R1 n6 V4 J) M2 v/ {/ @. o
; e% F! H7 @/ k$ t% D4 D
( S! Q$ R/ t: J/ t
( C. h/ \2 O6 _; w" ^1 v; v" ~7 U* S
; `! R% d8 ?4 Z7 z/ s( D- `6 _$ {! u8 `9 B: J0 f
1 \0 i5 p# b& v4 g0 F2 ~3 |3 }, k
9 ~0 G$ N4 G {! z
7 B& C: z4 Y8 E5 I# P
$ m' s8 y5 g1 X; g" b& `
|
|