cncml手绘网

标题: swoole 直播 [打印本页]

---

作者: admin    时间: 2020-3-31 19:41
标题: swoole 直播

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   ( Y1 M" L: h9 h3 O2 k8 c
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   ) p  N, V: k9 O5 ?7 E4 v$ g$ Z1 k  s8 k4 }
3. 
   6 J8 [& n" `* S% D
4. ws.onopen = function() {
   
5.     console.log("连接成功");
     `7 P$ K0 M3 w+ R
6. };
   7 M* t; W# c4 Q! D' J& I1 q
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   5 \2 H2 w& G5 q: s
9. 
   
10.    var data = e.data;
    # O& d9 k$ ^" f1 D) i+ A) u
11.    document.getElementById('player').src=data;
    ( `9 y8 u$ M, P
12. };
    
13. ws.onerror = function() {
    ! E" m( _- o9 f% X. A
14.     console.log("关闭连接");
    5 R1 J+ T+ S9 Z; K7 D4 N
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   ( ]; J+ }1 ?* X) m' P7 T
2. 
   
3. 
   / x2 ?- U+ J9 E
4. 
   ; _/ p; q/ b/ I+ U& D% r4 |
5. <script type="text/javascript" charset="utf-8">
   
6. 
   8 {" A! A3 l9 A5 \5 R4 W* F! ~5 G
7. 
   : J' W! W6 v: ]" k
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   $ X9 b0 S; a* U! _4 A0 ~3 w
10. 
    ! S% Z! Q7 S' G% f  m
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    ' m4 ?% i+ f) B2 o5 K8 D& J
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    5 i0 }8 X3 c& ^! u$ C& T
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    : n9 f  C9 k6 T- j& W
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    * j  Z8 o& S* ^% J" o2 y; L
21.     }
    / e% s% U/ J" b. F
22. 
    2 {8 P' w6 d: i# `! x
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    6 Q% `: V& j+ u; Q
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    ; a+ H; f5 N: i* d( G! y) m: x2 a2 I
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    0 Q' n9 e+ C8 V+ B1 Z4 f1 P
31.             }
    
32.         }
    ' I- A$ H3 [1 n# @' B' H9 z4 O0 W2 i
33.         if(video.src){
    3 x6 x1 x; m- f; d" i: v% j
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    5 k! F7 U3 [% ]9 k( l% ~
36.         setTimeout(draw, 100);
    
37.     }
    ; I- w9 z9 M" r0 u# K/ e+ V9 |
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    4 y5 \) N- k3 H( W' ~+ V
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
      w3 H! K( x- c2 _0 P# J1 r
41. </script>

复制代码

1. php
   , B5 F, X% f2 w' f; W
2. 
   % `. m* b6 z! E. K3 v
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   9 h! A( w, s% o; p
4. 
   - P" t  ~9 u- L" Z8 t7 Y
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   ' R, [. z; q/ Q( @( M& T
6. 
   5 a* O( y8 V3 n% d' @
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   8 K( f' B; T) @. A, u$ V4 q5 G$ ^
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    % T0 V8 B0 P- H! ~
12. 
    ) b. L5 M6 i0 c& ~2 ]
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    7 T" ~) [3 |  g0 F2 V! D0 L) G
17.     }
    
18. 
    
19. });
    4 p1 T' U) F' ^; `! Y- d. a  y$ ?1 A
20. 
    + P, `' G1 o& P" C9 E2 W
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    7 a0 i2 C( i* `. i
25. $server->start();

复制代码

8 D# f: T+ ^4 y6 r
7 r0 _: Z: j+ {
! C- e, G& T* b4 I& F


2 g5 g5 p2 l6 d2 I5 N4 _  U


( R8 Z4 u6 o7 J% {7 \  y

5 }9 `  E7 d% ?4 o0 J# b( T) l
8 R8 j* p! N! L. J0 D) @9 B( {

---

欢迎光临 cncml手绘网 (http://www.cncml.com/)

Powered by Discuz! X3.2