先日、javascriptのgetUserMediaメソッドの調査のため以下のようなhtmlをcentos7上で作成し、pythonのhttp.serverモジュールで起動した簡易httpサーバー経由でアクセスしてみたのですが、「navigator.mediaDevices is undefined」エラーが出て正常に動作しません。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- マイクの入力をそのまま返すだけのプログラム -->
<script>
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const audioelm = document.createElement('audio');
audioelm.autoplay = true;
audioelm.srcObject = stream;
});
</script>
</body>
</html>
結局、こちらに書かれている通り、
- プロトコルがhttps
- hostがlocalhost
- htmlファイルをブラウザで直接開く
のいずれかでなければgetUserMediaが使えないということが原因でした。
htmlファイルを直接ブラウザで開いて作業続行でも事足りたのですが、せっかくの機会なので簡単な簡易httpsサーバーのたてかたを調べて簡易httpsサーバー経由でアクセスするようにしてみました。
私が考える一番簡単な簡易httpsサーバーのたてかた
必要なもの
- opensslコマンド
手順
簡易httpsサーバー用のオレオレ証明書を作成後、オレオレ証明書を使ってサーバー起動という流れになります。
1. オレオレ証明書の作成
1.1オレオレ証明書用秘密鍵の作成
[ssh_admin@localhost audio]$ openssl genrsa -out oreore-private.key 2048
Generating RSA private key, 2048 bit long modulus
...............+++
........................................................+++
e is 65537 (0x10001)
1.2オレオレ証明書用CSR(証明書署名要求)の作成
$ openssl req -new -key oreore-private.key -out oreore.csr
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [XX]:JP
State or Province Name (full name) []:Hokkaido
Locality Name (eg, city) [Default City]:Sapporo
Organization Name (eg, company) [Default Company Ltd]:bitstar Inc.
Organizational Unit Name (eg, section) []:
Common Name (eg, your name or your server's hostname) []:oreore.server
Email Address []:
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
1.3オレオレ証明書の作成
$ openssl x509 -req -days 3650 -in oreore.csr -signkey oreore-private.key -out oreore.crt
Signature ok
subject=/C=JP/ST=Hokkaido/L=Sapporo/O=bitstar Inc./CN=oreore.server
Getting Private key
2. オレオレ証明書を使って8443ポートでhttpsサーバー起動
簡易httpsサーバー起動
$ openssl s_server -cert oreore.crt -key oreore-private.key -accept 8443 -WWW
Using default temp DH parameters
ACCEPT
簡易httpsサーバーなので、アクセス時はindex.htmlファイルでも
https://oreore.server:8443/index.html
と明示する必要があります。
これより簡単な方法をご存じの方はぜひ教えてください。
今回、いろいろ調べていた中で、@kunichikoさんのこちらの記事に出会ったのですが、SSL証明書関連のファイルについてわかりやすく書かれていてとてもためになりました。
SSL証明書関連の業務に携わるかたでお読みになっていない方にはご一読をおすすめします。