swoole 直播 - cncml手绘网 - Powered by Discuz!

<script type="text/javascript">
! W' v' l- ]9 x; Y) h: @7 P
var ws = new WebSocket('ws://192.168.0.150:9502');/ {& ^# Y5 }7 _( o' o
: {1 t3 U' S7 {/ O
ws.onopen = function() {, r9 Q" A8 G. r4 C6 M A: H7 m5 I- b9 k
console.log("连接成功");1 u0 M9 `" k- X3 j L; M
};
9 H% @* N. U! X9 F5 q- ?
ws.onmessage = function(e) {% i4 m& z8 }$ E* W4 n& h
console.log(e);. \" v/ @3 B1 h% c& M
9 f' d4 |1 Y4 A$ n8 @- o
var data = e.data;3 |6 } C2 N2 R' K2 Z* s- B
document.getElementById('player').src=data;
; g; g" H; }8 f7 a0 o1 i! i
};
1 j, D% g7 T* u* `5 g
ws.onerror = function() {
: D& \' S+ ]$ Q0 w
console.log("关闭连接");. Z3 d3 \$ b2 e; [, a- u$ s
};
/ Z5 d/ X3 A, r3 y) ?% O# ~& `* j
</script>

复制代码

<canvas id="output" style="display:none"></canvas>
6 L2 U, j. A, e3 U4 Z
; m# s* d& x |9 a" o- S
: |' S6 q B7 L g. c# G% c
$ X) n2 P. L, s7 ]) y4 |0 A1 ]
<script type="text/javascript" charset="utf-8">
. C* n) e) [, @4 ~6 j
3 I9 X+ @( c2 G5 G+ c. p! }
7 |4 ]: {& \ t% j, ~2 _9 [4 q; l* M
var socket = new WebSocket('ws://192.168.0.150:9502');5 e) y0 h+ g0 ^$ S
//socket.send("嗨我登陆了");8 `. U7 U' O7 o2 W( o- S0 ~/ r4 k
/ r5 p# k/ m4 C% i2 l
var back = document.getElementById('output');
: p' ]0 b( B) a$ r: z. u
var backcontext = back.getContext('2d');& E+ }9 C8 G. ]/ s% ~! b
var video = document.getElementsByTagName('video')[0];
& ? H% }/ J: J3 t$ V9 i
# q0 z( z# c$ }
var success = function(stream){- C3 J/ G6 f; G9 ~* b+ A: g, D
video.src = window.URL.createObjectURL(stream);* C/ r9 q, h- d, z
}2 I+ } w/ S. M
- ?9 ?0 J7 s) U
socket.onopen = function(){. k& x* n$ ^4 b3 G
draw();
5 K% \6 ^+ o; r1 s- `
}
/ j) C+ }+ t& A8 }9 O' |4 M
+ ~5 L- h4 u5 K/ G
var draw = function(){, m, R+ U1 S1 N W5 U
try{
, X0 X1 ^4 g7 s$ r5 r. m7 H
backcontext.drawImage(video,0,0, back.width, back.height);% N" k/ J/ f9 m( W8 i
}catch(e){
, b+ F: C* z6 m1 M1 q
if (e.name == "NS_ERROR_NOT_AVAILABLE") {
3 ~5 e2 x5 b! h
return setTimeout(draw, 100);* D6 P2 a( I' g2 \
} else {7 f) q9 R" n# l8 m, Z; o; B' O
throw e;' F2 |' c! g+ U4 V
}
* b+ s% i3 t2 D: s, P
}! w1 ]+ u% T0 p
if(video.src){
0 I% Y7 r- X4 v0 r$ U% n
socket.send(back.toDataURL("image/jpeg", 0.5));" ^7 q" L; R4 c4 w+ j
}& |' L" A: ~- l8 N- |$ ?2 j
setTimeout(draw, 100);3 B2 e2 V! }7 q% @# W: l
}
l- S) b$ r4 }
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||2 D c# N& H5 U* r
navigator.mozGetUserMedia || navigator.msGetUserMedia;
; \9 P) ?7 d( Q+ Q: d) t% ?
navigator.getUserMedia({video:true, audio:false}, success, console.log);" M) o% ?! K5 H
</script>

复制代码

php
& @! N) R1 L# I. _
* T8 A0 h4 _0 N0 Q0 }+ i8 c* y( z, Z f
$server = new swoole_websocket_server("0.0.0.0", 9502);
& {# |6 Q f( ?2 L2 T2 Y! Q: K
4 k. ~, S/ v4 ?' B$ _
$server->on('open', function (swoole_websocket_server $server, $request) {
3 S$ r( u, i, M+ [0 P. m6 Q
2 ]. D, {8 O1 M$ E7 I* n
echo "新用户id:{$request->fd}加入了\n";
% J. I# i; B( f
// echo "server: handshake success with fd{$request->fd}\n";
! k# N m- H# Q
});+ }. ]& h m7 k$ m% m2 W
1 x+ Y) }+ J, p
$server->on('message', function (swoole_websocket_server $server, $frame) {+ p" n& k: g! T/ X- w8 @6 Q
3 F8 o4 E: R4 v+ h
//循环所有数据# t# P7 ?" ]7 \
foreach($server->connections as $fd) {3 {* V4 G& J! Q8 F
//返回数据0 o* L, q8 I( q4 B
$server->push($fd, $frame->data);/ u# ?+ R) c9 p3 \
}
+ o9 l1 R. Y' e8 N# X7 B
; ]/ v- Q* @9 K3 X8 ?
}); e* v1 i! v: W6 F2 h3 i: M P: I
: A- U6 r) r0 o7 @! Q2 Q( ]
$server->on('close', function ($ser, $fd) {
- N* w& [5 K- R, u8 N3 x( E
echo "用户id: {$fd} 退出\n";& O' i- h! s) H/ \: K
});
6 K8 f. N( {' t& o v: S9 E
$ {) D: c9 V; C, c. T" ~/ P7 }
$server->start();

复制代码