H5前后摄像头切换功能实现（VUE写法和原生js写法都有）

阿布阿朵

已于 2022-11-20 16:32:20 修改

阅读量4.8k

点赞数 4

分类专栏： Vue javascript 文章标签： vue.js javascript 前端

于 2022-05-25 14:47:49 首次发布

本文链接：https://blog.csdn.net/weixin_46240807/article/details/124964889

版权

本文介绍了两种H5前后摄像头切换的方法。方法一使用facingMode属性，但存在局限性，仅小米手机能正常工作。方法二通过遍历设备ID实现，更稳定，需要注意切换前清理视频流。测试音视频流需使用服务器地址，直接打开HTML文件可能无法获取流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一、简单方法

使用{facingMode: 'user}获取前置；{facingMode: 'environment}获取后置；

但是存在的问题是，有些手机设备上获取后置出来的流是黑屏状态，目前使用该方法能正确获取到的只有小米手机，华为和oppo手机测试出来切换后置都是黑屏，所以该方法的局限性比较强，推荐使用方法二。

        navigator.getUserMedia =
          navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia;
        navigator.getUserMedia(
          {
            video:{facingMode: 'user'}， //前置
            //video:{facingMode: 'environment&#