cncml手绘网
标题:
swoole 直播
[打印本页]
作者:
admin
时间:
2020-3-31 19:41
标题:
swoole 直播
主要使用 webstocket
5 p0 F2 U. \8 e2 z
上代码
前端
观看页面
<script type="text/javascript">
/ t1 n2 i0 |& R/ j
var ws = new WebSocket('ws://192.168.0.150:9502');
# n* {6 {% a [# @& R5 l. f8 a* V" }
6 q! R8 c2 p# w* J$ E" b
ws.onopen = function() {
: H6 F; F; F( b" o3 ^6 C# G# X
console.log("连接成功");
* G. r) ]7 E! S) d
};
. }0 I, f1 {& i u
ws.onmessage = function(e) {
* o+ |/ t8 q7 t
console.log(e);
y7 }4 G% c4 }1 s" i* }
9 E2 ~% x3 a$ w7 b( b
var data = e.data;
( H& a. ^# O/ [- K! B" U9 |! V+ z9 ]% ]
document.getElementById('player').src=data;
7 M, a+ r- A% g: J, f& W
};
- w- c' @, x* O# m5 y" _
ws.onerror = function() {
) Y( g+ L7 \$ _
console.log("关闭连接");
' w" e, {& T" W" d
};
6 h! Y4 V0 v& I C: R0 i, Z1 \, F; v3 D
</script>
复制代码
录像页面
, Y7 |: M. @3 ]3 l: E: q
最好用火狐测试。
<canvas id="output" style="display:none"></canvas>
5 w/ Q; E+ b2 F6 S+ I
/ F6 m+ I) ^1 l* u/ @
( `; ]' c5 ?) u7 j& l
2 s6 Z' {0 v6 ]! m
<script type="text/javascript" charset="utf-8">
3 L( |+ B: f, p0 O* v4 f
* Y/ c {4 x/ K" d6 @5 y5 u3 ]
3 @: j* C* ]$ b: }8 }, b2 k6 R
var socket = new WebSocket('ws://192.168.0.150:9502');
1 a& a; z4 {6 T$ Y
//socket.send("嗨我登陆了");
8 c/ X) S1 L( s* U E
( d: |. o8 `: a, j' E; y3 Y
var back = document.getElementById('output');
5 g3 H$ s8 h7 ?) o9 r8 t4 R% Y
var backcontext = back.getContext('2d');
0 a% V1 f5 A% Y% g/ e) B
var video = document.getElementsByTagName('video')[0];
/ j* S2 w: z9 U) @2 X* L
" Z' ?' E+ r6 b" @: ^
var success = function(stream){
2 I- h; x( n# a( I- W3 A
video.src = window.URL.createObjectURL(stream);
- Y1 R) n- Q: R: d
}
1 j( R! e4 F) B: ^$ L# U3 O/ E
4 q3 \+ w# S: n& n+ y( R( o
socket.onopen = function(){
3 k% N# V7 i; w H8 P
draw();
/ J [2 K1 ^: O' j# g+ g p" Z
}
, C) ]) I( Y$ |4 T( }5 @7 H
5 \9 W3 ], E2 P- W7 |! ~0 T
var draw = function(){
J7 j' J* }4 \* b
try{
0 q! i, V$ u& s4 X- @, d7 R# f
backcontext.drawImage(video,0,0, back.width, back.height);
: I$ f/ i/ |% A" J
}catch(e){
* }. \/ {7 w" O7 `
if (e.name == "NS_ERROR_NOT_AVAILABLE") {
; `1 @8 _& {: r" ^% @+ F
return setTimeout(draw, 100);
; T2 w4 _( ~( n- P0 Q
} else {
2 @2 j- V" v: I$ E7 C" x/ o
throw e;
" @1 r( w$ q8 e2 X: C+ D
}
# @( Z) Y m& z, O) K% u! h
}
+ D5 C! Y7 j U- u2 x' `
if(video.src){
' [* q8 d$ X- Z8 i' V: m M& y
socket.send(back.toDataURL("image/jpeg", 0.5));
! y+ i: k$ {, q9 y; V' }0 ]
}
1 J6 x" k4 N; I
setTimeout(draw, 100);
8 F, C& V- P. m1 Z$ y: t5 P7 B4 K
}
3 M# H/ H4 a# A" U8 |: R. K& K7 e
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
( G& }3 S M7 E4 g. z! p7 Q0 @
navigator.mozGetUserMedia || navigator.msGetUserMedia;
/ D) K2 O4 A! o" b2 Q
navigator.getUserMedia({video:true, audio:false}, success, console.log);
4 G7 u9 L) h- z6 s/ X* C l
</script>
复制代码
php
! a2 Z9 p& x: ~5 q) _# M& s+ I
9 U( ]' N) ]0 f4 T I1 N
$server = new swoole_websocket_server("0.0.0.0", 9502);
& q. W: B) p! h# V
, i8 {0 l5 Y p' r& g0 Q' E
$server->on('open', function (swoole_websocket_server $server, $request) {
) j" _9 B" n T, u* u# X
?. z$ [. ^# O
echo "新用户id:{$request->fd}加入了\n";
3 |& k/ E/ e$ D6 F- p6 i w, G
// echo "server: handshake success with fd{$request->fd}\n";
( }9 W$ s G' m! @# g
});
8 V! I% `: @, L+ E, k
$ L: K2 Q4 o+ Z8 k# M$ u/ x/ \
$server->on('message', function (swoole_websocket_server $server, $frame) {
9 V6 k" a/ h; H! L/ k& ?
/ y B* @+ D J/ K; G. \7 ~- e
//循环所有数据
6 o! V* D3 x1 u! C; `7 J1 @
foreach($server->connections as $fd) {
( c1 U: ^( R! F% F4 A
//返回数据
: D* Z& u( `8 g( V( n9 A) E
$server->push($fd, $frame->data);
. M% l% v, [8 h. H6 X: z
}
( Q4 T7 V$ A4 _) x6 b6 M
z+ N! g5 {9 q, P; |
});
* a, C! @7 L# F
( {! K4 ^, H7 ^$ O
$server->on('close', function ($ser, $fd) {
/ P# E, B, h: M7 O, `) f' A
echo "用户id: {$fd} 退出\n";
2 k3 c- v+ N# N- e1 I
});
- O7 S( G6 c* o$ E4 w
: I6 \: M, u* } w. ^
$server->start();
复制代码
, O2 V. B7 b) K) U; v6 _
; Z' {9 o+ }: l
& c' l* @! j( ^
" k" U5 D! k4 R+ Q& B
1 c& A$ {3 c9 S6 G7 |
! b. e/ T9 ?/ H( h
2 W+ |( Y7 l: S' O
5 z9 V* ~ q3 D, s0 G3 F
& b7 s; J# }- C4 d& [
8 l- H- v$ T! x1 h4 x& u
! J9 J$ c. b) E! D* H: B4 F
0 \3 z& d( A" q5 E9 ]1 Q* c$ v
欢迎光临 cncml手绘网 (http://www.cncml.com/)
Powered by Discuz! X3.2