ie调取摄像头抓拍解决方案

最新推荐文章于 2023-07-21 15:01:34 发布
最新推荐文章于 2023-07-21 15:01:34 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： vue 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39274378/article/details/115902366
版权

ie调用摄像头拍照解决方案

1.通过flash调取摄像头

2020.12之后flash不再受支持,此方案失效

/*
 * @Author: nihc 
 * @Date: 2020-11-25 17:51:11 
 * @Last Modified by: nihc
 * @Last Modified time: 2021-04-20 12:49:19
 */
<template>
	<div>
			<div  v-if="showCamera" class="cameraWrapper" ref="cameraWrapper">
				<object  id="my_camera" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
							codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
							:height="cameraHeight" viewastext="在线拍照" :width="cameraWidth">
					<param name="allowScriptAccess" value="sameDomain"/>
					<param name="movie" value="/camera.swf"/>
					<param name="quality" value="high"/>
					<param name="bgcolor" value="#ffffff"/>
					<param name="wmode" value="transparent"/>
					<embed style="z-index: 100" align="middle" allowscriptaccess="sameDomain" bgcolor="#ffffff" :height="cameraHeight"
								name="my_camera" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high"
								wmode="transparent"
								src="/camera.swf" type="application/x-shockwave-flash" :width="cameraWidth"></embed>
				</object>
			</div>
		  
			<img  v-show="false" :src="imgUrl" :width="cameraWidth" :height="cameraHeight" id="picture" alt="">
	</div>
</template>
<script>
//require('jquery.facedetection/dist/jquery.facedetection.js');

import { mapMutations ,mapActions} from 'vuex';
	export default {
		name: 'TakePhoto',
		props:{
			cameraWidth:{
				type:Number,
				default:700
			},
			cameraHeight:{
				type:Number,
				default:420
			},
			showCamera:{
				type:Boolean,
				default:false
			},
			action:{
				type:String,
				default:''
			}
		},
		data() {
			return{
				imgUrl:''
			}
		},

		mounted() {

		},
		watch:{
			showCamera:{
				handler(newVal){
					let _this=this;
					if(newVal){
						this.$nextTick(()=>{
							_this.resetCamera()
						})
					}
				
				},
				deep:true,
				immediate:true
			},
			action:{
				handler(newVal){
					let act=this.action.split('num')[0];
					if(act==='snapshot'){
						this.take_snapshot()
					}
					if(act==='reset'){
						this.resetCamera()
					}
				},
				deep:true,
				immediate:true
			}
		},
		methods:{
			// 接口引入
			...mapActions('moduleLogin', [
					'faceDetection'
			]),
			resetCamera(){
				Webcam.reset();
			},
			take_snapshot: function () {
				// take snapshot and get image data
				let _this=this;
				var camObj = document["my_camera"];
				var base64Data = camObj.GetBase64Code();
				console.info(base64Data);

				//展示
				var src = "data:image/png;base64," + base64Data;
				this.imgUrl=src;
				// _this.$nextTick(()=>{
				// 	console.log($('#picture'));
				// 	$('#picture').faceDetection({
				// 			complete: function (faces) {
				// 					console.log(faces);
				// 					_this.$emit("changeImg",faces,base64Data);	
				// 			}
				// 	});
				// })
				_this.$emit("changeImg",base64Data);	

			}
		}
	}
</script>
<style scoped lang='less'>
#my_camera{
	width:100%;
	height: 100%;
}
</style>

2. ImageCapOnWeb(收费/破解)

 

3.公司内部开发插件

完整项目地址:https://github.com/nhclike/vue-work-demo

/* 新版南北插件可抓拍
 * @Author: nihc
 * @Date: 2021-01-22 15:43:42
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-20 12:50:19
 */
<template>
    <div id="nbVideo" class="nbVideo" ref="nbVideo" >
        <div v-if="loadVideoObj">
            <object
                :id="objId"
                classid="CLSID:95c1ec7f-cec0-492a-83f5-e2c2d4397da2"
                :width="videoWidth"
                :height="videoHeight"
            ></object>
        </div>
        <div v-if="videoError === '0'" class="notSupport">您的浏览器不支持播放该视频,请使用IE浏览器!</div>
    </div>
</template>

