js调用摄像头

最新推荐文章于 2025-11-22 14:14:11 发布

转载最新推荐文章于 2025-11-22 14:14:11 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/m0_48459838/article/details/116157792

文章标签：

#javascript #vue.js

前端专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何在Vue.js应用中利用Web API的getUserMedia方法调用用户摄像头，实现视频流的获取和播放。通过兼容性处理确保在不同浏览器下正常工作，并提供了成功和错误回调函数以处理操作结果。

<template>
    <div>
        <el-button type="primary" @click="useVideo2">调用摄像头</el-button>
        <video id="video"></video>
    </div>
</template>

<script>
    export default {
        name: 'useVideo',
        data() {

            return {
                video: '',

            }
        },
        mounted() {
        },
        methods: {
            useVideo2() {
                this.video = document.getElementById('video')
                //兼容性写法,判断getUserMedia方法是否存在
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || window.getUserMedia;
                if (navigator.getUserMedia) {
                    //调用用户媒体设备, 访问摄像头
                    this.getUserMedia({video: {width: 270, height: 150}}, this.success, this.error);
                } else {
                    alert('不支持访问用户媒体');
                }

            },
            // 调用成功的方法
            success(stream) {
                //兼容webkit核心浏览器
                let CompatibleURL = window.URL || window.webkitURL;
                //将视频流设置为video元素的源
                console.log(stream);

                //video.src = CompatibleURL.createObjectURL(stream);
                //将摄像头拍摄的视频赋值给viedeo的srcObject属性
                //src是视频文件,srcObject是实时流
                //摄像头是实时流
                this.video.srcObject = stream;
                //并播放
                this.video.play();
            },
            // 调用失败的方法
            error(error) {
                console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
            },

            //采集图片
            getUserMedia(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) {
                    //firfox浏览器
                    navigator.mozGetUserMedia(constraints, success, error);
                } else if (navigator.getUserMedia) {
                    //旧版API
                    navigator.getUserMedia(constraints, success, error);
                }
            },


        }
    }
</script>

<style scoped>

</style>