getUserMedia()로 브라우저로부터 단말의 영상과 음성을 취득하는 방법.
7765 단어 WebRTC
목적
getUserMedia()로 브라우저로부터 단말의 영상과 음성을 취득한다.
환경
목표
출처
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";
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
};
js/main.js
// 動画で再生されるlocalStream。
let localStream;
// video要素にMediaStreamを追加する処理。
function gotLocalMediaStream(mediaStream) {
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
getUserMedia（）가 성공하면 카메라의 비디오와 오디오가 비디오 요소의 소스로 설정됩니다. 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>
css
css/main.css
video {
max-width: 100%;
width: 320px;
}
기타
localStream.getVideoTracks()를 두드리면 videoTracks 정보를 얻을 수 있습니다.
인용원
Real time communication with WebRTC
Reference
이 문제에 관하여(getUserMedia()로 브라우저로부터 단말의 영상과 음성을 취득하는 방법.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/miyataku/items/5b694c139d7e91ddbe83
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(getUserMedia()로 브라우저로부터 단말의 영상과 음성을 취득하는 방법.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/miyataku/items/5b694c139d7e91ddbe83텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
