用HTML5实现使用手机端摄像头实现webrtcs视频流

webrtc流媒体的播放，本质上也是基于建立端到端的RTC连接、接收推送过来的视频流数据的过程。webrtc流地址本质上就具有很强的规则性，其中包含信令服务器地址、基本参数等。
SRS（Simple Real-Time Media Server）是一个强大的开源的流媒体服务器， webrtcs视频流的播放本身就是一个订阅（播放）的过程，因此 SRS 源码中自然包含播放的代码，即
srs.sdk.js 是基于 SRS 实时视频服务器、对浏览器支持的 WebRTC 基础功能的封装

系统需要的环境

- 1，Srs的安装Docker | SRS

- 2，搭建https://www.rabbitmq.com/

RabbitMQ主要是用于后台的数据交付到队列内，然后前端页面使用ws(wss)来展示数据。朋友们可以根据业务需求自行修改.

// 下面的代码是回流，显示数据到页面上
//换域名如果你的域名启用https，Stomp.client要使用wss://
//换域名如果你的域名启用http，Stomp.client要使用ws://
//如果使用http://127.0.0.1 ,就使用Stomp.client要使用ws://
//var client = Stomp.client('wss://rabbit.ggiooo.com:15674/wss');
var client = Stomp.client('wss://rabbit.ggiooo.com:15674/ws');
//订阅rabbmiq队列
var on_connect = function(x) {
      id = client.subscribe("/queue/rtc_publisher_queue", function(d) {
            console.log("d ===>",d)
            vm.testprint(d);
        });
};
var on_error =  function() {
      console.log('error');
 };
client.connect('guest', 'guest', on_connect, on_error, 'dou');

Stomp.client就是连接ws rabbitMQ队列协议。然后建立on_connect。

client.connect('用户名'，'密码'，on_connet,on_error,'主机名')

二，启动js rtc推流

