SkyWay 샘플을 Vue.js로 작성하는 자습서 vol1
원래 코드는 여기입니다.
우선 로컬 비디오 액세스까지 할 수 있으면 이번은 나는 만족이므로 vol1만으로 일단 정리합니다.
추기: 라고 진행하고 있어 깨달았지만 vol1은 SkyWay 전혀 사용하지 않네요 ()
1. index.html과 app.js 준비
html은 vue.js 로딩과 app.js 로딩을 기술하여 원래 div 요소 (id = "app")를 만듭니다.
index.html
<!DOCTYPE html>
<html lang="ja">
<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>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="app.js"></script>
</body>
</html>
급급한 것은 이런 느낌.
app.js
const app = new Vue({
el: '#app',
data: {
},
methods: {
},
mounted: async function () {
}
});
이 정도를 기억해 두면 Vue.js 재기록은 곧 갈 수 있습니다.
장치에 대한 액세스 설명
app.js의 mounted 내에 추가합니다.
app.js
//省略
mounted: async function () {
//デバイスへのアクセス
const deviceInfos = await navigator.mediaDevices.enumerateDevices();
console.log(deviceInfos);
}
//省略
2. 서버를 시작하고 확인
로컬 서버를 시작할 수 있으면 괜찮습니다.
$ python -m SimpleHTTPServer 3000
localhost:3000에 액세스하여 콘솔을 확인하면 연결된 미디어 장치(카메라나 마이크 등)의 정보가 나옵니다.
3. 사용할 카메라와 오디오 장치 추출
data 객체에 audio와 video를 저장하기 위한 배열을 준비
app.js
data: {
audios: [],
videos: []
}
app.js
mounted: async function () {
//デバイスへのアクセス
const deviceInfos = await navigator.mediaDevices.enumerateDevices();
//1. オーディオデバイスの情報を取得
deviceInfos
.filter(deviceInfo => deviceInfo.kind === 'audioinput')
.map(audio => this.audios.push({text: audio.label || `Microphone ${this.audios.length + 1}`, value: audio.deviceId}));
//2. カメラの情報を取得
deviceInfos
.filter(deviceInfo => deviceInfo.kind === 'videoinput')
.map(video => this.videos.push({text: video.label || `Camera ${this.videos.length - 1}`, value: video.deviceId}));
console.log(this.audios, this.videos);
}
보충: 지금까지의 코드
이런 식으로 Vue.js 내의 변수로 인식되게 되어 있습니다.
4. 선택 상자에서 선택
선택한 장치를 기억하는 변수
selectAudio 및 selectVideo 추가app.js
data: {
audios: [],
videos: [],
selectedAudio: '', //追記
selectedVideo: '', //追記
}
methods에 디바이스가 선택될 때마다 호출되는 함수
onChange와, 양쪽 모두가 선택되면 발화한다connectLocalCamera를 정의app.js
methods: {
onChange: function (){
if(this.selectedAudio != '' && this.selectedVideo != ''){
this.connectLocalCamera();
}
},
connectLocalCamera: async function (){
alert('デバイスが選択されました。');
}
},
HTML에 선택 상자를 정의.
여기에서 선택되면, 이전에 data 객체내에서 정의한
selectAudio와 selectVideo에 반영된다.index.html
<div id="app">
マイク:
<select v-model="selectedAudio" @change="onChange">
<option disabled value="">Please select one</option>
<option v-for="(audio, key, index) in audios" v-bind:key="index" :value="audio.value">
{{ audio.text }}
</option>
</select>
カメラ:
<select v-model="selectedVideo" @change="onChange">
<option disabled value="">Please select one</option>
<option v-for="(video, key, index) in videos" v-bind:key="index" :value="video.value">
{{ video.text }}
</option>
</select>
</div>
움직이면 이런 느낌
여기까지의 app.js를 정리하면이런 느낌입니다.
5. 카메라 정보를 브라우저에 반영
index.html
<div id="app"></div>에 다음 비디오 태그 추가index.html
<video id="my-video" muted="true" width="500" autoplay playsinline></video>
app.js의 메소드에서 connectLocalCamera를 완전히 바꿉니다.
app.js
connectLocalCamera: async function (){
const constraints = {
audio: this.selectedAudio ? { deviceId: { exact: this.selectedAudio } } : false,
video: this.selectedVideo ? { deviceId: { exact: this.selectedVideo } } : false
}
const stream = await navigator.mediaDevices.getUserMedia(constraints);
document.getElementById('my-video').srcObject = stream;
}
정말은 여기에서 document.getElementById를 사용하지 않고 하고 싶었습니다만, 잘하지 않고 조사하면 같은 느낌으로 고민하고 있는 사람 다 그랬기 때문에 살짝 닫았습니다.
Alternative for setting the srcObject using VueJS
움직이면 이런 느낌입니다.
여기까지의 코드(index.html와 app.js)는 여기에 정리해 둡니다.
요약
역시 Vue.js로 쓰면 처리의 흐름의 전망이 붙기 쉬워지네요.
이번까지의 코드는,
とりあえずWebページでカメラの映像とかとりたい 때에 사용할 수 있을 것 같습니다.도움이되면 다행입니다.
Reference
이 문제에 관하여(SkyWay 샘플을 Vue.js로 작성하는 자습서 vol1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/n0bisuke/items/6e1f56678b2eb6318594텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
