中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › 在HTML里加载摄像头的方法

[前端] 在HTML里加载摄像头的方法

1620 0
Honkers 2022-10-19 15:43:12 | 显示全部楼层 |阅读模式
效果图： 整体效果:


视频加载：




拍照：



第一步：创建HTML元素
首先，我们要创建一个HTML5的文档。
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. </head>
  8. <body>
  9. </body>
  10. </html>
复制代码
然后在<body></body>插入以下代码：
  1. <video id="video" width="640" height="480" autoplay></video>
  2. <button id="snap">截图</button>
  3. <canvas id="canvas" width="640" height="480"></canvas>
复制代码
第二步：创建JavaScript
首先，要在<head></head>里创建一个JavaScript：
  1. <script language="javascript">
  2.         // Grab elements, create settings, etc.
  3. var video = document.getElementById('video');
  5. // Get access to the camera!
  6. if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  7.     // Not adding `{ audio: true }` since we only want video now
  8.     navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
  9.         //video.src = window.URL.createObjectURL(stream);
  10.         video.srcObject = stream;
  11.         video.play();
  12.     });
  13. }
  14. /* Legacy code below: getUserMedia
  15. else if(navigator.getUserMedia) { // Standard
  16.     navigator.getUserMedia({ video: true }, function(stream) {
  17.         video.src = stream;
  18.         video.play();
  19.     }, errBack);
  20. } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
  21.     navigator.webkitGetUserMedia({ video: true }, function(stream){
  22.         video.src = window.webkitURL.createObjectURL(stream);
  23.         video.play();
  24.     }, errBack);
  25. } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
  26.     navigator.mozGetUserMedia({ video: true }, function(stream){
  27.         video.srcObject = stream;
  28.         video.play();
  29.     }, errBack);
  30. }
  31. */
  32. </script>
复制代码
随后，要在刚才创建的HTML元素的后面插入以下代码：
  1. <script language="javascript">
  2.         // Elements for taking the snapshot
  3. var canvas = document.getElementById('canvas');
  4. var context = canvas.getContext('2d');
  5. var video = document.getElementById('video');
  7. // Trigger photo take
  8. document.getElementById("snap").addEventListener("click", function() {
  9.         context.drawImage(video, 0, 0, 640, 480);
  10. });
  11. </script>
复制代码
现在，这个HTML就可以完成打开摄像头，和拍照的功能了！
到此这篇关于如何在HTML里加载摄像头的方法的文章就介绍到这了,更多相关html加载摄像头内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

特级红客

关注
  • 3134
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天