MediaStream API 사용 시작
15129 단어 webapimediastreamtutorial
개시하다
우선, 사용자의 오디오/비디오 장치에 접근해야 한다. 이 장치들은 '흐름' 형식으로 데이터를 제공한다흔히 볼 수 있는 용례는 사용자의 마이크와 카메라에 접근하는 것이다.가장 흔히 볼 수 있는 방법 중 하나는 브라우저를 통해 내장된 getUserMedia 방법이다.이 글은 API의 다른 부분을 이해하는 것에 관한 것이 더 많다.실제로 사용되는 이 방법을 보려면 Kevin's post about getting audio in the browser을 참조하십시오.
다음 코드를 가져와 HTML 파일에 삽입한 다음 브라우저에서 파일을 엽니다.
<!DOCTYPE html>
<html>
<body>
<h1>Getting Started With MediaStream</h1>
<script>
navigator.mediaDevices
.getUserMedia({ audio: true })
.then((stream) => {
console.log('MEDIA STREAM: ', stream)
})
.catch((err) => {
alert('PERMISSION DENIED')
})
</script>
</body>
</html>
PERMISSION DENIED.가 표시되고 이를 허용하면 콘솔에서 다음이 표시됩니다.
보시다시피 MediaStream 객체에 사용할 수 있는 몇 가지 속성과 방법이 있습니다.우리가 이것들을 깊이 연구하기 전에, 나는 몇 가지 정의를 분명히 하고 싶다.
흐름: 미디어 내용의 흐름.우리가 토론할 내용에 관해서, 이것은 사용자 장치에서 온 정보 흐름을 가리킨다.흐름은 장치의 마이크나 카메라에서 오거나 동시에 둘에서 온다.하나의 흐름은 하나 이상의 궤적으로 구성됩니다.
트랙: A
track는 흐름 속의 매체입니다.이것들은 보통 오디오나 비디오 곡들이다.만약 우리가 마이크와 카메라를 동시에 사용한다면, 우리의 흐름은 오디오와 영상 궤도로 구성될 것이다.등록 정보
active 부동산이다.이 속성은 MediaStream 객체의 일부가 현재 활성 상태이거나 사용 중인지 여부를 나타내는 부울 값입니다.대부분의 MediaStream 객체에는 오디오 및/또는 비디오 트랙이 포함됩니다.만약 이 곡들 중 어느 것이 active,라면 미디어스트림 대상의 active 속성은 진짜가 될 것이다.메서드
MediaStreamTrack를 매개 변수로 받아들여 미디어스트림 대상에 추가합니다.
MediaStreamTrack 대상의 목록을 되돌려줍니다.그것을 테스트하기 위해서, 우리는 getTracks 방법을 코드에 추가할 것이다.나는 제약에 video: true를 넣었다. 이렇게 하면 우리는 여러 궤적을 볼 수 있다. <!DOCTYPE html>
<html>
<body>
<h1>Getting Started With MediaStream</h1>
<script>
navigator.mediaDevices
.getUserMedia({ audio: true, video: true })
.then((stream) => {
console.log("tracks", stream.getTracks());
.catch((err) => {
console.log("ERROR", err);
alert("PERMISSION DENIED");
});
</script>
</body>
</html>
MediaStreamTrack의 객체 목록이 반환됩니다.만약 우리가 이것을 위의 getTracks 대신 사용한다면, 우리는 오디오 곡만 표시하는 목록을 얻을 수 있을 것이다.이렇게 하면 비디오 유형의 객체 목록
MediaStreamTrack이 반환됩니다.이 방법은 문자열을 수신하고 미디어스트림 대상에서 해당하는 id가 있는 곡을 되돌려줍니다.
<!DOCTYPE html>
<html>
<body>
<h1>Getting Started With MediaStream</h1>
<script>
navigator.mediaDevices
.getUserMedia({ audio: true, video: true })
.then((stream) => {
const trackId = stream.getAudioTracks()[0].id;
console.log("getTrackById", stream.getTrackById(trackId))
.catch((err) => {
console.log("ERROR", err);
alert("PERMISSION DENIED");
});
</script>
</body>
</html>
브래킷 제거
이 메서드는
MediaStream 객체에서 지정된 궤적을 삭제합니다.코드의 궤적을 삭제하고 MediaStream.getTracks dev tools 컨트롤러에 단추를 추가하면 더 이상 존재하지 않습니다.만약 우리가 페이지에div에 영상 흐름을 표시하고 영상 곡을 삭제한다면, 이 흐름은 다시 나타나지 않을 것이다. <!DOCTYPE html>
<html>
<body>
<h1>Getting Started With MediaStream</h1>
<script>
navigator.mediaDevices
.getUserMedia({ audio: true, video: true })
.then((stream) => {
const tracks = stream.getTracks()
console.log("tracks before remove", tracks);
// remove both tracks
stream.removeTrack(tracks[1])
stream.removeTrack(tracks[0])
console.log("tracks after remove", stream.getTracks());
.catch((err) => {
console.log("ERROR", err);
alert("PERMISSION DENIED");
});
</script>
</body>
</html>
이벤트
Events는 프로그래밍 중인 시스템에서 발생하는 작업일 뿐입니다. 코드가 필요할 때 반응할 수 있도록 시스템이 알려 줍니다.암페어
event listener is a function that runs when a specific event occurs.당신은
MediaStream 대상의 일부 사건을 주의해야 합니다.addtrack
새 궤적 객체를 추가할 때 발생합니다.
이벤트 탐지기:
onaddtrack 새 곡을 추가할 때 자극됩니다.이벤트 탐지기를 사용하려면 트랙을 추가할 때 이 함수를 호출할 수 있도록 함수에 지정하십시오.navigator.mediaDevices
.getUserMedia({ audio: true, video: true })
.then((stream) => {
stream.onaddtrack = function(event) {
// code to execute when track is added
}
.catch((err) => {
console.log("ERROR", err);
alert("PERMISSION DENIED");
});
브래킷 제거
새 궤적 객체를 추가할 때 발생합니다.
이벤트 탐지기:
onremovetrack 새 곡을 삭제할 때 자극됩니다.이벤트 탐지기를 사용하려면 트랙을 삭제할 때 호출할 함수에 지정하십시오.결론
MediaStream API는 사용자가 만든 응용 프로그램에서 사용할 수 있는 매우 유용합니다.나는 이 글이 너에게 정보를 제공하고 네가 인터넷 개발자가 되는 것을 도울 수 있기를 바란다.
Reference
이 문제에 관하여(MediaStream API 사용 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/deepgram/getting-started-with-the-mediastream-api-14b8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
