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

78 阅读 0 评论 52 点赞

我是靠谱客的博主阳光裙子，最近开发中收集的这篇文章主要介绍webrtc简单案例——音视频采集和播放webrtc简单案例——音视频采集和播放，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

<!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>

结果展示：

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

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>

效果展示：

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

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>