webRTC切換指定流

時間 2019-11-13

標籤 webrtc 切換指定简体版

原文原文鏈接

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMediacss

index.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta itemprop="description" content="Client-side WebRTC code samples">
    <meta name="mobile-web-app-capable" content="yes">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:2px;
        }
        #video{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>

    <div>
        音頻輸入: <select id="audioInput"></select>
        音頻輸出: <select id="audioOutput"></select>
        視頻輸入: <select id="videoInput"></select>
        <video id="video" playsinline autoplay ></video>

    </div>

</body>
<script src="./index.js"></script>

</html>

index.jsjquery

var audioinputArr=[];//存放音頻輸入設備
var audiooutputArr=[];//存放音頻輸出設備
var videoinputArr=[];//存放視頻輸入設備

//獲取可用媒體輸入和輸出設備信息的列表，如麥克風、照相機、耳機等
function getDevice(){
    navigator.mediaDevices.enumerateDevices()
        .then(function(deviceList){
            for (let i = 0; i !== deviceList.length; ++i){
                const deviceInfo = deviceList[i];//每一個設備的信息
                if (deviceInfo.kind === 'audioinput') {
                    //音頻輸入,好比麥克風
                    audioinputArr.push(deviceInfo);
                }else if (deviceInfo.kind === 'audiooutput') {
                    //音頻輸出,好比揚聲器
                    audiooutputArr.push(deviceInfo);
                }else if (deviceInfo.kind === 'videoinput') {
                    //視頻輸入
                    videoinputArr.push(deviceInfo);
                }else{
                    console.log("其餘類型的設備");
                }
            }
            //根據設備信息更新到DOM options
            upDateOptions();
            start();
        }).catch(function(error){
        console.log("獲取設備列表失敗"+error)
    });
}

//根據設備信息更新到DOM options
function upDateOptions(){
    for(var i=0;i<audioinputArr.length;i++){
        $("#audioInput").append("<option value='"+i+"'>音頻輸入"+i+"</option>");
    }
    for(var i=0;i<audiooutputArr.length;i++){
        $("#audioOutput").append("<option value='"+i+"'>音頻輸出"+i+"</option>");
    }
    for(var i=0;i<videoinputArr.length;i++){
        $("#videoInput").append("<option value='"+i+"'>視頻輸入"+i+"</option>");
    }
}

//切換視頻輸入設備
$("#videoInput").on("change",function () {
    var value=this.value;
    initVideo=value;
    start();
})

//切換音頻輸出
$("#audioOutput").on("change",function () {
    var deviceId=audiooutputArr[this.value].deviceId;
    //setSinkId方法設置音頻設備的ID以用於輸出，並返回承諾。只有當應用程序被受權使用指定的設備時，纔會生效
    $("#video")[0].setSinkId(deviceId)
        .then(() => {
            console.log("成功:"+deviceId);
        })
        .catch(error => {
            let errorMessage = error;
            if (error.name === 'SecurityError') {
                errorMessage ="您須要使用HTTPS來選擇音頻輸出設備"+error
            }
        });
})

//切換音頻輸入
$("#audioInput").on("change",function () {
    var value=this.value;
    initAudioInput=value;
    start();
})


//啓動攝像頭
var initVideo=0;//初始化使用的攝像頭,值爲deviceId
var initAudioInput=0;//初始化使用的音頻,值爲deviceId
function start(){
    //判斷當前是否已經有視頻流
    if (window.stream) {
        window.stream.getTracks().forEach(track => {
            track.stop();
        });
    }

    //下方能夠指定某個攝像頭和某個音頻輸入,deviceId
    const constraints = {
        video: {deviceId: videoinputArr.length>0 ? videoinputArr[initVideo].deviceId : undefined},
        audio: {deviceId: audioinputArr.length>0 ? audioinputArr[initAudioInput].deviceId : undefined}
    };
    navigator.mediaDevices.getUserMedia(constraints)
    .then(function (stream) {
        window.stream = stream;//將當前流設置到全局
        $("#video")[0].srcObject=stream;
    }).catch(function (error) {
        console.log("攝像頭打開失敗"+error)
    });
}

getDevice();

若是須要解決video標籤留有黑邊的問題，能夠給video添加object-fit:cover屬性web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。