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

<script type="text/javascript">
* o6 }0 r) u3 {
var ws = new WebSocket('ws://192.168.0.150:9502');1 z! e; t( J& s8 g3 P8 q
! x% C7 w- l+ X0 ]1 m
ws.onopen = function() {9 I! f3 K! z& `) c
console.log("连接成功");9 P( y3 O4 @' u7 K
};
1 G) A6 b( k; G1 L" r
ws.onmessage = function(e) {/ W3 i: ]: k0 M$ K
console.log(e);
4 e4 X7 V$ s3 Z% W
var data = e.data;$ s, y3 m+ @, n6 F
document.getElementById('player').src=data;3 R. a" \6 a. t c% W
};- `2 e" [, B0 b% ^
ws.onerror = function() {& }4 O# n+ J# U$ ^1 @
console.log("关闭连接");3 C; M: @( F: j
};( h) I0 N/ ?. {# N
</script>

复制代码

<canvas id="output" style="display:none"></canvas>
# \, v$ P( [# F7 X6 [8 E5 _( O
" V u7 Z7 C4 `+ a) K
& a! `$ O4 i+ f; g8 w8 H
# a2 z" p: ~' g) p7 Q
<script type="text/javascript" charset="utf-8">
& N$ x( y$ s' \' }2 I- `% Q, c& U4 v
( |# X( ?+ q0 Y; C
+ w2 @ ?/ ^1 e0 y8 p$ f+ @, S) E
var socket = new WebSocket('ws://192.168.0.150:9502');1 M# G5 f$ l& r' @; F1 \
//socket.send("嗨我登陆了");. Q% ^/ y% S% A1 H
7 W8 m& ^+ N5 s
var back = document.getElementById('output');, e+ W$ K9 M ?0 }, Z% L+ E) L
var backcontext = back.getContext('2d');
2 |4 h3 w* w: m1 N
var video = document.getElementsByTagName('video')[0];
) W7 i' v1 T: m
( a, F Y7 `) Q e# |
var success = function(stream){
+ Z4 L; R. x: U0 [4 e, @: w
video.src = window.URL.createObjectURL(stream);
. T" W, l, w- K% q
}) v5 U6 A8 }) F) S; V
( q0 m8 a2 G2 Q0 ]5 x$ B3 b0 _
socket.onopen = function(){4 {: M* m: N- b- z
draw();
) A+ T& F6 [6 G# G
} o/ A; a+ @& p0 d6 ~( R- _
( G3 z% ]4 U" O3 M, X0 I
var draw = function(){
& W# Z, E. i1 ^% \+ B! q, W$ U
try{
) E0 G! |, j U3 A5 i
backcontext.drawImage(video,0,0, back.width, back.height);
& B7 W5 ]! H1 ?; X
}catch(e){" F* N' M: ?( D8 K. S$ I7 j
if (e.name == "NS_ERROR_NOT_AVAILABLE") {# ^, B ? u% }6 S7 R9 `8 o4 h6 N
return setTimeout(draw, 100);
0 _6 v: H3 A& n$ c4 U4 R+ j
} else {! G3 o! j/ e( }; p5 b6 X
throw e;
+ [* d8 ?7 H" u4 `
}8 O v X$ f7 \" Y. q
}
; B) t7 l4 \$ `* v8 [ x0 e/ C' {
if(video.src){
2 m' j/ O& ^" b8 D; {/ l `" t
socket.send(back.toDataURL("image/jpeg", 0.5));% k5 G" h; z$ ~. f) l3 j
}
a2 `0 `# ~6 }7 j
setTimeout(draw, 100);' B; T( E# r8 R" t$ W
}6 ?2 W9 U( [. x N9 l! m, F& D
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
+ C! E8 k! b$ ?5 O' {7 i3 A, f
navigator.mozGetUserMedia || navigator.msGetUserMedia;
$ a' e! C! y( l0 ?# r1 `
navigator.getUserMedia({video:true, audio:false}, success, console.log);
, D. l( }8 u2 X2 {
</script>

复制代码

php8 @7 c1 A( A. \! g1 t
, E; O* D- M) y- l
$server = new swoole_websocket_server("0.0.0.0", 9502);" [' N1 P3 N" S( O6 h
* K+ x. ?' M- v" t- g- j
$server->on('open', function (swoole_websocket_server $server, $request) { u; n& J! D9 K! C, d' [
?9 z7 V4 B& K4 T# e T- `
echo "新用户id:{$request->fd}加入了\n";
6 s1 V: k' S3 [9 p0 J! l! Q
// echo "server: handshake success with fd{$request->fd}\n";
. }9 v% R: x- E5 C; N- J( G
});! {2 @( Y( E0 R/ W; N6 C
* Z& B2 P$ j7 f' [& m9 X. x
$server->on('message', function (swoole_websocket_server $server, $frame) {
' U1 E( t4 Y7 D# v/ B
, S% [2 p% _5 j
//循环所有数据% \/ }1 I; X; ]8 p. o( \6 `: r2 O
foreach($server->connections as $fd) {$ ~9 `! I: h3 X0 T P) O. V5 ~4 s7 f
//返回数据6 K7 c! I% ]( Q5 d1 P0 ~. v
$server->push($fd, $frame->data);
/ S9 `! K4 r( B6 ~) f' c: K9 [/ V
}
6 C1 \) Q0 x2 X
+ T& `- N9 m' ?7 {
});
, O( Z3 y/ K& X' R7 B9 u" g
7 r" W$ p) }" Z+ W0 h/ M/ U6 t% G
$server->on('close', function ($ser, $fd) {( Y! P: D9 F+ g9 p' ]
echo "用户id: {$fd} 退出\n";
* ?& B" ]# U4 H! u; \3 ~' H" E5 a8 T
});
1 P5 m: D$ w/ J* b: G
# e' E' R! d3 s5 m! l1 b& \+ I' g! F
$server->start();

复制代码