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

最新推荐文章于 2024-07-05 19:37:35 发布

cczhumin

最新推荐文章于 2024-07-05 19:37:35 发布

阅读量408

点赞数 1

分类专栏： web前端大犀牛JavaScript 文章标签：录像功能视频

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/cczhumin/article/details/50736866

版权

web前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

大犀牛JavaScript

6 篇文章 0 订阅

订阅专栏

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

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

<!DOCTYPE html>
<html>
<head>
<title>camera</title>
</head>
<body>
<video id="video" autoplay>
</video>
</body>
<script type="text/javascript">
var video =document.getElementById('video');
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia({video:true},function(stream){
video.src = window.webkitURL.createObjectURL(stream);
},function(error){alert(error)})
</script>
</html>

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。