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 ...
随机推荐
- Android中常用适配器及定义自己的适配器
转载:http://blog.chinaunix.net/uid-11898547-id-3303153.html http://www.tudou.com/home/_328390108/item ...
- Eclipse的java代码出错：The import org.apache cannot be resolved
Eclipse中,折腾java代码. 把之前在android中的代码拿过来使用. 结果出现The import org.apache cannot be resolved的错误: [解决过程] 1.这 ...
- 有符号的范围,-128~+127详解（zt）
这是一个困惑了我几年的问题,它让我对现在的教科书和老师极其不满,从我N年前开始摸电脑时,就几乎在每一本C++教科书上都说,8位有符号的取值范围是-128~+127,为什么不是-127~+127呢,后来 ...
- PHP.7-HTML+CSS（一）-HTML语法、常用字符实体、颜色代码
HTML+CSS HTML是WEB页面的描述性语言,浏览器解释的语言 CSS则是为HTML制定样式的机制,为浏览器解释的语言.它不能独立使用,没有HTML就没有CSS,定义网页的外观和布局(字体.背景 ...
- Number Game poj1143
Description Christine and Matt are playing an exciting game they just invented: the Number Game. The ...
- oracle存储过程分页
1.首先在oracle中建包体,用于游标返回当前数据记录集 CREATE OR REPLACE PACKAGE pkg_query AS TYPE cur_query IS REF CURSOR; E ...
- 【转载】Android使用Application总结
Application 配置全局Context 第一步.写一个全局的单例模式的MyApplication继承自Application 覆盖onCreate ,在这个方法里面实例化Application ...
- python(1) - 输入和输出
前面已经说过了,print()函数括号里加上字符串,就可以实现输出 >>> print('This is Python!') This is Python! print()函数也可以 ...
- mysql导入数据load data infile用法
mysql导入数据load data infile用法 基本语法: load data [low_priority] [local] infile 'file_name txt' [replace | ...
- [改善Java代码]在switch的default代码块中增加AssertionError错误
switch的后跟枚举类型,case后列出所有的枚举项,这是一个使用枚举的主流写法,那留着default语句似乎没有任何作用了,程序已经列举出了所有的可能选项,肯定不会执行到default语句,. 错 ...