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>
分享到:
相关推荐
在直播页面,同样创建一个 WebSocket 连接,监听 `socket.onmessage` 事件。当接收到图像数据时,解析数据URI,创建一个新的 `<img>` 标签,并将其 `src` 设置为接收到的图像数据,从而在页面上显示直播画面。 总结...
在“基于WebSocket协议的简易视频直播”这个项目中,我们可能看到了以下几个关键知识点: 1. WebSocket基础知识:WebSocket协议是HTML5的一部分,它提供了一种在单个TCP连接上进行全双工通信的机制。它通过握手协议...
基于Go的WebSocket直播间推系统 运行方法: git clone https://github.com/HiramJoyce/GoConn.git cd GoConn go run *.go 用户行为分析 进入直播间: 1,访客进入 2,已登录用户进入 离开直播间: 1,访客离开 2...
实施WebSocket直播服务时,还需要考虑安全问题,如防止DDoS攻击、保护用户隐私、验证用户身份等。这通常需要配合SSL/TLS加密以及适当的防火墙策略。 总结起来,"Python-swoole加websocket实现H5直播"项目旨在利用...
在本文中,我们将深入探讨如何使用C#编程语言通过WebSocket协议获取虎牙直播间的弹幕。WebSocket是一种在客户端和服务器之间建立长连接的协议,它允许实时、双向的数据传输,非常适合用于实时通信应用,如直播弹幕...
本文将详细解析如何利用Swoole搭建一个实现多对多直播的平台,包括关键技术和实现步骤。 一、Swoole概述 Swoole是一个原生的PHP异步并行框架,它提供了TCP、UDP、HTTP、WebSocket等网络通信协议的服务器端开发接口...
采用Android SOCKET开发的网络摄像头程序,接收网络传输过来的字节图片信息然后采用sufaceView实时显示
uniapp websocket聊天室源码采用uniapp+Websocket的方式实现websocket聊天室,包含登录页面、聊天室页面,功能有登录、选择聊天室、发送消息、发送道具等。可以编译成小程序,Android/iOS app。源代码精炼,层次清晰...
视频\直播弹幕,支持各种显示样式,表情
标题中的"直播室websocket服务器原码包"指的是一个专门用于构建直播室互动功能的WebSocket服务器源代码包。这个服务器使用Node.js作为后端开发语言,因为Node.js具有异步非阻塞I/O和高性能的特点,非常适合构建实时...
WebRTC直播间演示链接WebRTC介绍原理简单解释:浏览器提供获取屏幕、音频等媒体数据的接口,双方的媒体流数据通过Turn服务器传输。项目构造(非常简单)前端:就一个html文件,js和css直接放里面了,纯手写...
WebSocket-FMP4与WebSocket-FLV视频播放器在Web端的应用是现代互联网实时通信技术的重要实践,其中wsplayer是一款常见的实现此类功能的播放器。本文将深入探讨WebSocket协议、FMP4与FLV格式以及wsplayer播放器的相关...
4. **流媒体服务**:直播视频和音频传输。 5. **物联网**:设备状态的实时反馈和远程控制。 总之,WebSocketSharp为.NET开发者提供了一个强大且易于使用的工具,帮助他们在各种项目中实现WebSocket通信,从而提升...
**直播视频**: 在这个方案中,直播视频指的是通过RTSP协议从服务器获取的实时视频流,可以是单个摄像头的视频,也可以是多个来源的视频流。WebSocket和jsmpeg的结合使得这些视频能在Web浏览器上以较低延迟的形式呈现...
这个插件是版本4.8.0的Windows版,它允许用户通过WebSocket接口控制OBS的过渡效果,极大地增强了直播或视频制作中的场景切换功能。 【描述】"OBS file to use as a plugin" 指出这是一个用于OBS的插件文件。OBS是一...
Java开发基于SpringBoot+WebSocket+Redis分布式即时通讯群聊系统。一个基于Spring Boot + WebSocket + Redis,可快速开发的分布式即时通讯群聊系统。适用于直播间聊天、游戏内聊天、客服聊天等临时性群聊场景。 ...
相比于传统的HTTP协议,WebSocket减少了握手和头部开销,提高了数据传输效率,特别适合实时通信场景,如在线视频直播。 MSE是Web平台的一个API,它允许JavaScript动态地将多媒体数据源(如视频或音频片段)馈送到...
在本文中,我们将深入探讨WebSocket项目案例,尤其是如何利用WebSocket来实现图文直播功能。 WebSocket API设计用于双向通信,这意味着服务器可以主动向客户端推送数据,而不仅仅是响应客户端的请求。这与传统的...