会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132420个问题
Python 全系列/第三阶段:Python 网络与并发编程/并发编程 33122楼
Python 全系列/第八阶段:Vue框架/vue框架 33124楼
Python 全系列/第八阶段:轻量级Web开发利器-Flask框架/Flask视图基础和URL 33125楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <video src="" height="500px" width="500px" id="video"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button class="btn1" onclick="getMedia()">视频</button>
    <button class="btn2" onclick="takePhone()">拍照</button>
    <script>
      /*调用用户设备
      *调用摄像头  移动端会给用户选择 1打开相册 2打开摄像头  pc端直接调用摄像头

      *调用麦克风  直接调用

      *调用方法getUserMedia();
      * Navigator.mediaDevices.getUserMedia(constraints,successCallback,errorCallback)
      
      * constraints 设备类型
      {
      video:true  //s摄像头
      Audio: true //麦克风 
      }
      */
     function getMedia(){
         var video=document.getElementById('video');
         /*
         Navigator.mediaDevices.getUserMedia  该方法返回一个promise对象
         当该方法对象成功返回后 的回掉函数会带有一个MediaStream对象作为其参数
         then()是promise的异步方法,当then()前的所有方法执行完毕后在执行then()方法避免数据没有获取到
          */
         var constraints={
             video:{height:500,width:500},
             audio:true
         }
        var promise=navigator.mediaDevices.getUserMedia(constraints)
        promise.then(function(MediaStream){
            video.srcObject=MediaStream;
            video.play();
        })
     }

    </script>
</body>
</html>

老师不行喔 报错  是因为我电脑没摄像头吗  但是手机打不开

image.png

WEB前端全系列/第九阶段:HTML5新特性模块/(旧)H5新特性 33126楼
JAVA 全系列/第十二阶段:Spring Cloud Alibaba技术栈/分布式服务调用-Dubbo 33128楼
Python 全系列/第一阶段:Python入门/控制语句 33129楼
Python 全系列/第十五阶段:Python 爬虫开发/爬虫基础 33130楼
Python 全系列/第八阶段:轻量级Web开发利器-Flask框架/Flask高级 33131楼
JAVA 全系列/(旧的隐藏)第十五阶段:百战商城项目(Spring Cloud最新架构)/百战商城项目 33133楼
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:基于SpringSecurity实现后台登录功能 33135楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637