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

<script type="text/javascript"> |* M) @7 L2 d1 h) i
var ws = new WebSocket('ws://192.168.0.150:9502');1 W/ Y0 i% p0 F: k
% V# y+ _7 R5 I, F( Y+ @/ Z
ws.onopen = function() {$ _3 X/ `; K/ \' Q# X
console.log("连接成功");! n. C- f, X6 \9 d# o$ H
};
4 F0 c% ~' f4 A% @- _' w3 T
ws.onmessage = function(e) {
" m2 L9 f- n3 F! [( J$ M4 e" P
console.log(e);
- M- F. W J" ]9 H' ~$ [- }
* h0 g$ n, i/ J/ d
var data = e.data;5 Q: ]0 h8 W2 U. j+ z5 s& S) o2 N6 a
document.getElementById('player').src=data;5 k; t9 X2 N2 R3 E
};; [5 ~4 h; }5 a( ?" a
ws.onerror = function() {
) z$ v# o8 G" I% q6 }' t N% i
console.log("关闭连接");. T) P M% X% x9 d9 D- v
};4 J" |! A& u4 L3 P3 O; ^6 C1 q
</script>

复制代码

<canvas id="output" style="display:none"></canvas>
% [: M9 T0 J4 Y
. e2 j9 n, @/ s
# M8 q: i8 I% J
: ~: x8 c: e0 X3 ?4 R4 k" W
<script type="text/javascript" charset="utf-8">
$ V# d/ j2 ~/ M" ~2 X
7 a+ y( E0 J) i! _
: w- t. c: ]/ j2 k3 A- J6 _
var socket = new WebSocket('ws://192.168.0.150:9502');
, H# L0 ?, C( n( ?2 i1 z" f+ S
//socket.send("嗨我登陆了");
1 q" ~$ Y# Z8 ?2 n! U' i8 [! J0 O
e/ L+ S! n: |* z
var back = document.getElementById('output');6 i' _. V( P: j" V
var backcontext = back.getContext('2d');; t# A* m7 p# h# k+ t3 {
var video = document.getElementsByTagName('video')[0];
- [9 q2 G+ `% k1 v5 T
4 N0 V9 x' |. K6 J' o6 }
var success = function(stream){* g) y6 K$ ?; E5 f3 M: e8 j5 |
video.src = window.URL.createObjectURL(stream);/ v b! b% a& f
}
8 h, D( n' [9 v
( M8 p: |' } _, A) {
socket.onopen = function(){. a( X: o2 |% Y$ j
draw();, J4 [& N6 y* p" p1 L
}: ^# K! W' {+ i' D. U- t! A9 |
, ^; E7 h3 y* M# V7 @% f
var draw = function(){
/ Z# `, b# T9 A1 @- @6 P2 {
try{
: y3 q4 n; a' o5 w4 H9 n
backcontext.drawImage(video,0,0, back.width, back.height);# K4 [0 a1 D. s- E
}catch(e){
4 J3 M/ n6 L3 j7 p2 Y' y
if (e.name == "NS_ERROR_NOT_AVAILABLE") {
& |6 a6 m& U! y. V
return setTimeout(draw, 100);
1 k" J5 z3 O+ n- G* q a
} else {9 @) Y* i% ^5 |) p1 q L' y$ [
throw e;
% s% G z. G; g# o2 k
}
- J4 l" @* Q, z, N; d, R: Z
}
0 k% z6 E) m$ i; q
if(video.src){4 \1 ^1 ~+ g3 |
socket.send(back.toDataURL("image/jpeg", 0.5));
$ l5 ^& J8 h; j6 f- G. z
}
2 Z9 I/ O- D- i4 }" ]+ x2 [1 Q
setTimeout(draw, 100);
; u2 a& y7 t F+ f p% Y d( s* W
}) ~1 b7 o2 d- J8 e
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
6 `; y5 B5 \; x; |
navigator.mozGetUserMedia || navigator.msGetUserMedia;
# N0 X) @* a! z1 x1 T' z `* u9 v2 i
navigator.getUserMedia({video:true, audio:false}, success, console.log);! u* B Y; T$ Q: B: k9 } \. M
</script>

复制代码

php
2 t2 _: G' E1 w- k$ K& \! c9 t
) ~5 Y3 e/ A- f0 t ~
$server = new swoole_websocket_server("0.0.0.0", 9502);: P# f; x* ]" p/ G
: ?1 s, e& ~7 Q. \
$server->on('open', function (swoole_websocket_server $server, $request) {1 |; G$ ^ I' v6 s5 e( [! ]( a
0 K: I% X3 N5 W5 \& @: K6 Y* X
echo "新用户id:{$request->fd}加入了\n";
6 j1 d- [& v/ X( C
// echo "server: handshake success with fd{$request->fd}\n";1 u$ a# u, Z8 d
});: |+ [: H0 T5 n- M( Z
% i$ Y$ N8 P" y
$server->on('message', function (swoole_websocket_server $server, $frame) {* ~2 a- f, \/ I; \% v& Y
, b2 w2 _6 P% o) ~# H: H8 s7 ~
//循环所有数据
1 e+ f2 O9 S3 Y; h+ A* ]
foreach($server->connections as $fd) {5 v- n# U* G( Q& k, s1 [
//返回数据
0 z. _& }0 b* ?) X6 ?; I& s
$server->push($fd, $frame->data);
. y# n/ z' A8 n ~, O, w* ?0 O; l
}
+ q3 h0 P; Q& J. X# x1 ]1 |
* T' Z- ^! d2 k" }+ N
});
7 w+ ~2 q7 _5 r. r6 O
$ ]( O' Q# M! b! {4 p/ K
$server->on('close', function ($ser, $fd) {& m$ `' w- N3 |' S) A; D3 c- ]
echo "用户id: {$fd} 退出\n";2 }( n9 x) y q2 h/ l& B
});/ j3 |$ C5 A' F3 Z/ d4 B
6 K0 `) X8 {- Z D; T0 T; ?
$server->start();

复制代码