<script>
import { IEVersion, ActiveXKiller} from '@/utils/utils';

export default {
    name: 'NBVideo',
    props: {
        NBAction: {
            type: String,
            default: ''
        },
        // 打点播放中的点位
        Dot: {
            type: Number,
            default: 0
        },
        // 控制播放地址,非必传--拉起摄像头就不需要传
        url: {
            type: Object,
            default: () => {
                return {
                    liveUrl: '',
                    urls: []
                };

            }
        },
        // 控制播放器大小
        videoWidth: {
            type: Number,
            default: 0
        },
        videoHeight: {
            type: Number,
            default: 0
        },
        objId: {
            type: String,
            default: 'nbVideoObj'
        },
        // 控制显示的时候初始化大小
        isShowVideo: {
            type: Boolean,
            default: false
        },
        // 1直播0点播2无工具栏
        playMode: {
            type: Number,
            default: 2
        },
        // 视频播放窗口树(1-9)
        winNum: {
            type: Number,
            default: 1
        },
        // 播放列表非必传
        playList: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            timer: null,
            curPlayStatus: '',
            videoObj: null, // 视频对象
            loadVideoObj: false,
            videoError: '-1' // -1-可以正常播放,'0'-浏览器不支持, '1'-链接不存在,'2'-直播已结束
        };
    },
    watch: {
        NBAction: {
            handler(newVal) {
                let str = newVal.split('num')[0];
                console.log('this.NBAction', str, `${new Date()}`);
                if (!str) {
                    return false;
                }
                let _this = this;
                setTimeout(() => {
                    switch (str) {
                        case 'play':
                            _this.playVideo();
                            break;
                        case 'DotPlay':
                            _this.DotPlay();
                            break;
                        case 'stopVideo':
                            _this.stopVideo();
                            break;
                        case 'getCamera':
                            _this.getCamera();
                            break;
                        case 'screenShot':
                            _this.screenShot();
                            break;
                        default:
                            break;
                    }
                }, 20);
            },
            deep: true,
            immediate: true
        },
        isShowVideo: {
            handler(newVal) {
                if (newVal) {
                    // console.log('isShowVideo---newVal', typeof (newVal));
                    let _this = this;
                    // console.log('NBVideo---this.videoWidth', this.videoWidth);
                    if (IEVersion() === -1) {
                        this.videoError = '0';
                        this.$emit('videoPlayerLoaded');
                    } else {
                        console.log('NBVideo---isShowVideo', newVal);
                        if (newVal) {
                            this.loadVideoObj = true;
                            this.$nextTick(function() {
                                _this.initVideo();
                            });
                        }
                        else {

                            this.loadVideoObj = false;
                            this.handleBeforeUnload();
                            console.log('隐藏video');
                        }

                    }
                }
            },
            deep: true,
            immediate: true
        },
        playList: {// 播放列表
            handler(newVal) {
                // 监听到播放列表改变
                if (newVal.length > 0) {
                    this.setPlayListPlay();
                }
            },
            immediate: true,
            deep: true
        }

    },
    mounted() {
        //
        console.log('NBVideo---mounted');
        window.addEventListener('beforeunload', this.handleBeforeUnload, false);

    },
    beforeDestroy() {
        console.log('NBVideo---beforeDestroy');
        // debugger;
        this.handleBeforeUnload();
        window.removeEventListener('beforeunload', this.handleBeforeUnload, false);

    },
    methods: {
        // 初始化南北视频插件
        // 1设置播放模式---默认直播
        // 2设置窗口数量---默认1个窗口
        initVideo() {
            let _this = this;
            console.log('initVideo', this.videoWidth);

            if (this.videoWidth > 0) {

                this.videoObj = document.getElementById(this.objId);
                let _this = this;
                console.log('NBVideo---this.videoObj', this.videoObj);

                this.$emit('videoPlayerLoaded');

            }
            else {
                setTimeout(() => {
                    _this.initVideo();
                }, 20);
            }

        },
        // 设置播放模式
        setPlayMode() {
            this.videoObj.slots_playMode_change(this.playMode);
        },
        // 设置播放窗口
        setWinNum() {
            try {
                let num = this.videoObj.slots_out_WindowsNum();
                console.log(`setWinNum---${new Date()}`, num);

                if (num != this.winNum) {
                    this.videoObj.slots_init_windows(this.winNum);
                    this.$emit('emitSetWinNum');
                }
            } catch (error) {
                console.log('setWinNum', error);
            } finally {
                // console.log('setWinNum---AttachEvent');
                this.videoObj.AttachEvent(this.callBackFun);

            }

        },
        callBackFun(num, ret) {
            this.curPlayStatus = ret;
            console.log(`emitStatusChange---${new Date()}`);
            this.$emit('emitStatusChange', num, ret);
        },
        // 设置定点播放模式并且开始播放---定点播放只在点播有效
        DotPlay() {
            if (this.videoObj) {
                this.videoObj.slots_out_StopPlay();
                setTimeout(() => {
                    this.videoObj.slots_playMode_change(0);
                    this.videoObj.slots_init_windows(this.winNum);
                    console.log('NBVideo---this.Dot', this.Dot);
                    this.videoObj.slots_out_seek(this.winNum, this.Dot * 1000);
                    this.videoObj.slots_out_playvideo(this.winNum, this.url.liveUrl, ':rtsp-tcp', 1000, 20000);

                }, 30);
            }
        },
        // 拉取摄像头
        getCamera() {
            if (this.videoObj) {
                this.videoObj.slots_out_open();

            }
        },
        screenShot() {
            let _this = this;
            if (this.videoObj) {
                this.timer = setInterval(() => {
                    let base64 = _this.videoObj.slots_out_Screenshot();
                    console.log('图片数据' + base64, `${new Date()}`);
                    _this.$emit('changeImg', base64);
                }, 3000);
            }
        },
        // 设置播放列表播放模式---并且添加定点播放
        setPlayListPlay() {
            console.log('setPlayListPlay');
        },

        // 设置播放模式和播放窗口并且开始播放
        playVideo() {
            if (this.videoObj) {
                this.setPlayMode();
                this.setWinNum();
                this.videoObj.slots_out_playvideo(this.winNum, this.url.liveUrl, ':rtsp-tcp', 1000, 20000);
                console.log('NBVideo---playVideo', this.url.liveUrl);
            }
        },

        stopVideo() {
            if (this.videoObj) {
                this.videoObj.slots_out_close();
            }
            this.clearTimer();
        },
        // 清除人脸识别定时器
        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        handleBeforeUnload() {
            console.log('NBVideo---handleBeforeUnload');

            if (this.videoObj) {
                this.videoObj.slots_out_close();

                ActiveXKiller(this.objId, 'nbVideo');// 单页面框架在路由不跳转时，切换组件移除ActiveX控件，解决频繁切换IE崩溃问题
                this.videoObj = null;
                this.loadVideoObj = false;
            }
        }
    }
};
</script>

