HTML5 MediaStream的运用

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', 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://www.cnblogs.com/shihao/p/2464518.html