zoukankan      html  css  js  c++  java
  • WebRTC获取设备信息

    一、概述

      1.新建一个Https服务端(Node,tomcat),看自己喜好。我这里用的NodeJs

      2.因为现在大多数浏览器已经支持了WebRTC(如果不支持,直接用Chrome),所以WebRTC的js包不需要导入,直接使用即可。

      3.在使用Chrome浏览器的时候要用https服务(也就是打开网页的链接要是https形式的),不然获取不到设备信息。

      4.我再本案例中用的是,nodejs服务+openssl自己弄了一个本地的https服务。

      5.由于是台式电脑,我让手机和电脑在一个局域网,用pc开发用手机浏览器测试。

      6.到此,环境描述就介绍完了。下面看看示例代码

    二、示例代码

      1.网页端代码

      

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>WebRTC获取设备信息测试</title>
        <!-- 引入console -->
        <script src="./js/vconsole.min.js">
    
    
        </script>
        //引入是为了多浏览器适配
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    
    
    </head>
    
    <body>
        <div>
            <label>audio input device:</label>
            <select id="audioSource"></select>
        </div>
        <div>
            <label>audio output device:</label>
            <select id="audioOutput"></select>
        </div>
        <div>
            <label>video input device:</label>
            <select id="videoSource"></select>
        </div>
    
    </body>
    <script>
    
        // 初始化vconsole,可在网页上打印调试信息
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>
    <script type="text/javascript" src="./js/device_info.js"></script>
    
    </html>

      2.网页端js代码

      

    //这种方式只有在chrome浏览器上有效,以内各个浏览器获取音视频权限的内部实现都不一样,所以这种方式在Safari和Firefox浏览器看不到设备名称
    'use strict'
    
    var audioSource = document.querySelector("select#audioSource");
    var audioOutput = document.querySelector("select#audioOutput");
    var videoSource = document.querySelector("select#videoSource");
    
    
    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
        console.log("不支持获取设备信息");
    } else {
        var ePromise = navigator.mediaDevices.enumerateDevices();
        ePromise.then(getMediaInfoSuccess).catch(getMediaInfoFail);
    }
    
    
    /**
     * 获取媒体信息成功
     */
    function getMediaInfoSuccess(deviceInfos) {
        deviceInfos.forEach(function (deviceInfo) {
            console.log("设备种类:" + deviceInfo.kind);
            console.log("设备名称:" + deviceInfo.label);
            console.log("设备Id:" + deviceInfo.deviceId);
            console.log("groupId:" + deviceInfo.groupId);
            var option = document.createElement("option");
            option.text = deviceInfo.label;//deviceInfo.label有可能会获取不到
            option.value = deviceInfo.deviceId;
            if (deviceInfo.kind === "audioinput") {
                option.text  = "音频输入设备";
                audioSource.appendChild(option);
            } else if (deviceInfo.kind === "audiooutput") {
                option.text = "音频输出设备";
                audioOutput.appendChild(option);
            } else if (deviceInfo.kind === "videoinput") {
                option.text = "视频输入设备";
                videoSource.appendChild(option);
            }
        });
    }
    
    
    /**
     * 获取媒体信息失败
     */
    function getMediaInfoFail(err) {
        console.log(err.name + "|" + err.message);
    }

      3.服务端(可自行设计,什么形式的都行,只要支持https协议即可)

  • 相关阅读:
    LeetCode 88. Merge Sorted Array
    LeetCode 75. Sort Colors
    LeetCode 581. Shortest Unsorted Continuous Subarray
    LeetCode 20. Valid Parentheses
    LeetCode 53. Maximum Subarray
    LeetCode 461. Hamming Distance
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 976. Largest Perimeter Triangle
    LeetCode 1295. Find Numbers with Even Number of Digits
    如何自学并且系统学习计算机网络?(知乎问答)
  • 原文地址:https://www.cnblogs.com/tony-yang-flutter/p/14870043.html
Copyright © 2011-2022 走看看