HTML5与视频传输
HTML5在线摄像头应用
HTML5在线摄像头应用
最近在搞一个考试系统，系统要求要有随机拍照的功能，并且摄像头能够收到js的控制。在线摄像头嘛，就那两种实现的方式：cab或者flash。
暂且不论本人从没学过的flash（事实上我已经做了一个flash调用摄像头的demo，虽然是调用成功了，但是对于拍照部分我实在是无力了，况且还有js控制flash部分的代码更是令人头痛。）。
本来之前本人已经开发了一个摄像头的cab，但是activeX嘛，只能给IE用用，兼容性和稳定性都不是很好。于是现在开始研究基于HTML5的在线摄像头。
首先看效果
Html5大家也渐渐的不那么陌生了，至少也得知道只有少数浏览器能很好的兼容HTML5吧。所以测试环境是Chrome 18以上版本，并且在测试前应开启浏览器的MediaStream：在地址栏输入about:flags，启用MediaStream。
然后就可以开始敲代码了。
不过值得注意的是，HTML5的测试不能再本地直接打开html网页，而是需要在http上访问html页面。直接搭建IIS，apache或者直接通过VS来查看html5页面。
1、 视频流
添加一个Video标签，并调用getUserMedia获得用户的摄像头视频流。
<video id="video" width="320px" height="240px"></video><script type="text/javascript">var video = document.getElementByIdx_x("video");navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;if (navigator.getUserMedia) {if (navigator.webkitURL) {navigator.getUserMedia("video", function (stream) {video.src = window.webkitURL.createObjectURL(stream);}, function (error) { alert(error); });}else {navigator.getUserMedia("video", function (stream) {video.src = window.webkitURL.createObjectURL(stream);}, function (error) { alert(error); });}}else {alert("navigator.getUserMedia Error");}</script>
这样，运行以后便可以直接在网页中调用摄像头了。运行后会提示
2、 拍照
用Canvas捕获Video标签的内容并显示，就做到了拍照的效果。
同样先添加一个canvas标签和一个button按钮
<canvas id="canvas1" width="320" height="240"></canvas>
button点击后调用JS，把Video标签中当前的图像显示到canvas中，效果就不做演示了
function scamera() {var videoElement = document.getElementByIdx_x('video');var canvasObj = document.getElementByIdx_x('canvas1');var context1 = canvasObj.getContext('2d');context1.fillStyle = "#ffffff";context1.fillRect(0, 0, 320, 240);context1.drawImage(videoElement, 0, 0, 320, 240);//alert("PaiZhaoSuccess");}
3.上传到服务器
上传到服务器还是用的老办法，把图片转为base64，通过ajax，毫无新意的保存到了服务器上。（需要注意的是，HTML5中toDataURL方法是转为的PNG格式，发送到服务端后会很大一张：320*240的照片要190kb，所以需要在服务器端转格式为jpg，变为10kb一张。详情见demo）
function uploadPhoto()//上传拍照的图片
{showImgCode();request = createRequest();if (request == null) {alert("Unable to create request");}else {//alert("request.OK");var base64Data = document.getElementByIdx_x('textB64').value.replace(/\+/g, "+"); //对参数中的+号编码，防止丢失var url = "AJAX/UploadPic.aspx";request.open("POST", url, true);request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");request.onreadystatechange = responses;request.send("&img=" + base64Data);//alert("send.OK");
}}function responses() {if (request.readyState == 4)//服务器处理结束
{if (request.status == 200)//一切正常
{if (request.responseText == "OK") {alert("上传成功！");}else {alert("上传失败！");alert(request.responseText);}}}}
事实上，通过Html5的其他一些方法，甚至可以做出在线PS的功能，不过这些不在我的需求之内，现在也就不深入研究了。
好了，就这么多，更详细的内容见DEMO中代码：Download
http://v.youku.com/v_show/id_XMzIzMTA0NTQw.html
是时候走下吹坛了：HTML5视频播放器弱点分析
http://hi.baidu.com/fangxin1978/blog/item/fc588917c250652edd54019b.html
第三，Youtube网站还具备将外网视频直接嵌入的功能，而HTML5在这方面的表现则一般不如Flash。
最后，HTML5播放器并不能支持摄像头/麦克风，而眼下Youtube网站的Flash播放器却可以支持使用播放器直接摄像头/麦克风现场录制视频的功能，没有Flash，这一点是很难做到的。
HTML5 MediaStream的运用
HTML5 MediaStream的运用
作者:puterjam 日期:2012-06-08
HTML5在技术上发展越来越快，在输入方面浏览器也开始具备了更多能力。舜子一直在关注视频和音频流在html5的支持，虽然不是什么创新点，但是对html来说是一个非常重要的能力。
Chrome 18开始就把MediaStream放到实验室里，不过记得在19前的这些版本里，getUserMedia 接口一直不太稳定，很容易crash。近期发现Chrome 19.0.1055 dev在这个接口的稳定性上有较好的提升。不过在稳定性上，还需要改善。例如，摄像头使用次数过多后，媒体流会莫名中断，对于没有安装摄像头的检测做得不够完善，可能会导致浏览器crash。不过相信chrome以后的版本会fix这些问题，也希望能在chrome 19 的release版本正式用上这个功能。
这个demo里，其实舜子很早就想用html5来完成gif视频合成的尝试了。也借这个机会，搞了一把极限开发，利用Chrome 的MediaStream，把用户的摄像头作为动画合成的来源。
这里的关键技术并不复杂，在chrome下，我们可以使用navigator.webkitGetUserMedia即可，其他浏览器依次类推moz,o,ms之类。
<video id="v" autoplay></video>
<script>
navigator.webkitGetUserMedia({video:true},
function(stream){
document.getElementById("v").src = webkitURL.createObjectURL(stream); },function(error){
console.log("不支持媒体流～ ", error); });</script>
这段代码正常情况下，你应该可以在浏览器里看到你的摄像头视频了。
另外，舜子还想提到一个非常有用的东西就是URL对象。看到webkitURL了么？createObjectURL 是可以把一些Blob(二进制大对象)转换成一个本地的url，提供给script标签，img，video，audio，甚至file来使用，这样做有什么好处呢？
试想一下，浏览器未来直接在前端处理的资源会很多，你可以合成视频和音频，但是合成后的Blob(二进制大对象)如何给html来播放，那么这时候你就需要构造一个URI来提供，这个和base64URI还不一样。其实createObjectURL会更加强大。
你还可以把一些文本，直接转换成js，构造成一个url，提供给worker使用。减少了worker使用过程中需要多一个请求的开销。
玩demo的，这边请：
http://www.pjhome.net/web/gif_maker/
注意，最好是chrome 19以上的版本，并且确保你真的有摄像头（没摄像头可能会crash浏览器，chrome的bug）。
最后还得感谢，jsgif库。这个库是从as3版本转换过来的。
https://github.com/antimatter15/jsgif
HTML5与视频传输相关推荐
- HTML5与视频传输_拔剑-浆糊的传说_新浪博客
HTML5在线摄像头应用 http://www.cnblogs.com/singlex/archive/2012/06/06/2538339.html HTML5在线摄像头应用 最近在搞一个考试系统, ...
- HTML5实现视频直播功能思路详解
HTML5实现视频直播功能思路详解 最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主,PC端则以 RTMP 为主实时性较好,接下 ...
- js截屏 video_canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- 简单了解音视频传输协议SDP、RTP、RTMP、SIP等
SDP 会话描述协议(SDP)为会话通知.会话邀请和其它形式的多媒体会话初始化等目的提供了多媒体会话描述.参考RFC2327(Request For Comments(RFC),是一系列以编号排定的文 ...
- 视频传输专线解决方案架构特点——Vecloud
1.使用Cloud对象存储保存视频数据; 2.自动伸缩功能实现带宽.关系型数据库的灵活调配伸缩; 3.对接大数据平台,针对视频文件提供一站式处理服务. 视频传输专线解决方案效果 1.无限扩展的对象存储 ...
- 【线上分享】沉浸式视频传输
随着5G时代的到来,超高清.低延迟视频必将成为未来几年内的视频发展趋势之一,而沉浸式视频业务也将迎来其爆发期. 1月21日 19:30,我们邀请到了 金山云 CDN及视频云产品中心高级技术总监 蔡媛 ...
- 视频传输面临的挑战和解决之道
音视频行业的发展,用户对音视频画质的清晰度.播放的流畅度.互动的低延迟.突破终端限制等的要求越来越高.这些需求从客观上对视频的传输提出更高的挑战,而目前不同业务的视频传输方式各有不同,如何基于视频传输 ...
- 基于内容的自适应视频传输算法及其应用
本文内容来自LiveVideoStack线上分享第四季第二期,由湖北经济学院副教授,胡胜红博士为大家介绍如何基于内容分析技术,从用户需求角度标注视频流重要性级别,构建自适应流传输策略,实现语义级QoE ...
- 第三季1：ORTP库的移植与局域网视频传输
以下内容源于朱有鹏课程,如有侵权,请告知删除. 本季课程重点在于使用ORTP库来实现局域网视频实时传输. 一.ORTP的介绍 1.视频网络传输的两种方式 (1)基于下载 比如http(Hyper Te ...
最新文章
- 模板 - 有向图的连通性
- 七天快排优化真的存在！
- php 不能同时提交form
- TF之NN：利用DNN算法(SGD+softmax+cross_entropy)对mnist手写数字图片识别训练集(TF自带函数下载)实现87.4%识别
- 四大开源无人机项目，极客要Get了
- java 观察者模式示例_Java中的观察者设计模式-示例教程
- 关于Android错误 View requires API level 14 (current...
- 单机版kubernetes1.13安装
- Win7下 OpenCV+Qt开发环境搭建
- 做完自动化测试，但别让不会汇报毁了你...
- 如何在 Apple TV 上获得电影推荐？
- linux 卸载keepalived,centos7下keepalived1.4.0安装启动卸载
- 【标题】win只能打开部分软件例如QQ，UU加速器，浏览器无法打开
- 如何让cmd一直默认以管理员身份打开
- 萝卜小铺与店主的故事（十一）
- linux上挂载iso文件,如何在Linux上挂载ISO文件
- 拼音转汉字算法（隐马尔科夫、维特比算法）
- 调整HTML5画布中图像的大小
- 汇承金融科技：开创多渠道资产与资金撮合融资服务模式
- 专访天冕科技许文彬：以超5000万用户为基础，构建完善的隐私计算数据应用生态