HTML5 + SOCKET视频传输
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>live cam 录像页面</title>
</head>
<body>
<video autoplay id="sourcevid" style="width:320;height:240px"></video> <canvas id="output" style="display:none"></canvas> <script type="text/javascript" charset="utf-8">
// 发送画面
//var socket = new WebSocket("ws://"+document.domain+":8080");
var back = document.getElementById('output');
var backcontext = back.getContext('2d');
var video = document.getElementsByTagName('video')[0]; var success = function(stream){
video.src = window.URL.createObjectURL(stream);
} /*
socket.onopen = function(){
draw();
}
*/ 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, 100);
} else {
throw e;
}
}
// socket.send(back.toDataURL("image/jpeg", 0.5));
setTimeout(draw, 100);
} navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia
|| navigator.msGetUserMedia;
navigator.getUserMedia({video:true, audio:false}, success, console.log); /*
// 接收画面
var receiver_socket = new WebSocket("ws://"+document.domain+":8008");
var image = document.getElementById('receiver');
receiver_socket.onmessage = function(data)
{
image.src=data.data;
}
*/
</script>
</body>
</html>
HTML5 + SOCKET视频传输的更多相关文章
- 基于TCP协议的项目架构之Socket流传输的实现
项目背景 某银行的影像平台由于使用时间长,服务器等配置原因,老影像系统满足不了现在日益增长的数据量的需求,所以急需要升级改造.传统的影像平台使用的是Oracle数据库和简单的架构来存储数据(视频.图 ...
- 基于Live555实现RtspServer及高清高分辨率和高码率视频传输优化
基于Live555实现RtspServer及高清高码率视频传输优化 最近做了一些pc和嵌入式平台的RTSP服务器项目,大多数的要求是简单但是功能全面,并且性能还要强劲.综合考虑后,基本都是在基于liv ...
- linux下视频传输测试
本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 在上一篇<ubuntu下基于qt+OpenCV控制摄像头>的基础上测试了视频传输. 环境:主 ...
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
- Protobuf3 + Netty4: 在socket上传输多种类型的protobuf数据
Protobuf序列化的字节流数据是不能自描述的,当我们通过socket把数据发送到Client时,Client必须知道发送的是什么类型的数据,才能正确的反序列化它.这严重影响限制了C/S功能的实现, ...
- 不完全解决Android微信HTML5 播放视频的问题(不显示控制条，可交互)
首先你需要知道以下内容: http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93 这是微信为广告商开放的API,我一直认为只有 ...
- Android WebView 总结 —— 使用HTML5播放视频及全屏方案
在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频. 1.让视频在各个Android版本能够正常播放 在AndroidManif ...
- HTML5 Socket通信
HTML5 Socket通信使用起来也是相当不从的,先将部分JS代码与大家分享: var socket; function connect() { var host = "ws://&quo ...
随机推荐
- K-means Algorithm
在监督学习中,有标签信息协助机器学习同类样本之间存在的共性,在预测时只需判定给定样本与哪个类别的训练样本最相似即可.在非监督学习中,不再有标签信息的指导,遇到一维或二维数据的划分问题,人用肉眼就很容易 ...
- MySQL查询优化--细节理论
select的 high_priority还是比较有用,在实践中,平均5~6秒提高到3秒 ======================================================= ...
- 将 Discuz X3 手机版默认的“标准版”改为“触屏版”
修改前请备份原文件 1.找到“\source\class\discuz\discuz_application.php”,将其中的 'mobiletpl' => array('1' =&g ...
- 小白日记6：kali渗透测试之被动信息收集（五）-Recon-ng
Recon-ng Recon-NG是由python编写的一个开源的Web侦查(信息收集)框架.Recon-ng框架是一个全特性的工具,使用它可以自动的收集信息和网络侦查.其命令格式与Metasploi ...
- Swift 3必看：新的访问控制fileprivate和open
在swift 3中新增加了两中访问控制权限 fileprivate和 open.下面将对这两种新增访问控制做详细介绍. fileprivate 在原有的swift中的 private其实并不是真正的私 ...
- Maven学习小结（六 setting.xml详解[转]）
当Maven运行过程中的各种配置,例如pom.xml,不想绑定到一个固定的project或者要分配给用户时,我们使用settings.xml中的settings元素来确定这些配置.这包含了本地仓库位置 ...
- Android（java）学习笔记80：UDP协议发送数据
UDP协议发送数据:我们总是先运行接收端,再运行发送端发送端: 1 package cn.itcast_02; import java.io.IOException; import java.net. ...
- jq层次选择器
二. 层次选择器 1. parent > child(直系子元素) $(document).ready(function () { // 选取div下的第一代span元素,将字体颜色设为红色 $ ...
- MYSQL基础笔记（四）-数据基本操作
数据操作 新增数据:两种方案. 1.方案一,给全表字段插入数据,不需要指定字段列表,要求数据的值出现的顺序必须与表中设计的字段出现的顺序一致.凡是非数值数据,到需要使用引号(建议使用单引号)包裹. i ...
- [转]Speeding Up Websites With YSlow
本文转自:http://net.tutsplus.com/tutorials/other/speeding-up-websites-with-yslow/ We all know there are ...