WebRTC H5实现服务器转发的视频聊天

最新推荐文章于 2024-01-27 23:42:30 发布

Cceking

最新推荐文章于 2024-01-27 23:42:30 发布

阅读量9.1k

点赞数 4

分类专栏： java 前端文章标签： webrtc websocket

本文链接：https://blog.csdn.net/cceking/article/details/80297249

版权

本文详细介绍了如何使用WebRTC H5 API获取音视频数据，并通过WebSocket服务器转发实现视频聊天。讲解了从获取音视频流、处理编码、到在页面展示以及WebSocket通信的全过程，同时探讨了在不同浏览器和设备上的兼容性问题。

摘要由CSDN通过智能技术生成

WebRTC H5实现服务器转发的视频聊天

说明：

此处使用到的WebRTC皆为H5的API，实际上调用的是封装在浏览器的WebRTC的库，用于获取实时视频数据，传输数据则是使用WebSocket实现。
其中的实例语法只用到原生JS，版本为ES6，可能需要较高版本的浏览器支持（IE一般不支持）。

1.获取音视频数据

方法：navigator.mediaDevices.getUserMedia

1.1前置条件

基于浏览器的安全策略，通过WebRTC（具体为getUserMedia）调用摄像头和麦克风获取音视频数据，只能是在HTTPS下的网页，或者是本地localhost下才能调用，需要先校验。

function validate(){
   
    var isSecureOrigin = location.protocol === 'https:' ||
            location.hostname === 'localhost';
    if (!isSecureOrigin) {
        alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' +'\n\nChanging protocol to HTTPS');
        location.protocol = 'HTTPS';
    }
}

1.2初始化

直接获取音视频，一般默认是前置摄像头。

var constraints = {
    audio: true, 
    video: true  //设置为false则只获取音频
};

还可以设置视频的其他参数，此处设置视频的分辨率，min和max为分辨率的最值，ideal为理想值，浏览器会先尝试找到最接近指定的理想值的设定或者摄像头（如果设备拥有不止一个摄像头），但不保证。下面是获取分辨率为640*480的视频。

var constraints = {
    audio: true,
    video: {  width: { min: 640, ideal: 640, max: 640 },  height: { min: 480, ideal: 480, max: 480 }}
};

初始化

//链式操作，then和catch是并列关系
navigator.mediaDevices.getUserMedia(constraints)
    .then(handleSuccess)
    .catch(handleError);

1.3处理音视频数据

此时返回的只是一个流对象，包括了原始的音视频数据，不能直接操作，需要后续的MediaRecorder封装才能处理。

function handleSuccess(stream) {
   
    log('getUserMedia() got stream: ', stream);

    //stream即为返回成功的结果，设置为全局便于的后续上传操作
    window.stream = stream;

    //显示在页面上
    var recordedVideo = document.querySelector('video#recorded');
    recordedVideo.srcObject = stream;
    recordedVideo.onloadedmetadata = function(e) {
   
        log("Label: " + stream.label);
        //音轨，PCM
        log("AudioTracks" , stream.getAudioTracks());
        //视频图像
        log("VideoTracks" , stream.getVideoTracks());
    };
}

function handleError(error) {
   
    console.log(