<style type="text/less" lang="less" scoped>
.nbVideo {
    background-color: #000;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    position: relative;
}
.notSupport {
    width: 100%;
    color: @text_color_white;
    text-align: center;
    margin-top: 200px;
    position: absolute;
    font-size: @font28px;
}
</style>

效果图

插件下载见https://download.csdn.net/download/github_39274378/16771461

若无积分可留言私发

github_39274378
关注
专栏目录
浏览器调取摄像头人脸抓拍实现
qq_37586270的博客
11-12 1225
基于juqery-webcam 实现 插件下载地址：https://www.xarg.org/project/jquery-webcam-plugin/ <html> <div id="webcam"></div> <input id="snapBtn" type="button" value="capture" /> <script src="jquery-1.11.3.js"></script> <script
js在ie中获取摄像头，可兼容各大浏览器
09-06
js在ie中获取摄像头，可兼容各大浏览器，如果有什么问题，可以来我论坛看看，有详细的教程。
IE11怎么调取摄像头并拍照
Funky_oaNiu的博客
01-31 2531
2021/01/31最近公司需求做一个人脸识别系统，但是前端需要使用IE11浏览器，我们从网上搜集了很多资料证明，IE只能使用flash才行（此时flash已经宣布停止维护，但是它的ActiveX依旧可以使用）。 需要的jar包和swf和flash： 名称 用途 bluebird.js IE不兼容promis可以引入这个 webcammin.js 兼容IE调取摄像头 jquery-182.js 使用jquery的webcam函数 jscam.swf 兼容IE调取摄像头 jsc
IE与非IE浏览器调用PC摄像头拍摄并且上传
热门推荐
小学生的博客
04-28 2万+
一，flash调用摄像头 在IE中对HTML5的支持不是很好，所以在IE中调用摄像头使用的是FLASH，只要IE中安装Flash插件即可，页面代码如下： 使用Object、embed标签获取flash并且调用摄像头 <object style="z-index: 100" id="My_Cam" align="middle" classid="clsid:d27cdb6e-ae6d-11cf
IE+Flash+vue项目调用摄像头拍照
12-14
代码是vue的项目，先用npm install初始化，再用npm run dev指令即可
使用python调取摄像头录制视频
05-23
使用python调取摄像头录制视频，主要使用opencv-python库
python 实时调取摄像头的示例代码
01-19
调取摄像头的实现 import numpy as np import cv2 cap = cv2.VideoCapture(0)　#参数为0时调用本地摄像头；url连接调取网络摄像头；文件地址获取本地视频 while(True): ret,frame=cap.read() #灰度化 gray=cv2....
ffmpeg调取摄像头录像
02-15
在"ffmpeg调取摄像头录像"这一主题中，我们将深入探讨如何利用FFmpeg来捕获并录制来自摄像头的实时视频流。 首先，FFmpeg通过libavdevice库与各种输入/输出设备进行交互，包括摄像头。在Linux系统中，摄像头通常被...
html5调取摄像头
07-24
html5调取摄像头、原生事件以及兼容性写法，支持拍照。
web开发IE内核通过ActiveX调用USB摄像头方法
01-18
微软已经取消flash，这是一种通过activex调用USB摄像头视频并且可以拍照，获取base64字符串
通用浏览器调用摄像头拍照
07-01
通过浏览器调用摄像头拍摄，支持ie与非ie
大华ocx插件，完美嵌入web页面，百分百ie可用，web端完美调用大华摄像头
09-28
web页面完美调用大华摄像头demo，可实现对摄像头视频采集、显示、操作，demo支持ie，完美运行无bug，非其他无法运行ocx插件可比。
Ie浏览器调用
12-06
Ie调用插件，自测可以使用
视频监控IE浏览插件 xdview
07-11
网络视频监控,IE浏览插件 xdview
浏览器调用摄像头
weixin_34061482的博客
08-21 1087
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <video width="200" height="150"></video> &l...
java调用usb摄像头 ie,关于浏览器调用USB摄像头以及摄像头拍摄照片转换为base64的具体实现方式...
weixin_39835991的博客
03-10 654
一、非IE浏览器如何调用本地摄像头1.非IE下的USB摄像头非IE下调用USB摄像头，目前主要使用HTML5的getUserMedia()，使用之前先判断浏览器是否支持该方法，注：使用getUSerMedia()调用USB摄像头必须有后台的支持，我用的是nodejs，源码见文章底部navigator.myGetUserMedia=navigator.getUserMedia||navigator....
html5 调用摄像头 支持IE,JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
weixin_32459553的博客
06-04 2012
最近做的项目遇到了个难题，使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE。原因：IE8及以下不支持HTML5标签：video和canvas；IE11及以下所有版本，包括Edge都不支持getUserMedia()。所以，这几天在网上各种搜，发现想要兼容IE浏览器就只能使用Flash。解决方案方案一flash+as3.0+swfobject实现摄像头拍照方...
js调用摄像头拍照并兼容ie浏览器
最新发布
qq_41038309的博客
07-21 1131
jquery-webcam-plugin插件官方说是同时兼容谷歌、ie等浏览器，但是实际开发中我发现在谷歌浏览器并能用；设置完浏览器底部会有Relaunch按钮，点击重新启动浏览器(一定要记得重新启动浏览器)，就可以实现http协议下正常启动摄像头了（前提摄像头是允许模式下）想在ie浏览器中正常调用摄像头并拍照，可以借用jquery-webcam-plugin插件。3、在摄像头和麦克风一栏，点击进入“站点的摄像头和麦克风设置管理界面”，将需要访问摄像头的网站的https访问模式和其他模式都设置为允许。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值