cncml手绘网

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

---

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

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   , b4 D6 }5 A  ]* \  ^$ N4 @
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   : E. f! j5 y) ^" v
4. ws.onopen = function() {
   : M% [5 O7 f) Z' A) d+ U
5.     console.log("连接成功");
   0 V. q- x& a$ A7 s+ X% d- z( g: H
6. };
   
7. ws.onmessage = function(e) {
   0 I: k) Q/ J, d) N. u* C) p: _' L$ H
8.    console.log(e);
   ; e3 ]. ]* }2 ]" G2 {! V/ [7 f
9. 
   6 Y; A$ C# m" L" |- f
10.    var data = e.data;
    4 L+ r$ S1 W) |8 |
11.    document.getElementById('player').src=data;
    
12. };
    
13. ws.onerror = function() {
    & h$ E, d& l2 N
14.     console.log("关闭连接");
    ) Y2 |- B  _0 a: t/ p5 m+ e+ r& s
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   
4. 
   3 h" H' g  C' d3 B$ ?/ i
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   8 R" p8 k7 }9 l
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    4 q) a5 t0 p: A4 R  ~0 l
11.     var back = document.getElementById('output');
    0 D; I% p) b1 @. g
12.     var backcontext = back.getContext('2d');
    & y+ o" @0 v& G' P" I# P$ q' s
13.     var video = document.getElementsByTagName('video')[0];
    & g* m1 v4 x  c& |6 W' H
14.    
    1 }$ y. w) {. l2 }
15.     var success = function(stream){
    9 F* p& ^1 {' d) P$ \1 W4 J; P
16.         video.src = window.URL.createObjectURL(stream);
    9 d; C' g# n3 J1 h  k. b
17.     }
    
18. 
    ' e( D' j6 {! I! b2 P# J9 N
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    
22. 
    ; H" t" r; y) C
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    1 ~+ J  |# K2 Y7 M* q' n
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    ! i6 y2 V3 Z: {1 _# R+ M; U
28.                 return setTimeout(draw, 100);
    # c$ H, B( W6 a7 W, ?
29.             } else {
    0 D6 T( x$ t# b1 N0 V7 I0 |& u
30.                 throw e;
    
31.             }
    " O6 T+ P: {' D6 r7 v% R7 i9 M
32.         }
    
33.         if(video.src){
    / ?5 V$ [' b( N  q4 g) Y6 A9 H
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    * [7 ?2 X0 G5 r  E5 ~$ @
35.         }
    ) j2 C2 }, Z* N- s6 Z0 P* R, C2 C
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    / E, h) D7 A8 v
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    6 z1 p/ i0 I9 K$ Y7 x3 U
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   
2. 
   + ]1 i* `! u4 Y8 x- q% [* W3 G( _
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   5 r) i  @  D4 N- O
4. 
   2 ]# b  E4 a3 P6 A" ~( @8 N
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   7 E+ ]5 G* D; u' l. k7 K" k
7.     echo "新用户id:{$request->fd}加入了\n";
   & G! j1 M: f* A+ q; D9 E
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    . O$ n/ j" ^1 S" ?
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    " X% A6 q0 ^, e1 u* c' p! n- E3 I2 M  w
20. 
    7 i3 O. ~0 a! C
21. $server->on('close', function ($ser, $fd) {
    + l. {8 c# S' _2 M& e( Q) j7 _
22.     echo "用户id: {$fd} 退出\n";
    ; I8 A, x/ {; Q
23. });
    
24. 
    3 m* P5 J/ c) C* ]% c1 p# Y7 j
25. $server->start();

复制代码

: q, U7 C' t+ L1 }+ E


! `' l( j2 K1 m3 C0 Z% |0 |! c
1 _' t! H; J  U* {

! d# Q/ N7 b& j, t* H4 a0 Z

---

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

Powered by Discuz! X3.2