iOS11からWebRTCがモバイルSafariに対応しましたのでWebカメラ（ウェブカム）を使いカメラに写っている動画（今回は音声なし）をHTMLに表示/ビデオキャプチャするデモを作ってみました。
＊ PCをご使用の場合、ブラウザはChrome、Firefox、Safari、Opera、Edgeでご確認ください。
Front Camera
フロント（イン）カメラ
CSS Filter Effects
フロント（イン）カメラ – CSS フィルター（ブラー・色相回転・明る・彩度・階調反転・透明度・コントラスト・グレースケール・セピア）
CSS3のフィルターで簡単にエフェクトを追加できます。（2017年11月12日現時点でPCをご使用の場合、ブラウザはChrome、Firefox、Safari、Operaでご確認ください。）
Rear Camera
リア（バック/アウト）カメラ
リア（バック/アウト）カメラのあるPC、タブレット、スマホ等でご確認ください。
CSS Filter Effects
リア（バック/アウト）カメラ – CSS フィルター（ブラー・色相回転・明る・彩度・階調反転・透明度・コントラスト・グレースケール・セピア）
Code
フロント（イン）カメラ/リア（バック/アウト）カメラ（JavaScript内にコメントアウト）から動画表示用グレースケールの場合のHTML、CSS、JavaScriptのコードを記しました。
HTML
<!doctype html> <html lang="ja"> <head> <title>タイトル</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" type="text/css" href="style.css"> <body> <video id="video" autoplay playsinline></video> <script type="text/javascript" src="script.js"></script> </body> </html>
JavaScript
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var URL = window.URL || window.webkitURL;
var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
var RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
var RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate || window.mozRTCIceCandidate;
// フロント（イン）カメラの場合
const medias = {audio : false, video : { facingMode: "user" }},
video = document.getElementById("video");
// リア（バック/アウト）カメラの場合
/* const medias = {audio : false, video : { facingMode: { exact: "environment" } }},
video = document.getElementById("video"); */
navigator.getUserMedia(medias, successCallback, errorCallback);
function successCallback(stream) {
video.srcObject = stream;
};
function errorCallback(error) {
alert(error);
};
