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

<script type="text/javascript">) y6 @: S! _ {
var ws = new WebSocket('ws://192.168.0.150:9502');
1 H, y$ s0 C0 \! h9 n; x
; {# S) ^" ]. H5 N& {0 ~
ws.onopen = function() {9 e% B$ q1 N, T5 G1 k
console.log("连接成功");
- v$ D6 l7 \( I
};
; {5 L# k% C9 H. G; n
ws.onmessage = function(e) {- b, P9 C. p6 d" c/ ^5 V J
console.log(e);
2 z) J5 }* l2 M) t4 N
- Y& d. {: Y$ d( V
var data = e.data;4 B0 g% o+ O1 q+ S4 B
document.getElementById('player').src=data;, {$ H4 z& o0 \5 R$ o$ w( l* \7 E
};+ m* N: z) Q; h3 e0 d
ws.onerror = function() {
3 q) k4 H: }( Q7 _) ^' ^* W
console.log("关闭连接");$ D* O0 y+ ]0 d
};5 G" Z5 G3 F. b; U. C( i( t4 z
</script>

复制代码

<canvas id="output" style="display:none"></canvas>
# X& H( ]( Z( E6 q
/ V! z1 Q0 t& M, D3 s6 V4 g6 o
3 J$ Z2 T% e2 S( S
9 @; n" O' H. G+ ~2 m" s
<script type="text/javascript" charset="utf-8"># `# Q; o) E: |! l2 K5 l
' u7 M; B5 Y/ d; Z w+ J+ [
& K2 f" W( t- o% w
var socket = new WebSocket('ws://192.168.0.150:9502');
1 s. @: j( T g A( Z2 `9 Z
//socket.send("嗨我登陆了");. n, w- l T e) o* ~5 l
0 V0 U! A0 x& q1 E) A
var back = document.getElementById('output');
7 o$ @6 @% e/ c8 E- K
var backcontext = back.getContext('2d');
7 a I5 E9 t. A
var video = document.getElementsByTagName('video')[0];
) \. k7 ~* o" y1 Q& J: t% j2 L; q
. d" V# J- m) O* h; H
var success = function(stream){
/ d4 ]9 U! r0 ]$ y" P
video.src = window.URL.createObjectURL(stream);- d( ]1 ~/ L" |
}+ ~7 A! t/ @ J& G) H" `
" O2 P3 ]2 s4 l5 X7 D
socket.onopen = function(){
$ Q" ~" u6 p! a5 f- l" T
draw();
( N, d# E1 |7 { V( e; R7 Y. T
}7 n* E0 g. x4 M3 J
9 q& s3 e6 v9 S8 q* I
var draw = function(){
% G: m: F+ h! `& c7 O7 q) o
try{
1 A8 s J; C+ t& u# D/ d0 J! {
backcontext.drawImage(video,0,0, back.width, back.height);$ j; y# \/ b- h3 b
}catch(e){3 n/ B- f) L: Q) h; |* |5 V" T
if (e.name == "NS_ERROR_NOT_AVAILABLE") {" F; c7 `, ~$ ~( Z& ?" Z/ _
return setTimeout(draw, 100);
6 e' V" ?7 k% t [$ g: I
} else {# P0 n$ S3 W' K5 j& o4 M9 \& b
throw e;
2 ~. ?1 x# G, h u
}
0 t X; H5 i( Y
}
+ ]+ Y4 h; L- i- r
if(video.src){
0 v% X, @ j+ ~) W5 g
socket.send(back.toDataURL("image/jpeg", 0.5));% a) s7 P: F+ C* h
}
# z( s! j" y" Q9 l7 A
setTimeout(draw, 100);
/ J6 V' I$ U( D; }$ A7 \& x
}6 u3 f. Z- p) j* I. y. O
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||/ E5 w3 a# ` ]3 I. `6 }
navigator.mozGetUserMedia || navigator.msGetUserMedia;
& o+ q H* }2 G4 J0 h& L: ?; e
navigator.getUserMedia({video:true, audio:false}, success, console.log);% Y( |1 H. P/ y6 l! c- g
</script>

复制代码

php% W7 o* _5 m" L" R
" e: _7 ~' H" u; m
$server = new swoole_websocket_server("0.0.0.0", 9502);
: V$ Y$ A3 K2 T8 s( Q4 X% Q
6 S! V0 Y# I6 T) i! v
$server->on('open', function (swoole_websocket_server $server, $request) {
2 w" G0 j1 O ]- v, h
5 r# n {- t" q# G1 \
echo "新用户id:{$request->fd}加入了\n";# S0 F9 y2 K4 _1 W; {, O
// echo "server: handshake success with fd{$request->fd}\n";1 c( Z: K4 ]+ V+ @# ~9 ^2 o8 P$ A
});
$ E1 x9 S. p0 j1 s2 @* V+ ?' {
6 T) R. D+ c- i7 o/ G/ _$ j
$server->on('message', function (swoole_websocket_server $server, $frame) {
. V4 y9 r# B$ W0 V
( k0 g4 S) D7 l
//循环所有数据
4 Q/ v2 _+ S5 H+ f' r6 d- U
foreach($server->connections as $fd) {; l2 t7 f6 y) _ Z
//返回数据" u0 g0 O8 s# B) o) z& g
$server->push($fd, $frame->data);
6 W9 J( h* i/ O" B/ q6 n# I! M
}0 V' A9 I" ?( ~& h+ z
2 o! W0 s2 U$ v$ O$ }. ]3 ^
});
7 U5 A$ i( e, u7 P7 Z
7 ^2 Y8 Q0 N( K5 c1 A4 B/ j) k7 u
$server->on('close', function ($ser, $fd) {5 @7 S8 i( d5 k( E
echo "用户id: {$fd} 退出\n";9 m+ W& e- Z) |, d
});# A7 a+ x6 P. g; Y {- t. {+ ^
7 T g5 T x2 E# }
$server->start();

复制代码