webrtc浏览器端直播推流示例代码-html代码-BFW代码库

webrtc浏览器端直播推流示例代码

代码语言：html

所属分类：多媒体

代码描述：webrtc浏览器端直播推流示例代码,直播服务器可以安装mediamtx，地址https://github.com/bluenviron/mediamtx

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}
body {
    display: flex;
    flex-direction: column;
}
#video {
	height: 100%;
	background: black;
    flex-grow: 1;
    min-height: 0;
}
#controls {
    height: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#device {
    flex-direction: column;
}
#device > div {
    margin: 10px 0;
    display: flex;
    gap: 20px;
    justify-content: center;
}
select {
    width: 200px;
}
</style>
</head>
<body>

<video id="video" muted controls autoplay playsinline></video>
<div id="controls">
    <div id="initializing" style="display: block;">
        initializing
    </div>
    <div id="device" style="display: none;">
        <div id="device_line">
            video device:
            <select id="video_device">
                <option value="none">none</option>
            </select>

            audio device:
            <select id="audio_device">
                <option value="none">none</option>
            </select>
        </div>
        <div id="codec_line">
            video codec:
            <select id="video_codec">
            </select>

            audio codec:
            <select id="audio_codec">
            </select>
        </div>
        <div id="bitrate_line">
            video bitrate (kbps):
            <input id="video_bitrate" type="text" value="10000" />

            audio bitrate (kbps):
            <input id="audio_bitrate" type="text" value="32" />

            <div>
                <input id="audio_voice" type="checkbox" checked>
                <label for="audio_voice">optimize for voice</label>
            </div>
        </div>
        <div id="submit_line">
            <button id="publish_confirm">publish</button>
        </div>
    </div>
    <div id="transmitting" style="display: none;">
        publishing
    </div>
    <div id="error" style="display: none;">
        <span id="error-message"></span>
    </div>
</div>

<script>

const INITIALIZING = 0;
const DEVICE = 1;
const TRANSMITTING = 2;
const ERROR = 3;

let state = INITIALIZING;
let errorMessage = '';

const render = () => {
    for (const el of ['initializing', 'device', 'transmitting', 'error']) {
        document.getElementById(el).style.display = 'none';
    }

    switch (state) {
    case DEVICE:
        document.getElementById('device').style.display = 'flex';
        break;

    case TRANSMITT.........完整代码请登录后点击上方下载按钮下载查看