カメラの取得
HTML5ではカメラの取得が出来る。
下記のコードはChrome環境で実施。
毎回許可が聞かれないようにするには、
SSLを使う方法があるとか？
うまくいかない場合は以下を確認。
- ローカルホストで実施する場合はapache等を立ち上げる(file://では動きません)
- chrome:flagsで<video> 要素で Media Source API を無効にするが有効になっているか。
ただし、問題を引き起こすかもしれないので設定には注意が必要。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title></title>
<script>
function test() {
if(!navigator.webkitGetUserMedia){return ;}
navigator.webkitGetUserMedia({video:true,audio:true},
function(localMediaStream) {
var video = document.getElementById('video');
video.src= window.URL.createObjectURL(localMediaStream);
video.play();
},
function(err) {
console.log("getUserMedia() is not supported in your browser");
console.log(err);
});
}
</script>
</head>
<body>
<input type="button" value="押す" onclick="test();">
<video id ="video"></video>
</body>
</html>
通信の実施
以下の処理をクライアント側のjavascriptで実装する必要有。
1.WebSocketを確立
2.RTCPeerConnectionを用いて、ICE情報(STUNやTURN等の通信経路情報)をやり取りする
ローカルアドレスのままだと、組織外の通信ができないため、
NATを使用してグローバルアドレスに変換して通信するが、
通常のNATではローカルアドレスで指定されているSDPの宛先まで書き換えない。
そこで、NAT越えをする必要があるのだが、その際にSTUNサーバやTURNサーバを使用する。
3.SDPの情報を送り合う[オファーとアンサーのレシーブ](シグナリング方法[情報の送り合い方法]は自由。SIP等を使う。)
4.setRemoteDescriptionを用いて、送られてきた相手方のSDPの情報をセットすることでUAごとのコネクションを確立する。
5.コネクションが確立したら、確立先のIPアドレス・ポート番号めがけて、データのやり取りをする。
最終更新：2016年12月30日 15:12
