• 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版本转换过来的。

  • 相关阅读:
    在 Spring 中使用 Quartz
    Quartz 快速进阶
    任务调度概述
    Spring Boot 2.x 整合 Mybatis 3.x
    pwd函数实现
    07-图4 哈利·波特的考试 (25 分)
    06-图3 六度空间 (30 分)
    linux中的目录
    Linux中的文件
    06-图2 Saving James Bond
  • 原文地址:https://www.cnblogs.com/shihao/p/2464518.html
Copyright © 2020-2023  润新知