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