HTML5 MediaStream的运用

http://www.pjhome.net/article/Javascript/1044.htm

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