实现一个简单的摄像功能(不带传输数据)代码片段

来源:互联网 发布:毛笔字 知乎 编辑:程序博客网 时间:2024/05/12 14:38

下面用H5的video实现了简单的录像功能,没涉及到数据的传输,因为没有后端,只是一个简单的demo,想做视屏的同学可以用来参考参考。

技术的关键点在就在navigator上,因为navigator在不同浏览器对于打开摄像头的属性是不一样的,详情请看以下代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>camera</title>
  5. </head>
  6. <body>
  7. <video id="video" autoplay>
  8. </video>
  9. </body>
  10. <script type="text/javascript">
  11. var video =document.getElementById('video');
  12. navigator.getMedia = ( navigator.getUserMedia ||
  13. navigator.webkitGetUserMedia ||
  14. navigator.mozGetUserMedia ||
  15. navigator.msGetUserMedia);
  16. navigator.getMedia({video:true},function(stream){
  17. video.src = window.webkitURL.createObjectURL(stream);
  18. },function(error){alert(error)})
  19. </script>
  20. </html>
1 0
原创粉丝点击