webrtc简单案例——音视频采集和播放

素颜马尾好姑娘i 2022-10-08 05:48 259阅读 0赞

# webrtc简单案例——音视频采集和播放 #

--------------------

## 目录 ##

1.  打开摄像头并将画面显示到页面
2.  打开麦克风并在页面播放捕获的声音
3.  同时打开摄像头和麦克风，并在页面显示画面和播放捕获的声音

--------------------

### 1. 打开摄像头并将画面显示到页面 ###

1.  html代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <video id="local-video" autoplay playsinline></video>
    <button id="showVideo">打开摄像头</button>
    <p>通过getUserMedia()获取视频</p>
    </body>
    
    <script>
        const constraints = {
        
            audio: false,
            video: true
        }
    
        // 处理打开摄像头成功
        function handleSuccess(stream) {
        
            const video = document.querySelector("#local-video");
            video.srcObject = stream;
        }
    
        // 异常处理
        function handleError(error) {
        
            console.error("getUserMedia error: " + error)
        }
    
        function onOpenCamera(e) {
        
            navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
        }
    
        document.querySelector("#showVideo").addEventListener("click", onOpenCamera)
    
    </script>
    </html>

1.  结果展示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70]

--------------------

### 2. 打开麦克风并在页面播放捕获的声音 ###

1.  html代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <audio id="local-audio" autoplay controls>播放麦克风捕获的声音</audio>
    <button id="playAudio">打开麦克风</button>
    <p>通过getUserMedia()获取音频</p>
    </body>
    
    <script>
        const constraints = {
        
            audio: true,
            video: false
        }
    
        // 处理打开麦克风成功
        function handleSuccess(stream) {
        
            const audio = document.querySelector("#local-audio");
            audio.srcObject = stream;
        }
    
        // 异常处理
        function handleError(error) {
        
            console.error("getUserMedia error: " + error)
        }
    
        function onOpenMicrophone(e) {
        
            navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
        }
    
        document.querySelector("#playAudio").addEventListener("click", onOpenMicrophone)
    
    </script>
    </html>

1.  效果展示：  
    ![3.][]

--------------------

### 3. 同时打开摄像头和麦克风，并在页面显示画面和播放捕获的声音 ###

1.  html代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <video id="local-video" autoplay playsinline></video>
    <button id="showVideo">打开音视频</button>
    <p>通过getUserMedia()获取音视频</p>
    </body>
    
    <script>
        const constraints = {
        
            audio: true,
            video: {
        width: 640, height: 480}
        }
    
        // 处理打开摄像头成功
        function handleSuccess(stream) {
        
            const video = document.querySelector("#local-video");
            video.srcObject = stream;
        }
    
        // 异常处理
        function handleError(error) {
        
            console.error("getUserMedia error: " + error)
        }
    
        function onOpenAV(e) {
        
            navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
        }
    
        document.querySelector("#showVideo").addEventListener("click", onOpenAV)
    
    </script>
    </html>

1.  效果展示如前两个示例

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70]: /images/20221005/0c74f05045044b0b9dbf8583b639876e.png
[3.]: /images/20221005/fa56ee6ae48c4a5c949b5f72b0b36aeb.png