swoole 直播

admin

主要使用 webstocket
' O) }- m3 U0 J+ [- f上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   ! }2 j- c6 L# o
3. 
   ( P+ E! A- |$ ~; D9 s$ k
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   / U$ V6 {# C8 B) E' O
6. };
   4 d7 @4 f& z2 w1 {8 E; W5 u
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   & T( v0 c, {# W' W
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    $ R7 ~# r/ O3 `5 Q5 e
12. };
    & U$ \  x* \, H4 r* _9 J
13. ws.onerror = function() {
    3 h1 N( t$ a: F
14.     console.log("关闭连接");
    ( x; f6 i1 L. a& I4 e
15. };
    ) }1 i9 p1 I9 R( P6 b
16. </script>

复制代码

录像页面

7 V6 ^) V6 m$ A3 Q, P8 ?3 }! C: q

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   1 b' z6 i; ^! P3 I! K4 c6 R
2. 
   
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   8 Y1 I& a% ?, H  E
9.     //socket.send("嗨我登陆了");
   5 i, a+ [: e) Y0 G
10. 
    4 g# I+ O! @$ q
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    ' u% b* P5 Q& v  D% Y$ I9 Z0 X6 A/ O
13.     var video = document.getElementsByTagName('video')[0];
    % @  p! b! {* `) F5 t# h( C- \% c
14.    
    2 a2 ]* o  E$ a9 K7 U  h
15.     var success = function(stream){
    & A4 C- z! h4 J/ l9 Z
16.         video.src = window.URL.createObjectURL(stream);
    . U1 R2 y5 t) L) R, N) d
17.     }
    9 b( z' N3 p0 A2 H; m$ B
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    2 ^9 t4 x* P* B2 P0 G3 [  U
21.     }
    $ Q3 k) z* F* a
22. 
    
23.     var draw = function(){
    
24.         try{
    " ]4 S  t) j' @1 M2 E2 K
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    9 x+ x" j1 A4 B& H2 U
30.                 throw e;
    
31.             }
    % t! G  C& ^, ?; s, c2 ?
32.         }
    $ n" t, b9 ^7 G* Q
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    ( L& V2 z- [' @! j
35.         }
    
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    # E) ^+ P  C& h4 m& S
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    / w9 K: g  ~5 L; H$ A
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   ) ^9 J9 Q. O3 b4 I" R  ?$ {; M( f
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   * X8 n+ A" v8 g5 x
6. 
   ; N: y. I/ i/ X, t3 N% ~" D: d
7.     echo "新用户id:{$request->fd}加入了\n";
   2 m3 F6 @3 Z0 |! W- P
8.    // echo "server: handshake success with fd{$request->fd}\n";
   & ?% c$ g: I/ b; n$ Y
9. });
   
10. 
    6 d% B( A/ z: q: J9 U! ?; A( \
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    1 _9 G0 A0 ?6 P. S3 o
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    ; s# z8 M  l* H$ M1 p. E0 W! K( k
15.         //返回数据
    2 E+ v  [: Z' \1 U1 \
16.         $server->push($fd, $frame->data);
    6 Y( M% r: T6 B3 s0 z  V( P) x
17.     }
    
18. 
    
19. });
    / G2 L8 d8 j* _
20. 
    6 B% K. X, ^: A$ Z' R7 f4 A6 K( {
21. $server->on('close', function ($ser, $fd) {
    * m9 H: K' L4 Q  k2 _& w( f
22.     echo "用户id: {$fd} 退出\n";
    2 b7 u4 j5 G6 v1 x: ^+ k
23. });
    4 ]$ Q& K8 g3 f- _0 V% m; t
24. 
    ! h& ]) Q" m" \0 }) w) Z# U
25. $server->start();

复制代码

/ C! l+ i& K, L5 b' |- r2 S% ]2 U( B
( a4 A5 O# j( z% n2 \/ {
! M3 W! V; I' E. c) S& ~/ J
/ S" z8 Q$ r, p
0 ]) F  D! ]6 p: Q
0 u9 ~+ l& O- [7 w( w# p2 V
+ P5 |% o$ K2 `" t

, G' v8 {0 n. ^1 P

7 z# C+ L* u0 u1 q) N# S