sdk = new SrsRtcPublisherAsync();
....
// For example: webrtc://r.ossrs.net/live/livestream
var url = $("#txt_url").val();
sdk.publish(url).then(function(session){
   ...
}

url是SRS服务端的webrtc地址

文档链接：Docker | SRS

打开地址：http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream

你就能找到WebRTC协议的地址

关于SRS的教程很多，我这边不详细说明SRS。请百度查询SRS

三，下面是index.html的核心代码。

<!DOCTYPE html>
<html>
<head>
    <title>SRS</title>
    <meta charset="utf-8">
    <style>
        body{
            padding-top: 30px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript" src="js/adapter-7.4.0.min.js"></script>
    <script type="text/javascript" src="js/srs.sdk.js"></script>
    <script type="text/javascript" src="js/winlin.utility.js"></script>
    <script type="text/javascript" src="js/srs.page.js"></script>
    <script src="js/stomp.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>
<body>

<div class="container">
    <div class="form-inline">
        URL:
        <input type="text" id="txt_url" class="input-xxlarge" value="">
        <button class="btn btn-primary" id="btn_publish">开始推流</button>
    </div>

    <label></label>
    <video id="rtc_media_player" width="320" autoplay muted></video>

    <label></label>
    SessionID: <span id='sessionid'></span>
    <div style="display:none">
    <label></label>
    Audio: <span id='acodecs'></span><br/>
    Video: <span id='vcodecs'></span>
    </div>

     <div id="app" style="margin: 10px;" >
        <div v-for="(item,i) in lists">
            <img :src="item.scene_img" style="width:220px;height:220px;  " />
            <p style="font-size:14px">[视频创建时间：{{item.created_at}}]-[AI完成时间{{item.last_at}}]
                <br> {{item.scene_msg}}</p>
        </div>
    </div>

</div>
 

<script type="text/javascript">
$(function(){
    var sdk = null; // Global handler to do cleanup when republishing.
   
        $('#rtc_media_player').show();

 
        // Close PC when user replay.
        if (sdk) {
            sdk.close();
        }
        sdk = new SrsRtcPublisherAsync();

        // User should set the stream when publish is done, @see https://webrtc.org/getting-started/media-devices
        // However SRS SDK provides a consist API like https://webrtc.org/getting-started/remote-streams
        $('#rtc_media_player').prop('srcObject', sdk.stream);
        // Optional callback, SDK will add track to stream.
        // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };

        // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
        sdk.pc.onicegatheringstatechange = function (event) {
            if (sdk.pc.iceGatheringState === "complete") {
                $('#acodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "audio"));
                $('#vcodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "video"));
            }
        };

        // For example: webrtc://r.ossrs.net/live/livestream
        var url = $("#txt_url").val();    //rtmp地址
        sdk.publish(url).then(function(session){
            $('#sessionid').html(session.sessionid);
            $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
        }).catch(function (reason) {
            // Throw by sdk.
            if (reason instanceof SrsError) {
                if (reason.name === 'HttpsRequiredError') {
                    alert(`WebRTC推流必须是HTTPS或者localhost：${reason.name} ${reason.message}`);
                } else {
                    alert(`${reason.name} ${reason.message}`);
                }
            }
            // See https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#exceptions
            if (reason instanceof DOMException) {
                if (reason.name === 'NotFoundError') {
                    alert(`找不到麦克风和摄像头设备：getUserMedia ${reason.name} ${reason.message}`);
                } else if (reason.name === 'NotAllowedError') {
                    alert(`你禁止了网页访问摄像头和麦克风：getUserMedia ${reason.name} ${reason.message}`);
                } else if (['AbortError', 'NotAllowedError', 'NotFoundError', 'NotReadableError', 'OverconstrainedError', 'SecurityError', 'TypeError'].includes(reason.name)) {
                    alert(`getUserMedia ${reason.name} ${reason.message}`);
                }
            }

            sdk.close();
            $('#rtc_media_player').hide();
            console.error(reason);
        });
    };

    $('#rtc_media_player').hide();
    var query = parse_query_string();
    srs_init_rtc("#txt_url", query);

    $("#btn_publish").click(startPublish);
    // Never play util windows loaded @see https://github.com/ossrs/srs/issues/2732
    if (query.autostart === 'true') {
        window.addEventListener("load", function(){ startPublish(); });
    }

   

});
</script>
</body>
<script>   
    // 下面的代码是回流，显示数据到页面上
    //换域名如果你的域名启用https，Stomp.client要使用wss://
    //换域名如果你的域名启用http，Stomp.client要使用ws://
    //如果使用http://127.0.0.1 ,就使用Stomp.client要使用ws://
    //var client = Stomp.client('wss://rabbit.ggiooo.com:15674/wss');
    var client = Stomp.client('wss://rabbit.ggiooo.com:15674/ws');
    //订阅rabbmiq队列
    var on_connect = function(x) {
        id = client.subscribe("/queue/rtc_publisher_queue", function(d) {
            console.log("d ===>",d)
            vm.testprint(d);
        });
    };
    var on_error =  function() {
        console.log('error');
    };
    client.connect('guest', 'guest', on_connect, on_error, 'dou');
</script>


<script>
var _data ={
      lists :[]
};
var vm=new Vue({
    el:'#app',
    data:_data,
    onLoad:function(){
    },
    mounted:function(){
    },
    methods:{
        addValueToFront(newValue) {
            this.lists.unshift(newValue);  //向数组添加数组
            console.log(this.lists);
        },
        testprint(d) {
            console.log("57 >>>")            
            let jsonObject = JSON.parse(d.body);
            if (jsonObject.hasOwnProperty('scene_img')) {
                let scene_img = 'https://hs.ggiooo.com/upimgloads/'+ 
                     jsonObject.scene_img.replace("/www/srs5/output/images/",'')
                let scene_msg =jsonObject.scene_msg
 this.addValueToFront({'scene_img':scene_img,'scene_msg':scene_msg,'created_at':jsonObject.created_at,'last_at':jsonObject.last_at})
             }
        }

    }
    
})

</script>

</html>

3-1，关于wss的用法：

链接：http://ossrs.net/lts/zh-cn/docs/v6/doc/getting-started#webrtc-using-https

【WebRTC using HTTPS】推流时，若需要在非本机使用WebRTC，比如SRS运行在远程服务器，在笔记本或者手机上使用WebRTC，则需要开启HTTPS API。

直白说就是要加上请使用你的证书文件，代替上面配置中的key和cert

3-2，推流的逻辑图

3-3，上面的代码没办法实现手机摄像头使用后置

//修改js/srs.sdk.js
//函数SrsRtcPublisherAsync名

    self.constraints = {
        audio: true,
        video: {
            facingMode: { exact: "environment" },  //后置摄像头
            width: {ideal: 320, max: 576}
        }
    };

以上的实现是作者【黑金】业务需求经过采坑已经实现的，不是网上抄袭的。如果对webrtcs推流感兴趣的朋友，欢迎加微信来聊。

用HTML5实现使用手机端摄像头实现webrtcs视频流

系统需要的环境

二，启动js rtc推流

三，下面是index.html的核心代码。

jQuery笔记

jquery ajax post 请求表单格式x-www-form-urlencoded

echarts问题汇总

echarts自定义悬浮提示

vue qiankun -- 多tab标签页切换缓存

vue相关插件

智菜谱推|基于SprinBoot vue的智能菜谱推荐系统(源码数据库文档)

h5小笔试

Web实验十 HTML5基础与CSS3应用

网站图片加载速度优化的几种方式

前端哥

探索高效时间管理：jQuery DateTimePicker 开源项目推荐

jQuery File Upload 使用教程

jQuery笔记

jquery ajax post 请求表单格式x-www-form-urlencoded

推荐开源项目：jQuery-disablescroll，实现超流畅滚动体验！

jQuery实现返回顶部按钮特效的代码教程

推荐文章：打造优雅全屏编辑体验 —— jQuery Fullscreen Editor 深度解析与应用指南...

jQuery-Spectragram 使用教程

echarts问题汇总

echarts自定义悬浮提示

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

3
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

4
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

5
npm的使用

2024-08-18 00:08:131000

6
JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

7
在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

8
成为优秀的TS体操高手之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

9
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

10
html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000