目的
getUserMedia()でブラウザから端末の映像と音声を取得する。
環境
- OS: macOS Mojave 10.14.4
- ブラウザ: Google Chrome 73.0.3683.103
- エディター: Visual Studio Code 1.33.0
- ローカルサーバー: Live Server(VSCode拡張機能)
ゴール
ソース
javascript
js/main.js
"use strict";
// 映像と音声をストリーミングする
const mediaStreamConstraints = {
video: true,
audio: true
};
// ストリームが読み込まれる動画要素
const localVideo = document.querySelector("video");
// 動画で再生されるlocalStream。
let localStream;
// video要素にMediaStreamを追加する処理。
function gotLocalMediaStream(mediaStream) {
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
// エラー処理
function handleLocalMediaStreamError(error) {
console.log("navigator.getUserMedia error: ", error);
}
// MediaStreamを初期化
navigator.mediaDevices
.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream)
.catch(handleLocalMediaStreamError);
概要
js/main.js
"use strict";
-
'use strict';
を使うと、的確なエラーチェックが行われる。
js/main.js
// 映像と音声をストリーミングする
const mediaStreamConstraints = {
video: true,
audio: true
};
- constraints引数で取得するメディアを指定できる。
js/main.js
// 動画で再生されるlocalStream。
let localStream;
// video要素にMediaStreamを追加する処理。
function gotLocalMediaStream(mediaStream) {
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
-
getUserMedia()
が成功すると、カメラからの映像と音声がvideo要素のソースとして設定される。
html
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebRTC - getUserMedia()</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<h1>WebRTC - getUserMedia()</h1>
<video autoplay playsinline></video>
<script src="js/main.js"></script>
</body>
</html>
概要
index.html
<video autoplay playsinline></video>
- autoplayは必ず設定する。
css
css/main.css
video {
max-width: 100%;
width: 320px;
}
- 動画の適切なサイズと最大サイズを設定するためにwidthとmax-widthを追加する。高さは自動計算される。