管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
主要使用 webstocket
: ~) J+ x% D, ]6 l7 a- p上代码 前端 观看页面 - <script type="text/javascript">& \. |7 S; I. Z
- var ws = new WebSocket('ws://192.168.0.150:9502');) g- p. [, g9 R. I5 A6 L" n
- & w- }/ U& b* F& @
- ws.onopen = function() {
0 L* h6 Q/ ^" U: M4 }5 b - console.log("连接成功");4 s# C. Z3 [( |, p7 O% n
- };9 L$ h' i% G g+ _3 |
- ws.onmessage = function(e) {
' H4 q+ x# O6 A7 w7 T- j/ | - console.log(e);2 J* G$ t1 s" H! z2 L
- 9 W, R, ]) P5 ?& R0 v
- var data = e.data;
* Y* Z. s. M, p8 g - document.getElementById('player').src=data;6 N5 }" b2 h" N# \; D
- };$ H% ^* w0 H1 G7 D- Z; _
- ws.onerror = function() {% M; z$ b, h% p! T! ^
- console.log("关闭连接");2 N" J) h' X% p/ w6 ]& w+ S
- };
2 T7 | C3 v3 W, _5 v, { - </script>
复制代码录像页面 3 ^; I( Z4 h- m, F8 c$ c
最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>) u; S* }" Q7 W; L1 z
! g: _' ?4 D& t, i
& I+ N4 U5 o4 c* ?+ n- & P) l0 N1 Z) K) N. w y
- <script type="text/javascript" charset="utf-8">
L/ n+ z! J0 [3 j4 T
: {& d: a- R w5 l# R. |- 5 [4 @' G5 L1 H A
- var socket = new WebSocket('ws://192.168.0.150:9502');* C6 H+ |( V, \! @' s
- //socket.send("嗨我登陆了");" G0 s$ K( k4 Z$ F% e$ |9 Y% _$ ?& d
$ N$ b( u6 M' d: K# w- var back = document.getElementById('output');
: U Y. ~5 i: \5 G7 L/ R# y2 _ - var backcontext = back.getContext('2d');2 ]' ?4 i+ u3 a& A( U+ |
- var video = document.getElementsByTagName('video')[0];: x! A) q+ _' x j
-
: Y; n5 R# h+ g0 V& ] - var success = function(stream){8 F E6 F/ g$ ~/ W% R$ d
- video.src = window.URL.createObjectURL(stream);
9 a& l+ N* m$ _0 b: |' M - }! X6 n# {0 z0 ^0 k3 c+ n$ J% U/ y
- * f: K5 p! @- y. Y' T
- socket.onopen = function(){
1 r% d3 R# N9 m5 N - draw();, _' M- M% C B9 `9 L8 L
- }/ b# S1 C# [" _( g. W
- , \ ^# M( [+ i* l( s
- var draw = function(){
2 L$ ~1 O+ l& l4 W! M; P - try{
. I1 }+ b3 Z8 Q; O T1 H* \ - backcontext.drawImage(video,0,0, back.width, back.height);2 x" ?" M7 r3 I4 ]: [6 m( C
- }catch(e){
' F& J8 V- u! U6 I3 K5 m - if (e.name == "NS_ERROR_NOT_AVAILABLE") {
$ K C( Z" Y# W8 W# Y$ ] - return setTimeout(draw, 100);, ]+ g, f, h4 V6 _
- } else {1 K+ O8 R Y5 _4 h! W
- throw e;2 q' u& `" |5 b" m8 E
- }( B9 e% z+ {5 Y+ ^
- }
2 U6 |: n/ f' m" P1 Q4 |* q3 J - if(video.src){
7 D7 ^+ x/ `$ q/ V' D9 P* [: r. {/ E - socket.send(back.toDataURL("image/jpeg", 0.5));' ]0 }; h, h* A; f# s* X" l9 h7 b' s- H
- }# V5 D0 Y' D+ d
- setTimeout(draw, 100);. C9 F* h' c2 o C6 q
- }
( t; V h0 P# `! t2 N/ Z! C' J - navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||9 c9 g% k, [" V9 w5 r
- navigator.mozGetUserMedia || navigator.msGetUserMedia;3 O/ O, d, h% |5 z( }2 U/ e; O6 B
- navigator.getUserMedia({video:true, audio:false}, success, console.log);
, }, ]9 I) m+ s. L+ Q: C - </script>
复制代码- php4 s8 a e3 W# A( \7 ?: j! x+ \/ Q
- $ y& n7 `/ m% e9 Q4 j
- $server = new swoole_websocket_server("0.0.0.0", 9502);2 E8 e b0 l& T9 h
4 [, o; U6 a, G4 J- $server->on('open', function (swoole_websocket_server $server, $request) {' g J# t. }4 u; M+ ? O; [
5 _2 m, _+ j1 O# H. N, h- echo "新用户id:{$request->fd}加入了\n";9 y+ H9 [* _5 H) L" @
- // echo "server: handshake success with fd{$request->fd}\n";$ n- `; P) E/ X# s; n( @
- });
" G o3 `1 B; \& \1 u4 i - , B8 z* x+ z ]; t
- $server->on('message', function (swoole_websocket_server $server, $frame) {
9 x* o6 ~) R2 W; d5 c- B
! L' i& ?8 j3 A, C: R0 I. W6 _- //循环所有数据8 B' m l/ r2 k* n
- foreach($server->connections as $fd) {
C, a- f- y- R, o- Q - //返回数据9 T ^. G: i7 v' ^
- $server->push($fd, $frame->data);
( l( m- h! `& z, g3 F) \ - }
. {, B0 p+ L2 s5 i( \, n" X/ F
$ R- N- W' f, P3 N* `) K- });3 k# ?% n7 J# Q; @8 ]
- ) l* p- _3 d3 ]& w( G, x
- $server->on('close', function ($ser, $fd) {, j- G% I2 h0 C# S( X
- echo "用户id: {$fd} 退出\n";
3 r" N7 G4 ]! t: V( { - });
+ X# m6 K! U5 q, ?8 {- @
0 `) A. k- H2 _: s% N- $server->start();
复制代码 2 c& [% W* p0 a- }& a( ^/ H( ]
* V1 i; W; ?+ F: u5 a. _8 M( q( r, ^7 v
& c: b. E" W, K( N
9 B q" D6 Q, j d0 C( ~ ^) p
6 i" Z5 ?3 \8 u1 C1 ^+ |; D
' L' `0 Z% s; s6 |* j9 F. Q1 G
; x2 E& K# ^' y. z/ }) e1 ]4 Q" V2 q1 i D1 t6 K# R" f
. }, }6 x1 Y2 f) ]$ ^
3 _: _. v* d7 K% }; @ h" b, ^/ j0 d/ _
T$ m- Z2 ]$ c2 H |
|