常連

[https://blog.katsubemakito.net/html5/qrcode-reader](https://blog.katsubemakito.net/html5/qrcode-reader)

上記サイトを参考に、```navigator.mediaDevices.getUserMedia``` を使用してカメラによりQRコードを読み込むscriptを作成しました。

処理は動いているのですが、少し小さいQRコードになると読み込めません。

スマホのカメラにはオートフォーカス機能がありますので、オートフォーカスを実装したいと考えていますがオートフォーカスに関する情報が見つかりません。

webRTCの規格ではカメラを制御（オートフォーカスを有効にしたり）する事は規定されていないのでしょうか。

詳しい方がおられたら、伺ってみたいです。

以上、よろしくお願いします。

webRTCでカメラにオートフォーカスを指定する方法

こんにちは。
現在ToughPad(Windows10)を用いたWebRTCによるカメラの撮影機能を作成しております。
## 目的
この機器には前面と背面両方にカメラが備わっており、
それを切り替えて撮影し、サーバーにアップロードできるようなプログラムを作成しようとしています。

## 経過
[ブラウザでWebカメラの映像を画像化【javasript】](http://famirror.hateblo.jp/entry/2015/12/15/180000)を参考に
カメラの表示、画像のキャプチャは作成できましたので、

[HTML5で背面カメラを取得する](http://ichiy.hatenablog.com/entry/2014/07/11/202327)
[Android Chrome でテストすると【今は】カメラの front と back を切り替えできます](http://logicalerror.seesaa.net/article/446259988.html)
[javascriptで内カメラと外カメラの切り替え](http://mugimugi.hatenablog.com/entry/2014/07/13/javascript%E3%81%A7%E5%86%85%E3%82%AB%E3%83%A1%E3%83%A9%E3%81%A8%E5%A4%96%E3%82%AB%E3%83%A1%E3%83%A9%E3%81%AE%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88)
を参考に、入力ソース（前面カメラ/背面カメラ)を切替える機能を作成しようとしましたが、
これがうまく動作しません。

## 詳細
まず、``` MediaStreamTrack.getSources ```がis not a functionと表示されたので、``` mediaDevices.enumerateDevices``` で置き換えました。

これで背面/前面のsourceIDを取得することができましたので、
取得したIDをselectboxにappendし、onイベントで変更時にアクションを取る、という風に作りましたが
これでセレクトボックスを変更してもvideoinputが切り替わりません。
どうやらChromeで許可したカメラデバイスを基準としているようで、

```javascript
navigator.mediaDevices.getUserMedia({
    video:{
        optional: [{sourceId: source}]
    }
})
```

のsourceIdを背面カメラ、Chromeの許可カメラを前面カメラに設定し、ページにアクセスしてみましたが
表示されるのは前面カメラのみでした。

videoinputのソースに設定する方法に```navigator.getUserMedia```を使用していますが、
他に適切な方法があるのでしょうか？
以下にソース全文を記載しておきます。
(※logical errorさんのソースをlist()以外ほぼそのまま使用しています)
なにとぞお力添えをよろしくお願いいたします。

```html
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" type="text/css">
    </head>
    <body>


<video id="camera" autoplay></video>
<br>
<select name="dlist">
</select>

<script>
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
toastr.options.positionClass = "toast-top-center";

if ( $.isMobile ) {
	$("#camera").css("width","100%");
}

// カメラ用 video 要素(DOM オブジェクト)
var camera;
// スマホ用コンボボックス(jQuery オブジェクト)
var select;
// カメラの一覧
var camera_data;
// 現在のカメラの ID
var camera_id = "default";

check();

// *************************************
// navigator.getUserMedia チェック
// *************************************
function check() {

	var api = [
		"webkitGetUserMedia", "mozGetUserMedia","msGetUserMedia"
	]

	$.each(api,function(idx){
		if (navigator.getUserMedia = navigator.getUserMedia || navigator[api[idx]]) {
			return false;
		}
	});

	if ( !navigator.getUserMedia ) {
		error("WebRTC を使用できません");
		return;
	}

	// WEBカメラの初期化
	init();
}

// *************************************
// カメラストリーム
// *************************************
function init() {

	camera = $("#camera").get(0);

	if ( location.hash != "" ) {
		camera_id = location.hash;
		camera_id = camera_id.replace("#","");
		console.log(camera_id);
		$("<div>"+camera_id+" を選択しました</div>").appendTo("body");
	}

	navigator.getUserMedia(
		{video: {
			optional: [{sourceId: camera_id }]
		}}, 
		function(stream) {
			camera.src = window.URL.createObjectURL(stream);
		},
		function(err){
			error(err.name);
		}
	);

	list();

}

// *************************************
// MediaStreamTrack が使える場合
// カメラ一覧をコンボボックス化
// *************************************
function list() {

    navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {
        devices.forEach(function(device) {
            if(device.kind == "videoinput"){
                $('[name="dlist"]').append($('<option>').html(device.label).val(device.deviceId));
            }
        });
    })
    .catch(function(err) {
        options.error(err.name + ": " + err.message);
    });

    $('[name="dlist"]').on("change",function(){
        var val = $('[name="dlist"]').val();
        console.log(val);

        var txt = $('[name="dlist"] option:selected').text();
        console.log(txt);
        
        location.hash=val;
        location.reload(true);
    });
}

// *************************************
// エラー処理
// ※ 動画で代替
// *************************************
function error( message ) {
		toastr.error( message + "<br>代替として動画を表示します" );
		$("#camera")
		.prop({ 
			"loop" : true, "muted" : true, "controls" : true,
			"src" : "https://lightbox.sakura.ne.jp/demo/mp4/waterfall-free-video9.mp4"
		})
		.css("border", "solid 1px #000");
}
</script>
    </body>
</html>
```

WebRTCにおけるカメラの切り替え

私が参加するプロジェクトでブラウザを使用せずにWebRTCの画像・映像の通信機能を使用したい
という要望が発生し、WebRTCのさらに元となる技術"libWebRTC"を使用したいというお話になりました。


### 発生している問題

```
・libWebRTCをどのように使用するのかがわからない。
・WPFで使用するためC#で使用できるのかがわからない。
→ビルドをするとC++であるという記事が見受けられたため。
```


### 補足情報（FW/ツールのバージョンなど）
下記GitHubで見つけたlibWebRTCになります。
使用方法はわかっていません。
https://github.com/aisouard/libwebrtc

C#で(WPF)ブラウザを使用せずにWebRTCで直接通信する方法。libwebRTC

### 前提・実現したいこと

UbunthでTURNサーバを構築するためにcoturnをインストールして設定しました。
[Trickle-ice](https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/)でテストしたところ下記エラーが出て繋がっていないようです。

### 発生している問題・エラーメッセージ

```
Note: errors from onicecandidateerror above are not neccessarily fatal. For example an IPv6 DNS lookup may fail but relay candidates can still be gathered via IPv4.
The server stun:xxx.xxx.xxx:80 returned an error with code=701:
STUN host lookup received error.
The server turn:xxx.xxx.xxx:80?transport=udp returned an error with code=701:
TURN host lookup received error.
```
上記エラーメッセージのURLのとこは、xxx.xxx.xxxに変換しています。
### coturnのインストールと設定

①依存ツールやライブラリの導入
```
$sudo apt-get update
$sudo apt-get upgrade
$sudo apt-get install gcc
$sudo apt-get install sqlite3
$sudo apt-get install libssl-dev
$sudo apt-get install libevent-dev
$sudo apt-get install make
```
②coturnのインストール
```
$sudo apt install coturn
```
③起動時にCoturnデーモンを起動
```
$sudo vim /etc/default/coturn
TURNSERVER_ENABLED=1
という行を挿入
```
④coturnサーバの設定
```
$sudo vim /etc/turnserver.conf
下記を記入
listening-port=80
lt-cred-mech
user=user:password
realm=xxx.xxx.xxx
```
⑤coturnの再起動
```
$sudo service coturn restart
```
### 試したこと
coturnの起動状況が知りたくて下記コマンドを実行しました。
```
$sudo service coturn status
● coturn.service - coTURN STUN/TURN Server
     Loaded: loaded (/lib/systemd/system/coturn.service; enabled; vendor preset: enabled)
     Active: active (running) since Sun 2021-04-11 07:30:00 JST; 17s ago
       Docs: man:coturn(1)
             man:turnadmin(1)
             man:turnserver(1)
    Process: 44751 ExecStart=/usr/bin/turnserver --daemon -c /etc/turnserver.conf --pidfile /run/turnserver/turnserver.pid (code=exited, status>
    Process: 44753 ExecStartPost=/bin/sleep 2 (code=exited, status=0/SUCCESS)
   Main PID: 44752 (turnserver)
      Tasks: 3 (limit: 1073)
     Memory: 4.4M
     CGroup: /system.slice/coturn.service
             mq44752 /usr/bin/turnserver --daemon -c /etc/turnserver.conf --pidfile /run/turnserver/turnserver.pid

Apr 11 07:30:16 turn01 turnserver[44752]: 0: Trying to bind DTLS/UDP listener socket to addr 127.0.0.1:80, again...
Apr 11 07:30:17 turn01 turnserver[44752]: 0: Trying to bind fd 12 to <127.0.0.1:80>: errno=13
Apr 11 07:30:17 turn01 turnserver[44752]: 0: Cannot bind TLS/TCP listener socket to addr 127.0.0.1:80
Apr 11 07:30:17 turn01 turnserver[44752]: 0: Trying to bind TLS/TCP listener socket to addr 127.0.0.1:80, again...
Apr 11 07:30:17 turn01 turnserver[44752]: 0: Trying to bind fd 18 to <127.0.0.1:80>: errno=13
Apr 11 07:30:17 turn01 turnserver[44752]: 0: Cannot bind TLS/TCP listener socket to addr 127.0.0.1:80
Apr 11 07:30:17 turn01 turnserver[44752]: 0: Trying to bind TLS/TCP listener socket to addr 127.0.0.1:80, again...
Apr 11 07:30:17 turn01 turnserver[44752]: 0: Trying to bind fd 17 to <127.0.0.1:80>: errno=13
Apr 11 07:30:17 turn01 turnserver[44752]: 0: Cannot bind DTLS/UDP listener socket to addr 127.0.0.1:80
Apr 11 07:30:17 turn01 turnserver[44752]: 0: Trying to bind DTLS/UDP listener socket to addr 127.0.0.1:80, again...
```
起動はしているけど80番Portが空いてないのかなとポートの開放状態を確認しました。
```
netstat -tulpn
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 127.0.0.53:53           0.0.0.0:*               LISTEN      25644/systemd-resol
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      23730/sshd: /usr/sb
tcp6       0      0 :::22                   :::*                    LISTEN      23730/sshd: /usr/sb
udp        0      0 127.0.0.53:53           0.0.0.0:*                           25644/systemd-resol
udp        0      0 XXX.XXX.XX.XXX:68       0.0.0.0:*                           25618/systemd-netwo
udp        0      0 XXX.XXX.XX.XXX:123      0.0.0.0:*                           811/ntpd
udp        0      0 127.0.0.1:123           0.0.0.0:*                           811/ntpd
udp        0      0 0.0.0.0:123             0.0.0.0:*                           811/ntpd
udp6       0      0 fe80::1:a0ff:fefb:6:123 :::*                                811/ntpd
udp6       0      0 ::1:123                 :::*                                811/ntpd
udp6       0      0 :::123                  :::*                                811/ntpd
```
上記一部xxxに変換しています。
80番でListenしてないのでこれが原因かな？と思っているのですが、coturnではlistening-port=80で設定しているつもりなのですが、何か足りないのでしょうか？

因みにFWは稼働していません。
```
$sudo ufw status
Status: inactive
```
### 補足情報（FW/ツールのバージョンなど）
Ubunth Server 20.04.2 LTS

WebRTC:TURNサーバ（coturn）が繋がらない

WebRTCやWebAudioなどを使って、PC内で流れる音声を取得しようとしているのですが、方法が分かりません。。。

具体的に言うと、
Youtubeで流れる音を波形データとして取得し、
その音声の波長データを使って3Dの物体生成する、
というのをやっております。

ちなみに近い完成イメージでいうと、今試しているのは、
WebRTCのnavigator.getUserMediaよりPC内臓のマイクの音を拾ってきて、
その波形データを使って3D表現するというのをやっております。
(Youtubeで流したものをわざわざマイクから拾うという、すごく遠回りな方法です。。。)

```javascript
/*
 * PCのマイクから音をひろってくる
 */

var getUserMedia = navigator.getUserMedia ? 'getUserMedia' :
    navigator.webkitGetUserMedia ? 'webkitGetUserMedia' :
    navigator.mozGetUserMedia ? 'mozGetUserMedia' :
    navigator.msGetUserMedia ? 'msGetUserMedia' :
    undefined;
var astream, micsrc;
var conditions={audio:true, video:false};
const Mic = () => {
    navigator[getUserMedia](
        conditions,
        (stream) => {
            astream=stream;
            micsrc=audioctx.createMediaStreamSource(stream);
            micsrc.connect(audioctx.destination);
            micsrc.connect(analyser);
        },
        (e) => { console.error(e); }
    );
}

//Mic集音開始
Mic();


/*
 * 音声ファイルデータを使用して3Dオブジェクトを生成 
 */

var audioctx = new AudioContext();

var timerId;
var analyser = audioctx.createAnalyser();
analyser.fftSize = 128;
analyser.minDecibels = -100;
analyser.maxDecibels = -30;

var obj;
const DrawGraph = () => {

    var data = new Uint8Array(512);

    scene.remove(obj);

    analyser.getByteFrequencyData(data); //Spectrum Dataで取得

    //Spectrum Dataの値を使って3Dオブジェクト生成
    var geo = new THREE.TorusKnotGeometry( //小数をかけてるのは値を小さくして、3Dオブジェクトのサイズを小さくするため
        Math.round(data[0] * 2.0), //全体的な大きさ
        Math.round(data[1] * 0.3), //チューブの太さ
        Math.round(40), //クネクネの進む方向に対してなん分割するか
        Math.round(8), //チューブ方向に何分割するか
        Math.round(data[2] * 0.3), //なんかクネクネ具合が変わる数値その1
        Math.round(2) //なんかクネクネ具合が変わる数値その2
    );

    var mat = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe:true });
    obj = new THREE.Mesh( geo, mat);
    scene.add(obj);
    
    requestAnimationFrame(DrawGraph);
}
timerId=requestAnimationFrame(DrawGraph);
```

これと同様なことを、PC内で流れる音のみの音声データを拾って、実現したいなと思っているのですが、その方法/調べ方が分からず。。。

丸投げちっくな質問の仕方になってしまい大変恐縮なのですが、ぜひ検索ワードのヒントでもいいので、教えていただけると幸いです...！！

よろしくお願いいたします。

PC内で流れる音源の音声データをJSで取得する方法を教えてください！

下記デモを参考にブラウザからカメラとマイクの情報を取得しようと思っています。
[https://github.com/skyway/skyway-handson-js/tree/master/STEP4](https://github.com/skyway/skyway-handson-js/tree/master/STEP4)

この中でnavigator.mediaDevices.enumerateDevices()を使ってデバイス情報を取得しようとしていますが、safariではうまく動いていません。

対策や代替のメソッドがあれば教えてほしいです。

safariでnavigator.mediaDevices.enumerateDevices()がうまく動かない

webRTCでアクセスした映像から`canvas`で画像を撮るアプリを作成中です。

通常、PCブラウザカメラの画像サイズはwidth:1280,height:720などの横長サイズですが、`video`タグにサイズ指定を入れずにiPhone・iPadからsafari経由でアクセスすると縦長サイズになってしまいます。iPhone・iPadからの画像もpcブラウザカメラと同様の横長サイズで取得したいのですが、`video`タグのサイズを横長に指定すると（下記のようにwidth:640,height:360）そのサイズの中で縦長になってしまいます。詳しいことは分かりませんがiPhone・iPadのカメラサイズが変更できない仕様なんだと思います。

```
$(function() {
	navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
   getUserMedia: function(c) {
     return new Promise(function(y, n) {
       (navigator.mozGetUserMedia ||
        navigator.webkitGetUserMedia).call(navigator, c, y, n);
     });
	}
	} : null);
	if (!navigator.mediaDevices) {
	  alert("getUserMedia() not supported.");
	  return;
	} else {
		console.log("success")
	}

	// Prefer camera resolution nearest to 1280x720.
	var constraints = { audio: false, video: { 
						advanced: [
							{ width: 1280 },
							{ height: 720 },
							{ facingMode: 'environment' } 
							]}
					};
	// alert(constraints)
	navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
	  video = document.getElementById('camera');
	  // videoの縦幅横幅を取得
	  video.width = 640;
	  video.height = 360;
	  video.srcObject = stream;
	}).catch(function(err) {
	  console.log(err.name + ": " + err.message);
	});
```


そこでiPhone・iPadで撮影された`canvas`に落とした画像を加工・変形してpcブラウザカメラの画像サイズに合わせるやり方にしようと考えて

```
	var canvas = document.getElementById('canvas');
			//canvasの描画モードを2dに
			var ctx = canvas.getContext('2d');
			canvas.setAttribute("width", 540);
			canvas.setAttribute("height", 360);
			ctx.drawImage(video, 0, 0, 540, 360, 0, 0, 540, 360)
			
```

のように`canvas.drawImage`で画像を切り取り拡大・縮小・変形させて横長サイズに落とし込むようにしましたが、切り取るための元映像の画像サイズが分からないため上手く調整がいきません。画像のサイズを取得したいのですがどうすればよいでしょうか？

`video`タグにサイズ指定をしないとフル画面でカメラ画像を取得できますが、サイズ指定がしていないせいか`video.width` `video.height`とも0が返ってきますし、サイズ指定してやるとサイズの中で調整された縦長のサイズが読み取れません。

よろしくお願いします。


`

iPhone・iPadからアクセスしたwebRTCの画像サイズを知りたい

###困っていること
1. `navigator.mediaDevices.getUserMedia()`が、PCでは動作するが、タブレットからだとエラーが出る
2.  getUserMediaのconstraintsを外すことで、タブレットでも動作したが、何故動作したかわからない

###動作環境
PC: Windows 10, Chrome v.65
タブレット: Huawei MediaPad T2 8.0, Android 6.0.1, Chrome v.65

###該当コード
```javascript
navigator.mediaDevices
.getUserMedia({
	audio: false,
	video: {width: 1, height: 1}
})
```

###エラーの詳細(タブレットのみ)
NotReadableError (DOMException: could not start source) が出力されました

###わからないこと
上記コードを
```javascript
navigator.mediaDevices
.getUserMedia({
	audio: false,
	video: true
})
```
としたら動いたのですが、何故これで動いたのかわかりません。
[MDN](https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia)によると、
- プレーン値はidealと同じ → 必須ではない
- そもそもconstraintsが原因なら、NotReadableErrorではなく、NotFoundErrorがthrowされるはず

###知りたいこと
- 何故constraintsを外したら動いたのか
- constraintsを外す以外に、タブレット上でも動くようにできること (できればconstraintsは外したくないため)
- その他にデバッグとしてできること

よろしくお願いします。