管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
主要使用 webstocket4 `/ I6 s( C& P) x# H7 d2 y
上代码 前端 观看页面 - <script type="text/javascript">
- G& S; }# D H/ C1 j8 i& g - var ws = new WebSocket('ws://192.168.0.150:9502');$ R$ B: Y" V6 T# n6 M/ G
7 v6 ~3 k( K) }+ Y C- ws.onopen = function() {6 I# `1 d8 i* O
- console.log("连接成功");
# a7 ]0 ]) G1 T - };; m* z1 ^& V0 h
- ws.onmessage = function(e) {
0 r% W9 `+ o! ?8 v7 w - console.log(e);
0 ?( Z8 ~9 b4 M/ _3 T9 e - 3 l. x) k( o; {- i7 |
- var data = e.data;$ i: @ [' q5 W% K4 i b Y9 K$ t8 j
- document.getElementById('player').src=data;
0 f/ m6 L" f8 q6 e' j0 J - };9 i; g* ]4 f0 E9 t
- ws.onerror = function() {
0 b2 p2 m/ {. @; G+ V - console.log("关闭连接");
. W, O# b( B, S8 N' @/ V8 x - };$ O7 Q' {* z c$ Y( N
- </script>
复制代码录像页面
$ U8 `& i6 R+ |' `9 P最好用火狐测试。 - <canvas id="output" style="display:none"></canvas>; w8 L' v( f) U" r: I a
- 6 c6 V c1 k: V! A8 ?+ h
1 l }) n' U, i+ A9 Y
2 ?2 L: n8 z' ~- <script type="text/javascript" charset="utf-8">
- c- K- g( g. ]! K- \% E# [ z
8 Q( R; P& m( h' r1 T8 x-
, o* n- F8 @: [- @$ x2 t# H - var socket = new WebSocket('ws://192.168.0.150:9502');
5 C2 L- |% D; U, o - //socket.send("嗨我登陆了");% C# A$ s! h& e5 b& h" b" I
4 [8 v# R' P Z" f( O, W9 [- var back = document.getElementById('output');9 v+ _- U0 ^2 K* L q/ H
- var backcontext = back.getContext('2d');
d+ N% J7 X: p" q2 O - var video = document.getElementsByTagName('video')[0];% X1 ~/ u# l* q u5 \ C
- 9 A7 b; |2 l) v1 \) s# P, c4 p0 f- b
- var success = function(stream){9 e- P/ E& S; N! B5 Q$ G
- video.src = window.URL.createObjectURL(stream);' ]4 A# i7 M4 f! P+ D; W* D
- }! m( }1 X, W! u, Y; f
$ u+ d2 j6 q, m9 L# n7 r9 y- socket.onopen = function(){
/ i! {# L+ |, W, Z( N$ z - draw(); S0 ^- S9 C |8 u
- }. ~+ f5 I h$ z* h. S$ U5 E
& _; P$ W- ]& t9 b6 _/ x- var draw = function(){; w7 [- g) e' M+ `' B. Q
- try{/ v+ @% y6 C) q- I" R3 D5 ^
- backcontext.drawImage(video,0,0, back.width, back.height);
/ [" U9 d& S. z( X - }catch(e){* n; C$ I! a4 H+ `4 ?( B. `. w4 w
- if (e.name == "NS_ERROR_NOT_AVAILABLE") {' G% C8 h! `. s' K7 G
- return setTimeout(draw, 100);) z" g+ M- I, c/ A& \, K1 y
- } else {+ |* e8 P9 [. V! S4 `: z$ f, a8 J. P
- throw e;
s6 x" Z) |. E! y8 p- O, K) ~ - }
, _+ M R1 s& T1 v3 ^& ^8 X! E+ E) ~2 ` - }
2 W L0 r# j1 t3 a" {# G - if(video.src){: \! Q/ X2 r6 O( o
- socket.send(back.toDataURL("image/jpeg", 0.5));
, e+ |) V: F8 S# X6 d% F: P0 c2 o - }
" c7 I- A8 u8 e8 g) @8 ~0 m - setTimeout(draw, 100);
0 F) S9 Y8 O @6 T - }9 s+ Z3 @. o! X% E
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
+ f$ e( o) \4 S' N - navigator.mozGetUserMedia || navigator.msGetUserMedia;5 i# g: {; t( N: C
- navigator.getUserMedia({video:true, audio:false}, success, console.log);; k! z* \; H1 A8 U8 ], w( w( p
- </script>
复制代码- php' \) Z( G* H# ~' D
3 o3 O+ ~. M+ e- w- $server = new swoole_websocket_server("0.0.0.0", 9502);
+ ^/ J3 ~8 E% ~/ u - 9 I r# v+ A. R% i% j4 e
- $server->on('open', function (swoole_websocket_server $server, $request) {
, ^% w" s, Q( G W: t0 { - w7 x/ M3 T/ ^2 Y" Y$ E
- echo "新用户id:{$request->fd}加入了\n";
2 l; y. @/ l5 L& L - // echo "server: handshake success with fd{$request->fd}\n";
8 r; v/ s% P( \8 m% m5 e - });
& D! X& Z+ f; S3 K - $ n. f8 _6 V9 r. M$ u% m9 C
- $server->on('message', function (swoole_websocket_server $server, $frame) {- x' ?6 x) p; |1 n6 z( O
- ; V1 T6 l$ H5 i/ z
- //循环所有数据( k* _% Z' W, ?" A& o
- foreach($server->connections as $fd) {/ _' k& n, F% s4 U
- //返回数据
$ W, g6 R/ b9 t8 I( D" S2 y0 N$ H8 X - $server->push($fd, $frame->data);- ]! m7 H) q8 T7 q- D6 ~& C
- }
8 n0 }4 |% e' [- C: ^
- _, g L( N' B" u# f1 n1 @7 f- });) G1 w; x' E+ z3 r. f
- 6 v/ I, b. |: Z. j/ R* L/ T
- $server->on('close', function ($ser, $fd) { J. w# H/ t- l) T+ g
- echo "用户id: {$fd} 退出\n";
& e. O+ M a/ w9 r% o - });
/ P7 Z2 ?+ O/ n5 [; }! @5 A6 c8 i
: [% W3 r! f! j( I6 z- $server->start();
复制代码
q3 n4 g+ M7 ?; E
# W3 y7 R* c) A# K, k) z; f5 D
4 i. K, H0 U7 f8 b: Y% R3 S
) n9 M F5 S( E
^4 e5 h0 J0 H( A; K- ?+ o# N2 m& w) ^
2 U4 t q3 J6 r, m$ j( ` n* ?
; V# Z5 [& y6 J
$ X/ I r4 I3 `/ b9 M5 e9 j" a8 m4 q, ^2 Y
: p, O m3 f; A/ [1 p
9 g, a' h" v& c" r7 o9 o$ T |
|