javascript 调用摄像头进行直播/拍照

已于 2024-02-19 14:04:11 修改
阅读量279 收藏
点赞数 5
文章标签： javascript 前端 开发语言
于 2024-02-19 13:29:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/paipaicui/article/details/136168334
版权

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D 转换器等等），也可能是其他轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

<body>
    <video 
    controls 
    muted 
    loop 
    width="100%"
   >
   </video>

   <script>
        var constraints = { audio: true, video: true };
        navigator.mediaDevices
            .getUserMedia(constraints)
            .then(function (stream) {
                var video = document.querySelector("video");
                video.srcObject = stream;
                //loadedmetadata事件在元数据（metadata）被加载完成后触发。
                video.onloadedmetadata = function (e) {
                    video.play();
                };
            })
            .catch(function (err) {
                /* 处理 error */
                console.log(err)
            });
    </script>
</body>

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

ps:
获取浏览器支持的流媒体对象

   function getUserMediaToPhoto(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints, success, error);
      } else if (navigator.mozGetUserMedia) {
        //firefox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    }

通过此函数,获取当前浏览器支持的getUserMedia 对象
开启浏览器摄像头/语音权限

 getUserMediaToPhoto({ video: { width: 480, height: 320 },audio: true }, success, error);
paipaicui
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js+flash调用本地/usb摄像头拍照上传
12-13
直接以“file:///D:/”等开头会显示没有webcam对象，要使用xammp或者Apache等将文件放置服务器目录，经过服务器打开即可正常使用
前端PC人脸识别登录
qq_35073135的博客
06-23 276
前端PC人脸识别登录
使用getUserMedia 调用摄像头
weixin_30457465的博客
08-13 4124
html5中一个有趣的API，能够调用电脑的摄像头，结合 <video> 标签和 Canvas 就能在浏览器中拍摄照片了。 这里需要注意: 因为安全问题, chrome 对于本地文件禁用了很多功能(以file:///开头). 所以如果你直接把html文件拖进chrome是看不到效果的(getUserMedia 失败). 这个问题让我疑惑了挺久的. 解决办法: 1....
android studio安装部署及sdk下载_免费人脸识别SDK私有化部署实录（附github项目下载链接）...
weixin_39878745的博客
11-22 236
编者注：本文作者 爪哇日记基于虹软的离线人脸识别·注册虹软账号，获取离线SDK·自定义人脸库（保存人脸关键点信息），并添加人脸到人脸库·获取登录客户的人脸·使用SDK解析人脸，获取关键点信息·登录人脸信息 与人脸库比对 比对成功或失败（对应登录成功或失败）虹软视觉开放平台​ai.arcsoft.com.cn人脸识别示例：·添加用户（成功后提示，并在数据库插入一条数据）·查找用户（匹配成功后回填用户...
HTML5获取监控摄像头
柒柒捌捌。
08-26 8156
转摘自http://blog.csdn.net/journey191/article/details/40744015 HTML5 GetUserMedia Demo var video = docume
JavaScript如何调用摄像头
沐水莲心的博客
05-17 1万+
如何使用浏览器调用摄像头
Web前端+Java实现人脸识别登录
热门推荐
youth_shouting的博客
03-25 5万+
使用前端页面+java后台实现人脸登录，人脸的图像对比是调用的百度接口（百度AI开放平台）。 一、实现思路 a.前端页面调用设备摄像头获取实时图片数据。 b.通过Ajax将图片数据提交后台处理，并返回处理后的数据。 c.后台使用java调用接口进行图片的对比。 d.最后将返回的结果进行分析后返回前端页面。 二、准备工作 a.编辑器：Myeclipse写jiava代码、WebStorm写前端页面（编...
在前端页面中调用本机的摄像头
qq_36727889的博客
06-11 9272
如何在页面中调用本机的摄像头 前段时间，机缘巧合，了解了一手如何在前端页面中调用本机摄像头的方法。 使用了navigator.mediaDevices.getUserMedia()的方法，具体可以参考MDN 首先要准备一个video标签，用来存放摄像头捕捉到的画面 还要准备一个canvas，用来存放拍下的照片 function getUserMedia(constraints,success,...
js 如何调用摄像头拍照
m0_72436362的博客
12-14 4690
js 调用电脑摄像头
getUserMedia调用媒体摄像头
凌晨四点的_LA
09-21 731
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...
js浏览器调用摄像头拍照
03-10
canvas加js实现浏览器拍照功能
javascript实现摄像头拍照预览
12-13
使用javascript实现电脑摄像头的打开和截图的功能，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>摄像头调用实例</title> [removed]...
H5调用摄像头拍照.rar
10-18
JavaScript实现的调用设备摄像头并拍照，切换摄像头，切换麦克风
getusermedia调用摄像头拍照与生成canvas
08-11
vue-camera，一个自己写的vue插件，getusermedia调用摄像头拍照与生成canvas
html调用摄像头识别图片并上传
woshiabc111的博客
06-28 856
html调用摄像头 在这里插入代码片 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="bgcode.aspx.cs" Inherits="shop.page.bgcode" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Co
html5调用摄像头实例
binquan_liang的博客
03-08 1万+
最近在学习在做HTML5的项目，看了博客上html5调用摄像头拍照的文章，但各有瑕疵。于是自己查阅书籍写了一个demo，主要分三步，废话不多说上代码。HTML代码部分：&lt;!--video用于显示媒体设备的视频流，自动播放--&gt; &lt;video id="video" autoplay style="width: 480px;height: 320px"&gt;&lt;/vid...
Web端人脸识别登录
ScapeD的博客
08-04 2万+
人脸识别技术在当下已经十分成熟，但主要在移动端应用上较为普及，而在Web端并不多见。 本文介绍在Web端人脸识别的简单实现。 Web端人脸识别主要有三个技术思路：1.前端的人脸识别，例如使用Tensorflow.js，2.后台人脸识别，有很多开源或者免费的SDK可以使用，3.前后端结合，即结合以上两种方法，虽然系统复杂度提高，但对于系统的安全性，以及减轻服务器负担都有很大提升。 效果图： ...
vue调用摄像头拍照
最新发布
09-21
要在Vue中调用摄像头进行拍照，你可以使用HTML5的getUserMedia()方法来实现。首先，确保你的应用程序在HTTPS环境下运行，因为只有在安全环境下才能访问用户的摄像头。然后，你可以在Vue组件中通过以下步骤来调用摄像头拍照： 1. 导入Vue和HTML5的getUserMedia()方法： ```javascript import Vue from 'vue'; Vue.prototype.$getUserMedia = navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; ``` 2. 在Vue组件中，创建一个方法来调用摄像头并拍照： ```javascript methods: { takePhoto() { const video = this.$refs.video; // 获取video元素 const canvas = this.$refs.canvas; // 获取canvas元素 const context = canvas.getContext('2d'); // 获取canvas上下文 this.$getUserMedia({ video: true }) // 调用摄像头 .then((stream) => { video.srcObject = stream; // 将摄像头数据流赋值给video元素 video.play(); // 播放摄像头视频 // 在视频播放后，可以通过canvas将视频帧转化为图像数据 video.addEventListener('play', () => { const width = video.videoWidth; // 获取视频宽度 const height = video.videoHeight; // 获取视频高度 // 设置canvas的宽度和高度与视频一致 canvas.width = width; canvas.height = height; // 在每一帧绘制视频图像到canvas上 function draw() { context.drawImage(video, 0, 0, width, height); requestAnimationFrame(draw); } draw(); }); }) .catch((error) => { console.log('无法访问摄像头：', error); }); } } ``` 3. 在Vue组件的模板中添加video和canvas元素，并绑定对应的引用： ```html <template> <div> <video ref="video" style="display: none;"></video> <canvas ref="canvas" style="display: none;"></canvas> <button @click="takePhoto">拍照</button> </div> </template> ``` 通过上述步骤，你可以在Vue中调用摄像头进行拍照。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值