`
haoningabc
  • 浏览: 1477708 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

websocket直播

阅读更多
1.websocket转发的最简单server
2.h5接收websocket数据,写到img里
3.h5获取摄像头,并send到另一端

server代码:
sendserver.js
var express = require('express'),
app = express(),
server = require('http').createServer(app);

server.listen(3000);
app.get('/', function(req, res) {
    res.sendfile(__dirname + '/send.html');
    res.sendfile(__dirname + '/receive.html');
});

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({server: server});

// 存储socket的数组,这里只能有2个socket,每次测试需要重启,否则会出错
var wsc = [],
index = 1;
// 有socket连入
wss.on('connection', function(ws) {
    console.log('connection');
    // 将socket存入数组
    wsc.push(ws);
    // 记下对方socket在数组中的下标,因为这个测试程序只允许2个socket
    // 所以第一个连入的socket存入0,第二个连入的就是存入1
    // otherIndex就反着来,第一个socket的otherIndex下标为1,第二个socket的otherIndex下标为0
    var otherIndex = index--,
    desc = null;

    if (otherIndex == 1) {
        desc = 'first socket';
    } else {
        desc = 'second socket';
    }
    // 转发收到的消息
    ws.on('message', function(message) {
        wsc[otherIndex].send(message, function (error) {
            if (error) {
                console.log('Send message error (' + desc + '): ', error);
            }
        });
    });
});


接收端代码:
receive.html
<img id="receiver" style="width:1600px;height:900px"/>
<script type="text/javascript" charset="utf-8">
        //创建一个socket实例
        var receiver_socket = new WebSocket("ws://localhost:3000");
        alert("ws://"+document.domain+":3000")
        var image = document.getElementById('receiver');
         // 监听消息
        receiver_socket.onmessage = function(data)
        {
            console.log("onmessage");
            image.src=data.data;
        }
</script>

发送端代码:
send.html

~
~
~
<video autoplay id="sourcevid" style="width:1600;height:900px"></video>

<canvas id="output" style="display:none"></canvas>^@<script type="text/javascript" charset="utf-8">
        //创建一个+实例
        var socket = new WebSocket("ws://localhost:3000");
        var back = document.getElementById('output');
        //返回一个用于在画布上绘图的环境。
        var backcontext = back.getContext('2d');
        var video = document.getElementsByTagName('video')[0];
        var success = function(stream){
            //获取视屏流,转换为url
            //video.src = window.URL.createObjectURL(stream);
            video.srcObject = stream;
        }
        //打开socket
        socket.onopen = function(){
            draw();
            console.log("open success")
        }
        // 将视频帧绘制到Canvas对象上,Canvas每100ms切换帧,形成肉眼视频效果
        var draw = function(){
            try{
                backcontext.drawImage(video,0,0, back.width, back.height);
            }catch(e){
                if (e.name == "NS_ERROR_NOT_AVAILABLE") {
                    return setTimeout(draw, 10);
                } else {
                    throw e;
                }
            }
            if(video.srcObject){
                // Canvas的内容转化成PNG data URI并发送到服务器,0.5为和压缩系数
                socket.send(back.toDataURL("image/jpeg", 0.5));
            }
            setTimeout(draw, 10);
        }
        //调用设备的摄像头,并将资源放入video标签
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia;
        navigator.getUserMedia({video:true, audio:false}, success, console.log);
    </script>

分享到:
评论

相关推荐

    HTML5中的websocket实现直播功能

    在直播页面,同样创建一个 WebSocket 连接,监听 `socket.onmessage` 事件。当接收到图像数据时,解析数据URI,创建一个新的 `&lt;img&gt;` 标签,并将其 `src` 设置为接收到的图像数据,从而在页面上显示直播画面。 总结...

    基于websocket协议的简易视频直播

    在“基于WebSocket协议的简易视频直播”这个项目中,我们可能看到了以下几个关键知识点: 1. WebSocket基础知识:WebSocket协议是HTML5的一部分,它提供了一种在单个TCP连接上进行全双工通信的机制。它通过握手协议...

    GoConn:基于Go的WebSocket直播间推系统

    基于Go的WebSocket直播间推系统 运行方法: git clone https://github.com/HiramJoyce/GoConn.git cd GoConn go run *.go 用户行为分析 进入直播间: 1,访客进入 2,已登录用户进入 离开直播间: 1,访客离开 2...

    Python-swoole加websocket实现H5直播

    实施WebSocket直播服务时,还需要考虑安全问题,如防止DDoS攻击、保护用户隐私、验证用户身份等。这通常需要配合SSL/TLS加密以及适当的防火墙策略。 总结起来,"Python-swoole加websocket实现H5直播"项目旨在利用...

    C#通过WebSocket获取虎牙直播间弹幕

    在本文中,我们将深入探讨如何使用C#编程语言通过WebSocket协议获取虎牙直播间的弹幕。WebSocket是一种在客户端和服务器之间建立长连接的协议,它允许实时、双向的数据传输,非常适合用于实时通信应用,如直播弹幕...

    swool多对多直播

    本文将详细解析如何利用Swoole搭建一个实现多对多直播的平台,包括关键技术和实现步骤。 一、Swoole概述 Swoole是一个原生的PHP异步并行框架,它提供了TCP、UDP、HTTP、WebSocket等网络通信协议的服务器端开发接口...

    Android SOCKET开发的网络摄像头程序

    采用Android SOCKET开发的网络摄像头程序,接收网络传输过来的字节图片信息然后采用sufaceView实时显示

    uniapp websocket聊天室源码 v1.0

    uniapp websocket聊天室源码采用uniapp+Websocket的方式实现websocket聊天室,包含登录页面、聊天室页面,功能有登录、选择聊天室、发送消息、发送道具等。可以编译成小程序,Android/iOS app。源代码精炼,层次清晰...

    WSWebSocket

    视频\直播弹幕,支持各种显示样式,表情

    直播室websocket服务器原码包

    标题中的"直播室websocket服务器原码包"指的是一个专门用于构建直播室互动功能的WebSocket服务器源代码包。这个服务器使用Node.js作为后端开发语言,因为Node.js具有异步非阻塞I/O和高性能的特点,非常适合构建实时...

    WebRTC-:H5的WebRTC + Websocket 简单实现的直播间

    WebRTC直播间演示链接​WebRTC介绍​原理简单解释:​浏览器提供获取屏幕、音频等媒体数据的接口,​双方的媒体流数据通过Turn服务器传输。​项目构造(非常简单)前端:就一个html文件,js和css直接放里面了,纯手写...

    dotnet-websocketsharp是WebSocket协议客户端和服务器的C实现

    4. **流媒体服务**:直播视频和音频传输。 5. **物联网**:设备状态的实时反馈和远程控制。 总之,WebSocketSharp为.NET开发者提供了一个强大且易于使用的工具,帮助他们在各种项目中实现WebSocket通信,从而提升...

    jsmpeg+websocket.rar

    **直播视频**: 在这个方案中,直播视频指的是通过RTSP协议从服务器获取的实时视频流,可以是单个摄像头的视频,也可以是多个来源的视频流。WebSocket和jsmpeg的结合使得这些视频能在Web浏览器上以较低延迟的形式呈现...

    obs-websocket-4.8.0-Windows (1)_OBS_obs-websocket_Transition_

    这个插件是版本4.8.0的Windows版,它允许用户通过WebSocket接口控制OBS的过渡效果,极大地增强了直播或视频制作中的场景切换功能。 【描述】"OBS file to use as a plugin" 指出这是一个用于OBS的插件文件。OBS是一...

    websocket+Mse视频流播放器

    相比于传统的HTTP协议,WebSocket减少了握手和头部开销,提高了数据传输效率,特别适合实时通信场景,如在线视频直播。 MSE是Web平台的一个API,它允许JavaScript动态地将多媒体数据源(如视频或音频片段)馈送到...

    java开发基于SpringBoot+WebSocket+Redis分布式即时通讯群聊系统.zip

    Java开发基于SpringBoot+WebSocket+Redis分布式即时通讯群聊系统。一个基于Spring Boot + WebSocket + Redis,可快速开发的分布式即时通讯群聊系统。适用于直播间聊天、游戏内聊天、客服聊天等临时性群聊场景。 ...

    websocket项目案例

    在本文中,我们将深入探讨WebSocket项目案例,尤其是如何利用WebSocket来实现图文直播功能。 WebSocket API设计用于双向通信,这意味着服务器可以主动向客户端推送数据,而不仅仅是响应客户端的请求。这与传统的...

    c# websocket Demo实例可用

    - 数据流传输:例如股票市场实时报价、视频直播、物联网设备的数据推送等。 6. **注意事项**: - 安全性:使用WebSocket时,应考虑使用HTTPS来加密传输数据,防止中间人攻击。 - 连接管理:处理大量并发连接时,...

Global site tag (gtag.js) - Google Analytics