【音视频】WebRTC-Web 音视频采集与播放

发布于:2025-07-31 ⋅ 阅读:(23) ⋅ 点赞:(0)

一、打开摄像头

打开摄像头首先需要有一个htmlvideo标签:

  • id = "local-video",是为了后续的js脚本调用这个对象
  • autoplay是设置打开后自动播放,playsinline则是为了兼容移动端
 <video id = "local-video" autoplay playsinline></video>

添加<script>脚本标签:

  • 需要定义一个constraints对象,内部需要设置音频和视频的打开情况,比如这里只打开摄像头,则:
//媒体限制
const constraints = {
	audio:false,
	video:true
};
  • 通过documentquerySelector方法,返回对应标签id的对象,比如这里要得到<video>标签,就传入"#local-video",如果要得到对应的<button>标签对象,则查找"#showVideoBtn"
const video = document.querySelector("#local-video");
document.querySelector("#showVideoBtn").addEventListener("click",onOpenCamera);
  • 要在点击按钮后,打开摄像头,我们要实现下面三个回调函数:

handleSucess

function handleSuccess(stream){
	//document是内置全局变量,表示当前HTML文档,这里是选择对应的video对象
	const video = document.querySelector("#local-video"); //#local-video选择对应的id,返回的是引用
	video.srcObject = stream; //把视频流赋值给video对象
}

function handleError(error){
	//console是内置全局变量,表示浏览器端的控制台
	console.error("getUserMedia error:" + error); //控制台打印错误
}

这个函数在打开摄像头成功之后调用,会传入一个stream对象,表示对应的媒体流,我们在这个回调函数中要将媒体流传入上述<video>标签对象,具体的方法是赋值<video>对象的srcObject属性:

video.srcObject = stream;

handleError

function handleError(error){
	//console是内置全局变量,表示浏览器端的控制台
	console.error("getUserMedia error:" + error); //控制台打印错误
}

这个函数用于打开摄像头失败之后的回调函数,传入错误信息,我们可以在控制台打印对应的信息:

onOpenCamera

 function onOpenCamera(e){
		//navigator也是内置全局变量,表示导航对象
		//mediaDevice是对应的媒体设备对象
		//getUserMedia是获取用户媒体的方法,返回一个Promise对象,promise执行成功后调用then函数,失败触发catch函数
		navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
	}

这个函数在我们按钮点击后触发,是按钮点击的事件回调函数,传入一个事件对象,我们可以在这个事件回调函数内部调用navigator对象的mediaDevices.getUserMedia方法,也就是先获得媒体设备,然后在将我们的媒体限制、回调函数绑定,具体如下:

  • getUserMedia函数返回一个promise对象,这个对象执行完打开摄像头任务后,会调用对应的函数
    • 如果任务成功,调用then里面的回调函数
    • 如果任务错误,调用catch里面的回调函数
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);

最后,我们需要将按钮的点击事件回调函数绑定在showVideoBtn

document.querySelector("#showVideoBtn").addEventListener("click",onOpenCamera);

完整代码如下:

<!DOCTYPE html>

<html> 
    <body>
        <video id = "local-video" autoplay playsinline></video>
        <button id = "showVideoBtn"> 打开摄像头</button>
        <p>通过getUserMedia获取视频</p>
    </body>

    <script>
        //媒体限制
        const constraints = {
            audio:false,
            video:true
        };
        
        function handleSuccess(stream){
            //document是内置全局变量,表示当前HTML文档,这里是选择对应的video对象
            const video = document.querySelector("#local-video"); //#local-video选择对应的id,返回的是引用
            video.srcObject = stream; //把视频流赋值给video对象
        }

        function handleError(error){
            //console是内置全局变量,表示浏览器端的控制台
            console.error("getUserMedia error:" + error); //控制台打印错误
        }

        function onOpenCamera(e){
            //navigator也是内置全局变量,表示导航对象
            //mediaDevice是对应的媒体设备对象
            //getUserMedia是获取用户媒体的方法,返回一个Promise对象,promise执行成功后调用then函数,失败触发catch函数
            navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
        }
        
        //绑定按钮的点击事件,点击后调用onOpenCamera函数
        document.querySelector("#showVideoBtn").addEventListener("click",onOpenCamera);
    </script>

</html>

Web页面效果如下:

在这里插入图片描述

二、打开麦克风

打开麦克风和打开摄像头类似,把对应的<video>标签改为audio标签,然后添加上controls模块,这个模块是添加一些暂停、声音调节等功能

<audio id = "local-audio" autoplay controls></audio>

还需要要修改对应的媒体限制对象constraints,关闭video,打开audio

const constraints = {
	video: false,
	audio: true
}

其他部分和打开摄像头保持一致

<!DOCTYPE html>
<html>
    <body>
        <audio id = "local-audio" autoplay controls></audio>
        <button id = "showAudioBtn"> 打开麦克风</button>
        <p>通过getUserMedia获取音频</p>
    </body>

    <!--类似video部分的js脚本-->
    <script>
        const constraints = {
            video: false,
            audio: true
        }

        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);
        }
        
        showAudioBtn = document.querySelector("#showAudioBtn");
        showAudioBtn.addEventListener("click",onOpenMicrophone);
    </script>

</html>

Web页面效果如下:

在这里插入图片描述

三、同时打开摄像头和麦克风

同时打开摄像头和麦克风,和打开摄像头一致,唯一需要修改的就是媒体限制对象constraints,将视频和音频都设置为true

const constraints = {
	video: true,
	audio: true
}

完整代码如下:

<!DOCTYPE html>

<html>
    <body>
        <video id = "local-video" autoplay playsinline></video>
        <button id = "showVideoAudioBtn"> 打开摄像头和麦克风</button>
        <p>通过getUserMedia获取摄像头和麦克风</p>
    </body>

    <script>
        const constraints = {
            video: true,
            audio: true
        }
        
        function handleSuccess(stream){
            const video = document.querySelector("#local-video");
            video.srcObject = stream;
        }
        
        function handleError(error){
            console.error("getUserMedia error" + error);
        }
        
        function onOpenVideo_Audio (e){
            navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
        }

        showVideoBtn = document.querySelector("#showVideoAudioBtn");
        showVideoBtn.addEventListener("click",onOpenVideo_Audio);

    </script>
    </html>

在这里插入图片描述

更多资料:https://github.com/0voice


网站公告

今日签到

点亮在社区的每一天
去签到