cncml手绘网

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

---

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

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   3 q3 y2 {; K+ p0 q. \
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   9 {3 n9 z- W& E5 ]0 C* {/ y
8.    console.log(e);
   
9. 
   
10.    var data = e.data;
    ! ]- U% A) R; S
11.    document.getElementById('player').src=data;
    , l) l: |% c% Q8 W
12. };
    8 O$ T# _+ I1 i
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    
15. };
    9 y4 }! `  v' ^& X1 y
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   2 J8 h( A- d6 W% A/ ?. O
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   ; x* |$ y, o9 l0 v! E! s" p# B  L
9.     //socket.send("嗨我登陆了");
   4 ?1 ^# T% E+ Y6 ^2 A
10. 
    
11.     var back = document.getElementById('output');
    ( k6 ~/ _- _: V) Q# x
12.     var backcontext = back.getContext('2d');
    1 J% \+ n4 Q+ T$ I, i& H% @  Q2 ~
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    ( T2 o6 @8 A! L# t, U' T
15.     var success = function(stream){
    ! k% ^  o+ U, |# O! y3 \$ g
16.         video.src = window.URL.createObjectURL(stream);
    ( O; }/ l/ `3 O' Q
17.     }
    5 N* `% e! ?2 r: ~; ?8 L
18. 
    9 h) v+ ^' G& i: v8 U
19.     socket.onopen = function(){
    " T- n0 e3 t* H7 E
20.         draw();
    # q, F2 _1 z* t; e1 h: X, e
21.     }
    $ C. ^; m9 E* R% V3 Y/ @
22. 
    # `: g4 c& P& Q8 q
23.     var draw = function(){
    * v4 C9 w* M4 `  h* U" Y) q
24.         try{
    4 J/ f. X, q# A1 V' b* s
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    ) r# \( r, H3 Q) n( p
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    
31.             }
    # s2 ^; o6 c1 _6 F. u1 B4 z
32.         }
    , D9 k5 a( `0 I- f1 L
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    1 o& C( |4 m( u% A- f
36.         setTimeout(draw, 100);
    
37.     }
    7 l$ t( X6 `! e/ B' J: A7 g9 I
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    8 m6 d- l/ M( C8 B" n
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    $ t) P" l0 D" ^; h$ `
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    5 U9 `" u4 Z: U3 S
41. </script>

复制代码

1. php
   6 _3 k0 M! L, D6 S: L, D
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   # i9 c6 A7 s5 p: k) _
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   ; \9 T( W+ E0 C/ A  {+ |8 N
8.    // echo "server: handshake success with fd{$request->fd}\n";
   9 f9 _) }0 g) P$ N7 A; c' U
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    & K' X3 I+ A/ D& m: K' \5 ?( C
15.         //返回数据
    4 W) ^+ h! @% ?/ g0 C6 g
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    
20. 
    5 O- B. l/ v2 \
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    7 Q5 T! s2 N9 [. j9 s$ W+ {+ V! `
24. 
    
25. $server->start();

复制代码

* q7 E2 f) \' t" q# n2 F' r
. J" @8 ^5 Y$ }8 O5 v2 n( e7 Q% l1 ~5 E1 g
# v$ ?( b; Z* Z. O  i# `3 z
& A! h5 c2 R& k' N3 v6 s' ]% m
7 x: G8 S) ], V! }



% j" l* I! o" K2 X! k$ u, F
9 A" U4 C5 v$ K+ n

---

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

Powered by Discuz! X3.2