Forked from: taock's WebRTC getUserMedia サンプル View Diff (1) forked: WebRTC getUserMedia サンプル taock Follow 2017-01-08 17:15:45 License: MIT License Fork0 Fav0 View187 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 42 lines HTML 7 lines CSS 22 lines forked: WebRTC getUserMedia サンプル // forked from taock's "WebRTC getUserMedia サンプル" http://jsdo.it/taock/getUserMediaSample //getUserMediaのAPIをすべてnavigator.getUserMediaに統一 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; //window.URLのAPIをすべてwindow.URLに統一 window.URL = window.URL || window.webkitURL; // 変数 var video = document.querySelector("#video"), btnStart = document.querySelector("#start"), btnStop = document.querySelector("#stop"), videoObj = { video: true, audio: true }; btnStart.addEventListener("click", function() { var localMediaStream; if (!navigator.getUserMedia) { alert("カメラ未対応のブラウザです。"); } navigator.getUserMedia( // 使用するデバイスの情報(少し昔は、'video, audio'のように文字列で渡していました。) videoObj, // 成功時の処理 function(stream) { localMediaStream = stream; video.src = window.URL.createObjectURL(localMediaStream); }, // 失敗時の処理( function(error) { console.error("getUserMedia error: ", error); alert("エラーが発生しました。:" + error.name); }); btnStop.addEventListener("click", function() { localMediaStream.stop(); }); }); <article> <video id="video" autoplay></video> <section> <button id="start">Start</button> <button id="stop">Stop</button> </section> </article> forked: WebRTC getUserMedia サンプル * { margin: 0; padding: 0; } body { background: #gray; font: sans-serif; } video { width: 320px; height: 240px; } button { width: 80px; height: 30px; font-size: 20px; text-align: center; vertical-align: center; } // forked from taock's "WebRTC getUserMedia サンプル" http://jsdo.it/taock/getUserMediaSample //getUserMediaのAPIをすべてnavigator.getUserMediaに統一 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; //window.URLのAPIをすべてwindow.URLに統一 window.URL = window.URL || window.webkitURL; // 変数 var video = document.querySelector("#video"), btnStart = document.querySelector("#start"), btnStop = document.querySelector("#stop"), videoObj = { video: true, audio: true }; btnStart.addEventListener("click", function() { var localMediaStream; if (!navigator.getUserMedia) { alert("カメラ未対応のブラウザです。"); } navigator.getUserMedia( // 使用するデバイスの情報(少し昔は、'video, audio'のように文字列で渡していました。) videoObj, // 成功時の処理 function(stream) { localMediaStream = stream; video.src = window.URL.createObjectURL(localMediaStream); }, // 失敗時の処理( function(error) { console.error("getUserMedia error: ", error); alert("エラーが発生しました。:" + error.name); }); btnStop.addEventListener("click", function() { localMediaStream.stop(); }); }); <article> <video id="video" autoplay></video> <section> <button id="start">Start</button> <button id="stop">Stop</button> </section> </article> * { margin: 0; padding: 0; } body { background: #gray; font: sans-serif; } video { width: 320px; height: 240px; } button { width: 80px; height: 30px; font-size: 20px; text-align: center; vertical-align: center; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author taock Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/cIyX/js"></script> getUserMedia html5 html5_elements&api javascript WebRTC Discussion Questions on this code? Tags WebRTC getUserMedia html5 html5_elements&api javascript
