HTML5 - WebRTC 支援

12月 16, 2015

WebRTC 功能嚴格說應該不算是 html5 的新功能，但 html5 支援該功能，作用於在網頁嵌入攝影機，讓兩台電腦可以透過攝影機進行對話溝通，我們寫支簡單的程式就可以做到，範例如下：
<html>
<head>
<meta charset="utf8">
<script>

    var video = document.querySelector('video');

    var constraints = {
        audio: false,
        video: true
    };

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    function successCallback(stream) {
        window.stream = stream; // stream available to console
        if (window.URL) {
            video.src = window.URL.createObjectURL(stream);
        } else {
            video.src = stream;
        }
    }

    function errorCallback(error) {
        console.log('navigator.getUserMedia error: ', error);
    }

    navigator.getUserMedia(constraints, successCallback, errorCallback);

</script>

</head>
    <body>
        <video id="gum-local" autoplay></video>

    </body>
</html>

另外或者可以直接使用 firefox 所提供的 webrtc 語法
        
        <div id="freshtilledsoil_embed_widget" class="video-chat-widget"></div>
        <script id="fts" src="http://freshtilledsoil.com/embed/webrtc-v5.js?r=FTS0316-CZ6NqG97"></script>