资讯专栏INFORMATION COLUMN

能够使用浏览器打开手机端摄像头

waltr / 3072人阅读

摘要:能够前后摄像头切换,能够截取当前视频流图像兼容各大主流浏览器,主要使用的获取视频流获取设备摄像信息之前在本机上测试出现问题,问题在于没有使用作为测试链接,如果使用的话,则项目不能打开摄像头,这可能与的明文加密有关系如果使用,代码会报但是这个

能够前后摄像头切换,能够截取当前视频流图像

兼容各大主流浏览器,

主要使用的api:

// 获取视频流
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);

// 获取设备摄像信息
navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);

之前在本机上测试Chrome出现问题,问题在于没有使用https作为测试链接,如果使用http的话,则项目不能打开摄像头,这可能与chrome的明文加密有关系

如果使用http,代码会报
NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)
但是这个错开始并没有报,开始我直接运行获取视频流代码,项目的代码仿佛停止运行一般,相应位置的console.log也没有输出,这个错误也没有报
后来经过调试,获取视频流的代码放在点击事件中,错误才出来。。

切换摄像头代码:
// 多选框更改事件
videoSelect.onchange = getStream;

// 获取设备音频输出设备与摄像设备,这里我只用到了摄像设备
function gotDevices(deviceInfos) {
    console.log("deviceInfos")
    console.log("deviceInfos:", deviceInfos);
    for (let i = 0; i !== deviceInfos.length; i++) {
        let deviceInfo = deviceInfos[i];
        var option = document.createElement("option");
        // console.log(deviceInfo)
        if (deviceInfo.kind === "videoinput") {  // audiooutput  , videoinput
            option.value = deviceInfo.deviceId;
            option.text = deviceInfo.label || "camera " + (videoSelect.length + 1);
              videoSelect.appendChild(option);
        }
    }
}
兼容浏览器:
//访问用户媒体设备的兼容方法
function getUserMedia(constrains,success,error){
    if(navigator.mediaDevices.getUserMedia){
        //最新标准API
        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia){
        //webkit内核浏览器
        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.mozGetUserMedia){
        //Firefox浏览器
        navagator.mozGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.getUserMedia){
        //旧版API
        navigator.getUserMedia(constrains).then(success).catch(error);
    }
}
获取视频流成功回调:
function getStream(){

    if (window.stream) {
        window.stream.getTracks().forEach(function(track) {
            track.stop();
        })
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
        //调用用户媒体设备,访问摄像头
        const constraints = {
            audio: true, 
            video: {
                width: { ideal: 1280 },
                height: { ideal: 720 },
                frameRate: { 
                    ideal: 10,
                    max: 15
                },
                deviceId: {exact: videoSelect.value}
            }
        };
        console.log("获取视频流");
        getUserMedia(constraints,success,error);
    } else {
        alert("你的浏览器不支持访问用户媒体设备");
    }
}
截取视频流作为图片:
//注册拍照按钮的单击事件
document.getElementById("capture").addEventListener("click",function(){
    //绘制画面
    console.log("点击事件");
    context.drawImage(video,0,0,480,320);
});

源码地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98482.html

相关文章

  • 多屏互动——H5 中级进阶

    摘要:手机屏幕朝上,水平静止放置,轴重力加速度为,为。当手机水平放置,拨动手机,使其慢慢旋转,重力加速度的数据并没有变化。四元数的基本数学方程为其中表示旋转角度,表示旋转轴。四元数表示一个完整的旋转。 前言 随着智能硬件的普及,手机,平板,PC甚至路边的电子广告牌,现代浏览器已经无处不在。在浏览器里编织出我们自己的一片天地已经轻车熟路,但是这还不够,H5赋予了浏览器太多的新特性,等待我们去使...

    wdzgege 评论0 收藏0
  • 微信JSSDK 实现打开像头拍照再将相片保存到服务器

    摘要:在微信端打开手机摄像头拍照,将拍照图片保存到服务器上需要使用到微信的接口,主要使用到了拍照或从手机相册中选图接口上传图片接口参考资料一引入微信二通过接口注入权限验证配置三微信端拍照接口默认可以指定是原图还是压缩图,默认二者都有可以指 在微信端打开手机摄像头拍照,将拍照图片保存到服务器上需要使用到微信的JSSDK接口,主要使用到了拍照或从手机相册中选图接口(chooseImage),上传...

    yy13818512006 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<