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); };