js调用网页摄像头进行直播/拍照

举报
仙士可 发表于 2023/06/26 17:11:48 2023/06/26
【摘要】 前置条件需要https/火狐浏览器网页需要有摄像头创建一个html文件,里面包含2个标签:video 视频播放标签,canvas 图片渲染标签: <video id="video" autoplay style="width: 480px;height: 320px"></video> <canvas id="canvas" width="480" height="320"></...

前置条件

需要https/火狐浏览器

网页需要有摄像头

创建一个html文件,里面包含2个标签:

video 视频播放标签,canvas 图片渲染标签:

    <video id="video" autoplay style="width: 480px;height: 320px"></video>

    <canvas id="canvas" width="480" height="320"></canvas>
复制

核心代码

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

    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);
复制

具体文档可查看:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

流处理:

调用后,浏览器将请求拍照权限,设备允许后将调用回调函数:

  var video = document.getElementById('video');
        var success = function(stream){
            video.srcObject = stream;
        }
复制

stream是一个mediaSteam对象https://developer.mozilla.org/en-US/docs/Web/API/MediaStream

新建一个video标签,id为video,将srcObject赋值为stream即可在网页预览摄像头数据:

截图或流媒体传输:

流媒体传输可以自己百度,本人懒得整,这边说一下将video截图实现拍照功能:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 // 将video画面描绘在canvas画布上
context.drawImage(video, 0, 0, 480, 320);
复制
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。