Practice/Web

WebRTC: 비디오 캡쳐화면 보여주기

MediaStream

MediaStream API는 동기화된 미디어 스트림을 나타낸다. 예를 들면, 캡코더와 마이크로부터 입력받은 스트림은 동기화된 비디오와 오디오 트랙을 가진다.

http://www.w3.org/TR/mediacapture-streams/#stream-api


<video> 태그

<video> 태그는 HTML5에 소개된 것으로, 동영상이나 미디어 스트림과 같은 비디오를 표현하는데 사용한다.

http://www.w3schools.com/tags/tag_video.asp


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>WebRTC: Video Capture Demo</title>
    </head>
    <body>
        <video autoplay></video>

        <script>
          var onFailSoHard = function(e) {
              console.log('Rejected!', e);
          };

          window.URL = window.URL || window.webkitURL;
          navigator.getUserMedia = (navigator.getUserMedia
                                    || navigator.webkitGetUserMedia
                                    || navigator.mozGetUserMedia
                                    || navigator.msGetUserMedia);
          var video = document.querySelector('video');
          if (navigator.getUserMedia) {
              navigator.getUserMedia({audio: true, video: true},
                                     function(stream) {
                                         video.src = window.URL.createObjectURL(stream);
                                     },
                                     onFailSoHard);
          }
          else {
              alert('getUserMedia() is not supported in your browser');
          }
        </script>

    </body>
</html>


출처: http://www.html5rocks.com/en/tutorials/getusermedia/intro/

저작자 표시 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'Practice > Web' 카테고리의 다른 글

WebRTC: 비디오 캡쳐화면 보여주기  (0) 2013.03.12

알림

이 블로그는 구글에서 제공한 크롬에 최적화 되어있고, 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.

카운터

Today : 14
Yesterday : 105
Total : 158,502

티스토리 툴바