【WebRtc】Web网页音视频通话之Webrtc相关操作（一）

原创

已于 2023-02-14 09:08:57 修改 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #音视频 #webrtc

于 2022-09-29 16:31:36 首次发布

该博客介绍了如何使用WebRTC在前端实现摄像头操作，包括打开和关闭摄像头、静音和解除静音音频、控制视频显示以及视频截图并下载。通过JavaScript的MediaDevices.getUserMedia方法获取用户媒体流，并利用video元素进行显示和控制。此外，还展示了如何处理用户权限和流数据的控制，以及截图后在canvas上绘制并保存。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打开摄像头</title>
    <link rel="stylesheet" href="../../../static/layui/css/layui.css">
</head>
<body>
<div id="container">
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-md12" style="text-align: center">
            <video id="video-local" autoplay playsinline width="400px" height="400px"></video>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-md12" style="text-align: center">
            <button type="button" class="layui-btn layui-btn-normal" onclick="openCamera()">打开摄像头</button>
            <button type="button" class="layui-btn layui-btn-danger" onclick="stopVideo()">关闭摄像头</button>
        </div>
    </div>
    <blockquote class="layui-elem-quote layui-text" style="margin-top: 15px;">
        <p>显示摄像头预览的内容，网页上由元素video来呈现。</p>
        <p>点击打开摄像头按钮后，浏览器会询问是否允许，请点击“允许”。</p>
    </blockquote>
</div>
</body>
</html>

javaScript

   let videoElem = document.querySelector('video');

    /**
     * MediaDevices.getUserMedia()方法在用户允许后，按照请求，拿到stream。 stream可以包含视频或音频。前面的设定里，我们只使用视频。
     * 如果用户拒绝了使用摄像头申请，或者申请的媒体不可用，即表现为被拒绝。 用户拒绝会报NotAllowedError，找不到符合要求的设备会报NotFoundError DOMException。
     * @param e
     * @returns {Promise<void>}
     */
    function openCamera() {
   
   
        if (window.stream != null) {
   
   
            alert('摄像头已打开，请勿重新打开摄像头');
            return false;
        }
        const constraints = {
   
   
            audio: true,
            video: true
        };
        navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(error => {
   
   
            console.error(error)
        });
    }

    /**
     * 成功获取到流
     * @param stream
     */
    function gotStream(stream) {
   
   
        window.stream = stream;
        videoEle.srcObject = stream;
    }

    /**
     *  关闭摄像头
     *  获取到video中的流，并将流中的轨道关闭
     */
    function stopVideo() {
   
   
        // 获取video中的流
        const stream = videoElem.srcObject;
        // 判断stream 是否为空
        if (stream == null) {
   
   
            return;
        }
        // 获取流中的所有轨道
        const tracks = stream.getTracks();
        tracks.forEach(function (track) {
   
   
            track.stop();
        });