HTML5 MediaStream的运用

Blog picture template artx 530x185 px

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,把用户的摄像头作为动画合成的来源。

HTML5 GIF Maker 2

这里的关键技术并不复杂,在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



[本日志由 puterjam 于 2012-06-08 04:11 PM 更新]
上一篇: QQ闹钟 v2 for iPhone 发布
下一篇: 给小米手机打包 Beats Audio 音效
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: html5 mediastream gif
相关日志:
评论: 17 | 引用: 0 | 查看次数: -
singno[2014-05-13 11:02 PM | | | 27.38.32.16 | del | 回复回复]
哈哈,居然搜索到zishun的blog了。
wang[2013-09-28 11:11 AM | | Mail To:abc123wangli@163.com | 60.212.41.22 | del | 回复回复]
你好,能问下,如何将这个视频流以ogg/mp4/webm的格式文件存储在本地,而不是用服务器。非常感谢。
aaaaaaaaaaaaaaaaaaaaaaaa[2013-08-05 08:44 PM | | Mail To:newqtyj163@163.com | 115.84.242.146 | del | 回复回复]
请教下 使用浏览器(chome),凯时娱乐城onlinecaipiao.com,获取的摄像头内容为何没有使用手机自带照相机或APP拍照时获取的内容清晰? 不知道你是否又遇到这种情况
还有就是摄像头获取的内容尺寸如何设置? 默认一定是640*480吗?
erbaor1[2013-06-12 09:20 PM | | Mail To:erbaor@163.com | 180.111.45.217 | del | 回复回复]
博主你好,你在这里用:
CAMERA.src = webkitURL.createObjectURL(stream);
获取视频流,然后后面去截图。请教有没有什么方法直接把流保存成文件?
或者有没有js插件可以实现类似的摄像头录制视频保存的功能?谢谢啦~~~
jay[2013-04-12 02:25 PM | | Mail To:61439476@qq.com | 222.92.98.204 | del | 回复回复]
请教下 使用浏览器(chome)获取的摄像头内容为何没有使用手机自带照相机或APP拍照时获取的内容清晰? 不知道你是否又遇到这种情况
还有就是摄像头获取的内容尺寸如何设置? 默认一定是640*480吗?
有彬[2012-09-26 10:24 AM | | Mail To:youbi7n@gmail.com | 113.91.126.211 | del | 回复回复]
我比较喜欢博主的这个软件!能将这个程序发给我研究研究吗?366988836@qq.com
66666666666[2012-07-28 02:27 PM | | Mail To:333@777.com | 113.128.141.205 | del | 回复回复]
333333
递贝[2012-07-19 01:29 AM | | Mail To:media-service@hotmail.com | 60.194.176.186 | del | 回复回复]
不错的内容,支持博主。www.peepay.com
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱:
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 开启 | [img]标签 关闭