詳しい人求む！

コードレビューをお願いします。

締切済

質問者：39OK
質問日時：2022/07/16 05:38
回答数：1件

javascriptでカメラとマイクの一覧をselectボックスに
表示し
ボタンの制御によってカメラのon,offマイクのon,offを
実現させたいのですがマイクのon,offの箇所がうまくいきません
他にもバグがあるかもしれませんが
また、カメラとマイクのデバイス一覧をリストに表示できません
コードレビューをお願いします
<html>
<head>
<script>
function start1(camela_flag, mike_flag) {
const video = document.getElementById("video")
const audio = document.createElement('audio');
if (camela_flag == 1 && mike_flag == 1) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
}).then(stream => {
video.srcObject = stream;
video.play();
audio.srcObject = stream;
}).catch(e => {
console.log(e);
})
} else if (camela_flag == 1 && mike_flag == 0) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
}).then(stream => {
video.srcObject = stream;
video.play();
audio.srcObject = stream;
audio.stop();
}).catch(e => {
console.log(e)
})
} else if (camela_flag == 0 && mike_flag == 1) {
navigator.mediaDevices.getUserMedia({
video: false,
audio: true,
}).then(stream => {
video.srcObject = null;
video.play();
audio.srcObject = stream;
audio.play();
audio.muted = false;
}).catch(e => {
console.log(e);
})
} else {
navigator.mediaDevices.getUserMedia({
video: false,
audio: false,
}).then(stream => {
audio.autoplay = false;
}).catch(e => {
console.log(e)
})
}
}
/*
navigator.mediaDevices.ondevicechange = event => {
updateDeviceList();
}
*/
window.onload = function updateDeviceList() {
navigator.webkitGetUserMedia({ audio: true, video: true }, function () {
navigator.mediaDevices.enumerateDevices().then(function (devices) {
devices.forEach(function (device) {
alert(device.label);
})
})
}, function () { console.log('getUserMedia failed') })
const video = document.getElementById("video")
const audio = document.createElement('audio');
navigator.mediaDevices.enumerateDevices()
.then(function (devices) {
var audiolist = document.getElementById('audiolist');
var videolist = document.getElementById('videolist');
var elem_a = document.createElement("option");
var elem_v = document.createElement("option");
devices.forEach(device => {
if (device.kind == 'videoinput') {
elem_v.text = device.label;
elem_v.value = deviceid;
videolist.appendChild(elem_v);
}

if (device.kind == 'audioinput') {
elem_a.text = device.label;
elem_a.value = deviceid;
audiolist.appendChild(elem_a);
}
});

});
}
</script>
</head>
<body>
<div>
<audio id="audio"></audio>
<video id="video"></video>
<input type="button" onclick="start1(1,1);" / value="カメラ＆マイクSTART">
<input type="button" onclick="start1(1,0);" / value="カメラSTART">
<input type="button" onclick="start1(0,1);" / value="マイクSTART">
<input type="button" onclick="start1(0,0);" / value="カメラ＆マイクSTOP">
<input type="button" onclick="updateDeviceList();" / value="デバイス変更">
</div>

<label>Select audio output: </label>
<style>
select {
width: 100px;
}
</style>
<select id="audiolist"></select>
<select id="videolist"></select>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： Ogre7077
回答日時：2022/07/16 15:42

音声と映像なら <video> だけで処理

映像だけなら <video> だけで処理
音声だけなら <audio> だけで処理
止めるなら getUserMedia は必要ない
<audio> <video> が既存なら createElement しない

<select> を読み込んで getUserMedia の引数に deviceId を渡す
例) getUserMedia({ video: { deviceId: videolist.value } })

<select> は中身を空にしてから <option> 追加
deviceid → device.deviceId
device.label は空欄になる可能性を考慮する