Html5中的 video标签无法关闭摄像头

最新推荐文章于 2024-05-17 10:25:35 发布

_夜渐凉

最新推荐文章于 2024-05-17 10:25:35 发布

阅读量8.5k

点赞数 2

分类专栏： ------【Vue】 ● Web前端文章标签： video html5 vue 摄像头

本文链接：https://blog.csdn.net/weixin_41888813/article/details/82500568

版权

------【Vue】同时被 2 个专栏收录

43 篇文章 1 订阅

订阅专栏

● Web前端

3 篇文章 0 订阅

订阅专栏

html5中的video这个标签是引入视频的，通过navigator.getUserMedia去获取摄像头的视频流，

所以在事件里用关闭的代码都不能执行关闭摄像头，只有关闭网页，摄像头才关闭。

需求：不关闭网页，实现摄像头关闭

暂时的解决办法：

beforeRouteLeave (to, from, next) {
    this.$router.go(-1);  //刷新路由
}

第二种解决办法：

this.mediaStreamTrack && this.mediaStreamTrack.stop();

http://www.cnblogs.com/imwtr/p/6413595.html

调用摄像头，拍照代码：

<!DOCTYPE html> 
<html>  
  <head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style>
      #canvas,#video {
        float: left;  
        margin-right: 10px;  
        background: #fff;  
      }      
      .box {  
        overflow: hidden;  
        margin-bottom: 10px;  
      }
    </style>
  </head>  
  <body>  
    <!--video用于显示媒体设备的视频流，自动播放-->
<video id="video"  controls="controls" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按钮-->
<div>
<button id="capture">拍照</button>
<button id="guanbi">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>

    <script>  
  //访问用户媒体设备的兼容方法
    function getUserMedia(constrains,success,error){
	  //debugger
        if(navigator.mediaDevices.getUserMedia){
            //最新标准API
            navigator.mediaDevices.getUserMedia(constrains).then(success);
        } else if (navigator.webkitGetUserMedia){
            //webkit内核浏览器
            navigator.webkitGetUserMedia(constrains).then(success);
        } else if (navigator.mozGetUserMedia){
            //Firefox浏览器
            navagator.mozGetUserMedia(constrains).then(success);
        } else if (navigator.getUserMedia){
            //旧版API
            navigator.getUserMedia(constrains).then(success);
        }
    }

    var video = document.getElementById("video");
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    //成功的回调函数
    function success(stream){
    	//debugger
        //兼容webkit内核浏览器
        var CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        video.src = CompatibleURL.createObjectURL(stream);
        //播放视频
        video.play();
    }

    //异常的回调函数
    function error(error){
    	//debugger
        console.log("访问用户媒体设备失败：",error.name,error.message);
    }
    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
        //调用用户媒体设备，访问摄像头
        //debugger
        getUserMedia({
            video:{width:480,height:320}
        },success,error);
    } else {
        alert("你的浏览器不支持访问用户媒体设备");
    }

    //注册拍照按钮的单击事件
    document.getElementById("capture").addEventListener("click",function(){
        //绘制画面
        context.drawImage(video,0,0,480,320);
    });
  //注册关闭按钮的单击事件
    document.getElementById("guanbi").addEventListener("click",function(){
    	debugger
    	//实测无法关闭
    });

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

参考来源：

https://segmentfault.com/a/1190000011793960

https://www.vue-js.com/topic/594ca7db5b32133659c2cd11

_夜渐凉

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Html5中的 video标签无法关闭摄像头

html5中的video这个标签是引入视频的，通过navigator.getUserMedia去获取摄像头的视频流，所以在事件里用关闭的代码都不能执行关闭摄像头，只有关闭网页，摄像头才关闭。需求：不关闭网页，实现摄像头关闭暂时的解决办法：beforeRouteLeave (to, from, next) { this.$router.go(-1); //刷新路由}...
复制链接

扫一扫