webrtc => WebRTCの簡単な例

パラメーター

getUserMedia（）パラメータ	説明
制約	それは、どのメディアデバイス、すなわち、オーディオまたはビデオ、またはその両方を使用するかを指定するための配列で構成されています
成功コールバック	成功したコールバック用の関数を作成します。この関数は、メディアデバイスから取得したストリームを提供します。
エラーコールバック	このコールバックは、メディアデバイスが存在しない、またはユーザーがメディアデバイスを使用する許可を拒否したなどの問題が発生したときに呼び出されます

カメラとマイクの許可を取得し、Webページでプレビューを表示する

WebRTCの使用を開始するには、カメラとマイクの許可を得る必要があります。そのためには、次のことが必要です。

adapter.js 、ここから取得できます
ビデオタグとjsコードの少しのhtmlウェブページ

adapter.jsはWebRTCのJavaScriptシムで、 WebRTCコミュニティの助けを借りてGoogleが管理し、ベンダーのプレフィックス、ブラウザの相違点、仕様変更を抽象化したものです。

今度はこのファイルを作成したら、次のコードでhtmlファイルを作成します：

<!DOCTYPE html>
<html>
    <head>
        <title>My first webrtc example</title>
        <script src="adapter.js"></script>
        <script type="text/javascript">
            function gotStream(stream) {
                window.AudioContext = window.AudioContext || window.webkitAudioContext;
                var audioContext = new AudioContext();

                // Create an AudioNode from the stream
                var mediaStreamSource = audioContext.createMediaStreamSource(stream);

                // Connect it to destination to hear yourself
                // or any other node for processing!
                mediaStreamSource.connect(audioContext.destination);
                var video = document.querySelector('video');
                var videoTracks = stream.getVideoTracks();
                window.stream = stream; // make variable available to browser console
                video.srcObject = stream;
            }
            function onfail(error) {
                console.log("permission not granted or system don't have media devices."+error.name);
            }
            navigator.getUserMedia({audio:true,video:true}, gotStream,onfail);
            
            
        </script>
    </head>
    <body>
        Welcome to webrtc
        <video id="local" autoplay=""></video>
    </body>
</html>

完了したら、このファイルを保存してブラウザで実行します。ブラウザを起動すると、このWebページがあなたのウェブカメラとマイクにアクセスできるように要求されます。これを許可すると、ウェブページ上でプレビューが表示されます。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

webrtc
WebRTCの簡単な例

サーチ…

パラメーター

カメラとマイクの許可を取得し、Webページでプレビューを表示する